本文主要是介绍JQuery插件之jQuery-easing的简单使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
图片及文字滚动特效，目前在微信墙中使用：
首先html：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>图片及文字滚动</title><link rel="stylesheet" href="css/bootstrap.css" /><script type="text/javascript" src="js/jquery-1.11.1.js" ></script><script type="text/javascript" src="js/jQuery-easing.js" ></script><script type="text/javascript" src="js/manhua_ImageScroll.js" ></script><script type="text/javascript" src="js/bootstrap.js" ></script><script type="text/javascript">$(function (){$("#mhscroll").manhua_ImageScroll({up:"news_rolling_up",down:"news_rolling_down"}); });</script><style>*{padding:0; margin:0;}img{border:0;}ul,li{list-style:none;}.scrolling{ overflow:hidden; margin:0 auto;}span{cursor:pointer; background:#009933; color:#fff; font-weight:bold; padding:5px; font-size:13px;}</style></head><body><h1 class="h1">图片及文字滚动</h1><div id="mhscroll" class="scrolling thumbnail"><ul><li>5我是一段文字。。。你呢！</li><li>4我是一段文字。。。你呢！</li><li>3我是一段文字。。。你呢！</li><li>2我是一段文字。。。你呢！</li><li>1我是一段文字。。。你呢！</li></ul></div><div style="margin:10px auto; width:150px;"><span id="news_rolling_up">向上滚动</span> <span id="news_rolling_down">向下滚动</span></div></body>
</html>
manhua_ImageScroll.js
/****图片滚动Jquery插件* version:manhua_ImageScroll.js
***/
$(function() { $.fn.manhua_ImageScroll = function(options) {var defaults = {scrollCount : 1, //图片滚动个数(默认为1个)width : 240, //显示图片的宽度height : 160, //显示图片的高度showCount : 2, //图片显示个数margin : 10, //图片与图片之间的间隔宽度（默认为：10）up : "up", //绑定控制向上滚动的按钮down : "down", //绑定控制向下滚动的按钮speed : 1000, //图片滚动的速度，数值越大，速度越慢（毫秒）time : 3000, //图片滚动的时间间隔（毫秒)state : 1, //图片的滚动状态（0、向上或向左滚动，1、向下或向右滚动）easing : "easeOutElastic" //图片滚动动画类型（配合jQuery-easing.js动画插件里的参数）}; var options = $.extend(defaults,options); var timer;// = $(parseInt(Math.random()*100000));//定时器var ulWH;//ul的高度或宽度var scrollWH;//图片滚动的第一个li的宽度或高度var scrollWidth;//图片滚动的宽度 var $this = $(this);var $ul = $(this).eq(0).find("ul:first");//获取图片滚动容器的UL对象var $li = $ul.find("li");//获取图片滚动容器的UL里面的li对象var $up = $("#"+options.up);//获取控制向上或向左滚动的按钮的对象var $down = $("#"+options.down);//获取控制向下或向右滚动的按钮的对象 //当滚动类型为上下滚动 $li.css({"height":options.height+"px","width":options.width+"px","margin-bottom":options.margin+"px"});//设置li的样式float:leftscrollWH = $ul.find("li:eq(0)").outerHeight(true);//获取滚动的第一个li的高度ulWH = (parseInt(options.margin)+parseInt(options.height))*parseInt(options.showCount)-parseInt(options.margin);$this.css({"height":(ulWH+options.margin)+"px","width":(options.width+options.margin*2)+"px"});$ul.css({"height":ulWH+"px","width":options.width+"px"}); if(options.scrollCount===0){options.scrollCount = 1;//当滚动个数为0的时候，初始化为1}scrollWidth = 0-options.scrollCount*scrollWH;//初始化图片滚动的宽度 //图片向上滚动函数var scrollUp = function(){autoStop();options.state = 0; if(options.type===1){$ul.stop().animate({marginLeft:scrollWidth},options.speed,options.easing,function(){for(i=1;i<=options.scrollCount;i++){$ul.find("li:first").appendTo($ul);}$ul.css({marginLeft:options.margin}); });}else{$ul.stop().animate({marginTop:scrollWidth},options.speed,options.easing,function(){for(i=1;i<=options.scrollCount;i++){$ul.find("li:first").appendTo($ul);}$ul.css({marginTop:options.margin}); });}autoPlay();}//图片向下滚动函数var scrollDown = function(){autoStop();options.state = 1; for(i=1;i<=options.scrollCount;i++){$ul.find("li:last").show().prependTo($ul);}$ul.css({marginTop:scrollWidth});$ul.stop().animate({marginTop:options.margin},options.speed,options.easing);autoPlay();}//图片自动滚动的函数var autoPlay = function(){//初始化定时器 timer = window.setInterval(function(){if (options.state === 0){scrollUp();}else{scrollDown(); } },options.time); }; //图片停止自动滚动的函数var autoStop = function(){//清除定时器window.clearInterval(timer);}; //当鼠标移到图片时的事件绑定$ul.mouseover(autoStop).mouseout(autoPlay);//$up.die().bind("click",scrollUp); //绑定控制向上滚动的按钮的点击事件//$down.die().bind("click",scrollDown);//绑定控制向下滚动的按钮的点击事件 autoPlay();//启动自动滚动 }
});需要引入jQuery-easing.js，jQuery.js
manhua_ImageScroll.js 修改备份：
/****图片滚动Jquery插件* version:manhua_ImageScroll.js
***/
$(function() { $.fn.manhua_ImageScroll = function(options) {var defaults = {scrollCount : 1, //图片滚动个数(默认为1个)//width : 240, //显示图片的宽度height : 200, //显示图片的高度showCount : 2, //图片显示个数margin : 10, //图片与图片之间的间隔宽度（默认为：10）up : "up", //绑定控制向上滚动的按钮down : "down", //绑定控制向下滚动的按钮speed : 1000, //图片滚动的速度，数值越大，速度越慢（毫秒）time : 3000, //图片滚动的时间间隔（毫秒)state : 1, //图片的滚动状态（0、向上或向左滚动，1、向下或向右滚动）easing : "easeOutElastic" //图片滚动动画类型（配合jQuery-easing.js动画插件里的参数）}; var options = $.extend(defaults,options); var timer;// = $(parseInt(Math.random()*100000));//定时器var ulWH;//ul的高度或宽度var scrollWH;//图片滚动的第一个li的宽度或高度var scrollWidth;//图片滚动的宽度 var $this = $(this);var $ul = $(this).eq(0).find("ul:first");//获取图片滚动容器的UL对象var $li = $ul.find("li");//获取图片滚动容器的UL里面的li对象var $up = $("#"+options.up);//获取控制向上或向左滚动的按钮的对象var $down = $("#"+options.down);//获取控制向下或向右滚动的按钮的对象 //当滚动类型为上下滚动 $li.css({"height":options.height+"px","width":options.width+"px","margin-bottom":options.margin+"px"});//设置li的样式float:leftscrollWH = $ul.find("li:eq(0)").outerHeight(true);//获取滚动的第一个li的高度ulWH = (parseInt(options.margin)+parseInt(options.height))*parseInt(options.showCount)-parseInt(options.margin);$this.css({"height":(ulWH+options.margin)+"px","width":(options.width+options.margin*2)+"px"});$ul.css({"height":ulWH+"px","width":options.width+"px"}); if(options.scrollCount===0){options.scrollCount = 1;//当滚动个数为0的时候，初始化为1}scrollWidth = 0-options.scrollCount*scrollWH;//初始化图片滚动的宽度 //图片向上滚动函数var scrollUp = function(){autoStop();options.state = 0; if(options.type===1){$ul.stop().animate({marginLeft:scrollWidth},options.speed,options.easing,function(){for(i=1;i<=options.scrollCount;i++){$ul.find("li:first").appendTo($ul);}$ul.css({marginLeft:options.margin}); });}else{$ul.stop().animate({marginTop:scrollWidth},options.speed,options.easing,function(){for(i=1;i<=options.scrollCount;i++){$ul.find("li:first").appendTo($ul);}$ul.css({marginTop:options.margin}); });}autoPlay();}//图片向下滚动函数var scrollDown = function(){autoStop();options.state = 1; for(i=1;i<=options.scrollCount;i++){$ul.find("li:last").show().prependTo($ul);}$ul.css({marginTop:scrollWidth});$ul.stop().animate({marginTop:options.margin},options.speed,options.easing);autoPlay();}//图片自动滚动的函数var autoPlay = function(){//初始化定时器 timer = window.setInterval(function(){if (options.state === 0){scrollUp();}else{scrollDown(); } },options.time); }; //图片停止自动滚动的函数var autoStop = function(){//清除定时器window.clearInterval(timer);}; //当鼠标移到图片时的事件绑定//$ul.mouseover(autoStop).mouseout(autoPlay);//$up.die().bind("click",scrollUp); //绑定控制向上滚动的按钮的点击事件//$down.die().bind("click",scrollDown);//绑定控制向下滚动的按钮的点击事件 autoPlay();//启动自动滚动var stopAndStart=function(){var btnPauseVal=$(".btnPause").attr("title");if(btnPauseVal=="暂停"){autoStop();$(".btnPause").attr("title","开始");$(".btnPause").addClass("btn-pause");}else{options.state=1;autoPlay();$(".btnPause").attr("title","暂停");$(".btnPause").removeClass("btn-pause").addClass("btn-begin");$ul.find("li").show();}};$(".btnPause").click(stopAndStart);//上一条var scrollPrev = function(){autoStop();options.state = 0; scrollUp();autoStop();$(".btnPause").attr("title","开始");$(".btnPause").addClass("btn-pause");}$(".btnPrev").click(scrollPrev);//下一条var scrollNext = function(){autoStop();options.state = 1; scrollDown();autoStop();$(".btnPause").attr("title","开始");$(".btnPause").addClass("btn-pause");}$(".btnNext").click(scrollNext);//第一条var scrollOldest = function(){autoStop();var oldest=$ul.find("li").last().html();alert(oldest);$ul.find("li").hide(); $ul.find("li:last").show(oldest);$(".btnPause").attr("title","开始");$(".btnPause").addClass("btn-pause");}$(".btnOldest").click(scrollOldest);//最后一条var scrollNewest = function(){autoStop();var newest=$ul.find("li").first().html();alert(newest);$ul.find("li").hide();$ul.find("li:last").show(newest);$(".btnPause").attr("title","开始");$(".btnPause").addClass("btn-pause");}$(".btnNewest").click(scrollNewest);}
});
这篇关于JQuery插件之jQuery-easing的简单使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
