JQuery温习--- 一个简单的滑动插件
屌丝的周末，屌没事儿 干。
写了个JQuery滑动插件， 实现了简单的滑动控制， 也算是对JQuery的一个温习吧
Test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑动测试</title>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="YSlider.js"></script>
<style>
.jscroll-li{
width:150px; height: 40px; float: left; border: 1px solid black; margin: 5px; -display:inline;
}
</style>
</head>
<body>
<div class="jscroll" style="overflow: hidden; width: 500px; border:1px solid blue;" id="l1">
<div style="width: 5000px; height: 100px;">
<div class="jscroll-demo" style="height: 60px; float: left; padding: 0px;">
<div class="jscroll-li" > 1 </div>
<div class="jscroll-li" > 2 </div>
<div class="jscroll-li" > 3 </div>
<div class="jscroll-li" > 4 </div>
<div class="jscroll-li" > 5 </div>
</div>
</div>
</div>
<br/><br/>
<div class="jscroll" style="overflow: hidden; width: 500px; border:1px solid blue;" id="l2">
<div style="width: 5000px; height: 100px;" >
<div class="jscroll-demo" style="height: 60px; float: left; padding: 0px;">
<div class="jscroll-li" > 1 </div>
<div class="jscroll-li" > 2 </div>
<div class="jscroll-li" > 3 </div>
<div class="jscroll-li" > 4 </div>
<div class="jscroll-li" > 5 </div>
</div>
</div>
</div>
<input type="button" value="<<" id="goleft" />
<input type="button" value=">>" id="goright" />
<br/><br/>
<div class="jscroll" style="overflow: hidden; width: 500px; border:1px solid blue;" id="l3">
<div style="width: 5000px; height: 100px;" >
<div class="jscroll-demo" style="height: 60px; float: left;">
<div class="jscroll-li" > 1 </div>
<div class="jscroll-li" > 2 </div>
<div class="jscroll-li" > 3 </div>
<div class="jscroll-li" > 4 </div>
<div class="jscroll-li" > 5 </div>
</div>
</div>
</div>
<br/><br/>
<div class="jscroll" style="overflow: hidden; width: 500px; border:1px solid blue;" id="l4">
<div style="width: 500px; height: 50px; overflow: hidden;" >
<div class="jscroll-demo" style="height: 50px;">
<div class="jscroll-li" > 1 </div>
<div class="jscroll-li" > 2 </div>
<div class="jscroll-li" > 3 </div>
</div>
</div>
</div>
<br/><br/>
<div class="jscroll" style="overflow: hidden; width: 500px; height: 50px; border:1px solid blue;" id="l4">
<div class="jscroll-demo" style=" height: 50px; ">
<div class="jscroll-li" > 1 </div>
<div class="jscroll-li" > 2 </div>
<div class="jscroll-li" > 3 </div>
</div>
</div>
<br/><br/>
<div class="jscroll" style="overflow: hidden; width: 500px; height: 50px; border:1px solid blue;" id="l4">
<div class="jscroll-demo" style=" height: 50px; ">
<div class="jscroll-li" > 1 </div>
<div class="jscroll-li" > 2 </div>
<div class="jscroll-li" > 3 </div>
</div>
</div>
<input type="button" value="<<" id="gotop" />
<input type="button" value=">>" id="gobottom" />
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<script language="javascript" type="text/javascript">
$(function(){
$("div.jscroll:eq(0)").YSlider({
direction: 'right',
sleep : 500,
autoMove : true
});
$("div.jscroll:eq(1)").YSlider({
direction: 'left-right',
prevBtn : '#goleft',
nextBtn : '#goright',
autoMove : true
});
$("div.jscroll:eq(2)").YSlider({
direction: 'left',
step : 324,
sleep : 2000,
autoMove : true
});
$("div.jscroll:eq(3)").YSlider({
direction: 'top',
autoMove : true
});
$("div.jscroll:eq(4)").YSlider({
direction: 'bottom',
autoMove : true
});
$("div.jscroll:eq(5)").YSlider({
direction: 'top-bottom',
sleep : 500,
prevBtn : '#gotop',
nextBtn : '#gobottom',
autoMove : true
});
});
</script>
</body>
</html>
YSlider.js
/** * 一个JQuery滑动插件： 屌丝的周末； * [email protected] * 2012-8-27 23:00:00 **/ (function($) { $.fn.YSlider = function(options) { var o = $.extend({}, $.fn.YSlider.defaults, options); return this.each(function(i) { var ths = $(this); demo = ths.find(".jscroll-demo:first"); demo.clone().insertAfter(demo); ths.data("demo", demo); ths.data("moveStep", o.step > 0 ? o.step : demo.children(":first").outerWidth(true)); if(o.prevBtn.length > 0){ var pbtn = $("" + o.prevBtn); if(pbtn.length > 0){ pbtn.click(function(){ $.fn.YSlider.methods.clickPrev(ths); }); } } if(o.nextBtn.length > 0){ var nbtn = $(o.nextBtn); if(nbtn.length > 0){ nbtn.click(function(){ $.fn.YSlider.methods.clickNext(ths); }); } } switch(o.direction){ case 'left': $.fn.YSlider.methods.moveLeft(ths, o).trigger("leftScroll"); break; case 'right': $.fn.YSlider.methods.moveRight(ths, o).trigger("rightScroll"); break; case 'left-right': $.fn.YSlider.methods.moveRight(ths, o); $.fn.YSlider.methods.moveLeft(ths, o); ths.data("direction", 'left'); break; case 'top': ths.data("moveStep", demo.outerHeight(true)); $.fn.YSlider.methods.moveTop(ths, o).trigger("topScroll"); break; case 'bottom': ths.data("moveStep", demo.outerHeight(true)); $.fn.YSlider.methods.moveBottom(ths, o).trigger("bottomScroll"); break; case 'top-bottom': ths.data("moveStep", demo.outerHeight(true)); $.fn.YSlider.methods.moveTop(ths, o); $.fn.YSlider.methods.moveBottom(ths, o); ths.data("direction", 'bottom'); break; } ths.hover( function(){ $.fn.YSlider.methods.mouseOver(ths,o); } , function(){ $.fn.YSlider.methods.mouseOut(ths,o); } ).data("run", 1); if(o.autoMove){ $.fn.YSlider.methods.autoMove(ths, o); } }); }; // direction : 滚动方向： “left”“right”"left-rigth""top""bottom""top-bottom" // speed: 每帧运行时间 // sleep: 帧间停顿时间 // step: 每帧步长 // prevBtn: 反向selector // nextBtn: 正向selector // atuoMove: 是否自动运行 $.fn.YSlider.defaults = { direction: 'left', speed: 1000, sleep: 200, step: 0, prevBtn: '', nextBtn: '', atuoMove: false }; $.fn.YSlider.methods = { moveLeft : function(ths, o){ return ths.bind("leftScroll", function(){ var _this = $(this); var demo = _this.data("demo"); _this.data("direction", "left"); if(!demo.is(":animated")){ if(demo.width() + parseInt(demo.css("margin-left").replace("px","")) <= 0) demo.css("margin-left", '0'); demo.animate({ marginLeft: '-=' +_this.data("moveStep") } , o.speed, function(){ if(_this.data("run") == 1) { _this.trigger(_this.data("direction") + "Scroll") } }); } }); } , moveRight : function(ths, o){ var demo = ths.find(".jscroll-demo:first"); demo.css("margin-left", -demo.width()); return ths.bind("rightScroll", function(){ var _this = $(this); _this.data("direction", "right"); var demo = _this.data("demo"); if(!demo.is(":animated")){ if(parseInt(demo.css("margin-left").replace("px","")) >= 0) demo.css("margin-left", -demo.width()) demo.animate({ marginLeft: '+=' +_this.data("moveStep") } ,o.speed, function(){ if(_this.data("run") == 1) { _this.trigger(_this.data("direction") + "Scroll"); } }); } }); } , moveTop : function(ths, o){ var demo = ths.find(".jscroll-demo:first"); return ths.bind("topScroll", function(){ var _this = $(this); _this.data("direction", "top"); var demo = _this.data("demo"); if(!demo.is(":animated")){ if(demo.outerHeight(true) + parseInt(demo.css("margin-top").replace("px","")) <= 0) demo.css("margin-top", 0); demo.animate({ marginTop: '-=' +_this.data("moveStep") } ,o.speed, function(){ if(_this.data("run") == 1) { _this.trigger(_this.data("direction") + "Scroll"); } }); } }); } , moveBottom : function(ths, o){ var demo = ths.find(".jscroll-demo:first"); return ths.bind("bottomScroll", function(){ var _this = $(this); _this.data("direction", "bottom"); var demo = _this.data("demo"); if(!demo.is(":animated")){ if(parseInt(demo.css("margin-top").replace("px","")) >= 0) demo.css("margin-top", -demo.outerHeight(true)); demo.animate({ marginTop: '+=' +_this.data("moveStep") } ,o.speed, function(){ if(_this.data("run") == 1) { _this.trigger(_this.data("direction") + "Scroll"); } }); } }); } , mouseOver : function(divScroll){ divScroll.data("demo"); divScroll.data("run", 0); } , mouseOut : function(divScroll, o){ divScroll.data("demo"); divScroll.data("run", 1); if(o.autoMove) $.fn.YSlider.methods.autoMove(divScroll, o); else divScroll.trigger(divScroll.data("direction") + "Scroll"); } , autoMove : function(divScroll, o){ if(divScroll.data("run") == 1) { divScroll.trigger(divScroll.data("direction") + "Scroll"); var timeout = divScroll.data("sleepTimeout"); if(!timeout) clearTimeout(timeout); divScroll.data("sleepTimeout", setTimeout(function(){ $.fn.YSlider.methods.autoMove(divScroll, o); } , o.sleep)); } } , clickPrev : function(divScroll){ var timeout = divScroll.data("sleepTimeout"); if(!timeout) clearTimeout(timeout) divScroll.trigger((divScroll.data("direction") == 'left' || divScroll.data("direction") == 'right' ? 'left' : 'top') + "Scroll"); } , clickNext : function(divScroll){ var timeout = divScroll.data("sleepTimeout"); if(!timeout) clearTimeout(timeout); divScroll.trigger((divScroll.data("direction") == 'left' || divScroll.data("direction") == 'right' ? 'right' : 'bottom') + "Scroll"); } } // 闭包结束 })(jQuery);