JQuery插件之jQuery-easing的简单使用

来源：互联网发布：仿猪八戒源码编辑：程序博客网时间：2024/05/29 18:56

图片及文字滚动特效，目前在微信墙中使用：

首先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);}});

0 0