JQuery插件之jQuery-easing的简单使用
2014-07-24 14:53
281 查看
图片及文字滚动特效，目前在微信墙中使用：
首先html：
manhua_ImageScroll.js
需要引入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:left
scrollWH = $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);
}
});
首先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:left
scrollWH = $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:left
scrollWH = $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文字高亮插件，使用简单，功能强大，支持FF/IE等主流浏览器
- jquery插件之easing使用
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
- 分享10个使用简单的jQuery的拖放插件（drag and drop plugin)
- php中jQuery插件autocomplate的简单使用笔记
- jQuery文字高亮插件，使用简单，功能强大，支持FF/IE等主流浏览器
- ASP.NET jQuery 食谱12 (通过使用jQuery validation插件简单实现用户注册页面验证功能)
- 超级简单：使用JQUERY Tabs插件宿主IFRAMES
- jQuery 兼容ie6的固定定位插件，使用简单
- jquery的Dtree树插件简单使用
- 时时刷新 jQuery Timers插件 提供定时执行的功能，使用非常简单
- 使用jQuery插件实现简单购物
- jQuery 图像裁剪插件Jcrop的简单使用
- jquery 验证插件的简单入门使用
- 基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
- 基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
- 分享10个使用简单的jQuery的拖放插件（drag and drop plugin)
- 分享10个使用简单的jQuery的拖放插件（drag and drop plugin)
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能