脚本宝典收集整理的这篇文章主要介绍了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,请注明来意。