javascript代码实例教程-jQuery.slide1.3x

发布时间:2019-01-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery.slide1.3x脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 $.fn.extend({
//常用:鼠标经过||点击切换图片,
// 调用方式,$("对象").changeimg("事件")
changeimg: function(event)
{
VAR index=0;
$(this).eq(index).find("img").eq(0).hide();
$(this).bind(event,function ()
{
index = $(this).index(this);
$(this).eq(index).find("img").eq(0).hide();
$(this).eq(index).siblings(this).find("img").show();
});
return this;
},
//常用:鼠标经过||点击的时候切换class,这里默认的切换class为on
//调用方式:$("对象").tabClassName("事件")
tabclassname:function(event)
{
var index=0;
$(this).bind(event,function ()
{
index = $(this).index(this);
$(this).eq(index).addClass("on").siblings(this).removeClass("on");
});
return this;
},
//常用:鼠标点击||经过时候切换menu下内容
//调用方式 $("事件目标").changeCnt("内容目标","事件");
changeCnt:function(cnt,event)
{
var index = 0;
$(cnt).eq(0).show();
$(this).bind(event,function ()
{
index = $(this).index();
$(cnt).eq(index).show().siblings(cnt).hide();
});
return this;
},
//常用:鼠标经过某区域的时候,当前p的下级往上滑动
//调用方式: $("事件目标").changeCnt("当前目标下级","下级的原来的top");
//如果需要初始化的话,可以再htML里面给第一个元素添加on,这里的默认class为on
innerScroll:function(insertBox,top)
{
$(this).hover(function()
{
$(this).find(insertBox).stop(true,false).aniMATE({top:0},200);
$(this).addClass("on");
},function()
{
$(this).find(insertBox).stop(true,false).animate({top:top},200);
$(this).removeClass("on");
});
return this;
},
//固定顶部菜单
fixedMen:function(hd)
{
var _this=$(this);
$(window).scroll(function()
{
var hh=$(hd).outerHeight();
if ($(window).scrollTop()>hh)
{
_this.addClass("fixedMenu");
}else
{
_this.removeClass("fixedMenu");
}
});
return _this;
},


//点击滚动到指定地区
fixedMenScroll:function(offTop)
{
$(this).click(function()
{
var index=$(this).index()+1;
var To=$("#MenScroll"+index).offset().top-offTop+"px";
$("body,html").animate({scrollTop:To},500);
});
return this;
},
//返回顶部
toTop:function(height)
{
var _this = this;
_this.click(function ()
{
$('body,html').animate({scrollTop: 0}, 300);
return false;
});
if(height)
{
winTH();
$(window).scroll(function ()
{
winTH();
});
function winTH()
{
$(window).scroll(function ()
{
if ($(window).scrollTop() > height)
{
_this.fadeIn();
}
else
{
_this.fadeOut();
}
});
}
}


},
imgLoop:function(sPEed,th,bd)//无缝滚动
{
var oBox=$(this);
var oUl=oBox.children(bd);
var aUlLi=oUl.children("li");
var BTn=null;
var btnLi=null;
var Prev=oBox.children(".PRev");
var Next=oBox.children(".next");
var oneWidth=aUlLi.outerWidth();
var iNow=0;//控制列表
var iNow2=0;//控制小图片
if(oBox.children(th).find("ul")){ //如果有发现.hd的话,就产生小图标
btn=oBox.children(th).find("ul");
for(var i=0;i {
$("
  • "+parseInt(i+1)+"
  • ").appendTo(btn);
    }
    btnLi=btn.children("li");
    btn.width((btnLi.length+1)*btnLi.width());
    tagName(iNow2);
    btnLi.mouseover(function(){
    iNow=iNow2=$(this).index();
    tagName(iNow2);
    move(iNow);
    });
    }
    oUl.width(oneWidth*aUlLi.length);
    Prev.click(function(){
    if(!oUl.is(":animated"))
    {
    if(iNow>=aUlLi.length)
    {
    iNow=0;
    aUlLi.eq(0).css({"position":"status","left":0});
    oUl.css({"left":0});
    }
    if(iNow>=aUlLi.length-1)//临界点
    {
    aUlLi.eq(0).css({"position":"relative","left":aUlLi.length*oneWidth});


    }
    iNow++;
    if(iNow>1)//恢复列表的最后一个元素的伪装
    {
    aUlLi.eq(aUlLi.length-1).css({"position":"static","left":0});
    }
    if(oBox.children(".hd").find("ul").length)//如果.hd存在的话,就执行切换
    {
    iNow2++;
    if (iNow2 > aUlLi.length - 1) {
    iNow2 = 0;
    }
    tagName(iNow2);
    }
    move();
    }
    });
    Next.click(function()
    {


    if(!oUl.is(":animated"))//判断是否在运动
    {


    if(iNow<=-1)
    {
    iNow=aUlLi.length-1;
    aUlLi.eq(aUlLi.length-1).css({"position":"static","left":0});
    oUl.css({"left":-(aUlLi.length-1)*aUlLi.eq(0).outerWidth()})
    }
    if(iNow<=0)//临界点
    {
    aUlLi.eq(aUlLi.length-1).css({"position":"relative","left":-(aUlLi.length)*aUlLi.outerWidth()})
    }
    iNow--;


    console.log(iNow);
    if(iNow {
    aUlLi.eq(0).css({"position":"status","left":0});
    }
    if(oBox.children(".hd").find("ul").length)//如果.hd存在的话,就执行切换
    {
    iNow2--;
    if(iNow2<0)
    {
    iNow2=aUlLi.length-1;
    }
    tagName(iNow2);
    }
    move();
    }


    });
    function move()
    {
    oUl.stop(false,true).animate({left:-oneWidth*iNow},speed)
    }
    function tagName(iNow2){
    btnLi.eq(iNow2).addClass("on").siblings(btnLi).removeClass("on");
    }


    },
    Marquee:function (drt)//marquee,跑马灯
    {
    var _this=this;
    var wrap=_this.find(".wrap");
    var box1=wrap.find(".box1");
    var box2=wrap.find(".box2");
    var Prev=_this.find(".prev");
    var Next=_this.find(".next");
    if(Prev&&Next)
    {
    Prev.click(function()
    {
    if(wrap.position().left<=-(parseInt(wrap.outerWidth()/2)-158))
    {
    wrap.css("left","0");
    }
    else
    {
    wrap.animate({"left":wrap.position().left-158},300);
    }
    });
    Next.click(function()
    {
    // var iNow=wrap.position().left;
    if(wrap.position().left>=-158)
    {
    wrap.css("left", -(parseInt(wrap.outerWidth()/2)));
    }
    else
    {
    wrap.animate({"left":wrap.position().left+158},300);
    }
    });
    }


    box2.html(box1.html());
    var marquee=null;
    switch (drt){
    case "right":
    case "left":
    marquee=function()
    {
    box1.width(box1.find("li").outerWidth(true)*box1.find("li").length);
    box2.width(box1.width());
    wrap.width(box1.width()*2);
    switch (drt)
    {
    case "right":
    if(wrap.position().left>=0)
    {
    wrap.css("left", -wrap.outerWidth()/2);
    }
    else
    {
    wrap.css("left",parseInt(wrap.position().left+=1));
    }
    break;
    case "left":
    if(wrap.position().left<=-parseInt(wrap.width()/2))
    {
    wrap.css("left","0");
    }
    else
    {
    wrap.css("left",wrap.position().left-=1);
    }
    break;
    }


    };
    break;
    case "top":
    case "bottom":
    marquee=function()
    {
    switch (drt) {
    case "top":
    if (wrap.position().top <= parseInt(-wrap.height() / 2)) {
    wrap.css("top", "0");
    }
    else {
    wrap.css("top", wrap.position().top -= 1);
    }
    break;
    case "bottom":
    if (wrap.position().top > 0) {
    wrap.css("top", parseInt(-wrap.height() / 2));
    }
    else {
    wrap.css("top", wrap.position().top += 1);
    }
    break;
    }
    };
    }
    _this.timer=setInterval(marquee,30);
    _this.mouseover(function(){clearInterval(_this.timer)});
    _this.mouseout(function(){_this.timer=setInterval(marquee,30);})
    }
    });

    觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

    脚本宝典总结

    以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery.slide1.3x全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery.slide1.3x所遇到的问题。

    如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

    本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
    如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。