jQuery插件开发之boxScroll与marquee
BoxScroll
常见图片轮播效果的简单实现。可以数字列表控制或者左右按键控制。逻辑很简单，下面的Marquee形成环，这个到了尽头得往回跑，看看注释就知道了。
图片轮播GitHub:https://github.com/codetker/myBoxScroll。具体演示:http://www.梦萦无双.xyz/myBoxScroll/demo/Default.html。
插件效果：
实现常见的盒子图片滚动效果（或称图片轮播）
可修改后附加缓动函数，实现多种效果，详情见缓动函数表 http://easings.net/zh-cn#easeInOutQuad
Github https://github.com/codetker/TokenFamily
注：使用scroll-left或scroll-top的时候值只能是正数，内层必须宽度或者高度大于外层以实现scroll效果。使用margin时直接移动ul窗口来实现里面li的显示，可以在两端添加特殊效果(margin允许负值)。
html 结构(ZenCoding形式)
-div.divClass
-div.toLeft
-div.toRight
-ul.ulClass
-li.liClass*n
-ul.controlUl
-li*n
其中div.toLeft，div.toRight,ul.controlUl可选
调用方法(详情见demo)(按需设置参数)
A.divClass调用时style为1，采用scroll-left
$(".divClass").boxScroll({
'liHover': 'liSelected', //设置控制滚动的类名
'child': 'li', //实际移动元素,默认为li元素
'style': 1, //默认为0,为margin-left，1则为scroll-left
'stepTime': 1, //每次运动经历的时间，单位s,默认为1s
'direction': 'right', //运动的方向，默认为right
'toLeft': '.arrowLeft', //向左运动按钮，默认为null
'toRight': '.arrowRight', //向右运动按钮，默认为null
'ControlUl': '.picControl ul', //控制运动按钮，默认为null
'circle': true, //是否自动滚动，默认true
'circleTime': 5 //自动滚动时间间隔，默认5s
});
B.ulClass调用时style为0，采用margin-left
$(".ulClass").boxScroll({
'liHover': 'liSelected', //设置控制滚动的类名
'child': 'li', //实际移动元素,默认为li元素
'style': 0, //默认为0,为margin-left
'stepTime': 1, //每次运动经历的时间，单位s,默认为1s
'direction': 'right', //运动的方向，默认为right
'toLeft': '.arrowLeft', //向左运动按钮，默认为null
'toRight': '.arrowRight', //向右运动按钮，默认为null
'ControlUl': '.picControl ul', //控制运动按钮，默认为null
'circle': true, //是否自动滚动，默认true
'circleTime': 5 //自动滚动时间间隔，默认5s
});
C.div.Class or Ul.Class调用时style为1，采用fadeIn and FadeOut
$(".picInnerBox").boxScroll({
'liHover': 'liSelected', //设置控制滚动的类名
'child': 'li', //实际变化元素,默认为li元素
'style': 2, //2为fadeIn and fadeOut
'direction': 'right', //滚动方向
'toLeft': '.arrowLeft', //向左运动按钮，默认为null,为了避免快速多次点击，设置点击间隔时间至少0.8s
'toRight': '.arrowRight', //向右运动按钮，默认为null,为了避免快速多次点击，设置点击间隔时间至少0.8s
'ControlUl': '.picControl ul', //控制运动按钮，默认为null
'circle': true, //是否自动变化，默认true
'circleTime': 5, //自动变化时间间隔，默认5s
'fadeInTime': 300, //fadeIn时间设置
'fadeOutTime': 400 //fadeOut时间设置
});
运行demo
最简单的方法为改Default.html中jquery对应script元素的src为本地的jquery(离线)或CDN中的jquery(在线),然后双击Default.html即可
或者配置myBoxScroll.jquery.json or package.json
PS:
为了使插件总大小较小、代码复用，将A,B,C三种情况集中在一起，封装为一个原型上的方法，内部依据style控制选择。
也可以改为多个方法在绑定到jquery原型上时用style判断对应执行，以减少多余变量和不必要的判断。
Demo代码如下:
HTML
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="" name="keywords" />
<meta content="" name="description" />
<meta name="author" content="codetker" />
<head>
<title>简易图片轮播插件</title>
<link href="style/reset.css" rel="stylesheet" type="text/css">
<link href="style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../src/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../src/jquery.codetker.boxScroll.js"></script>
</head> <body>
<div class="wrap">
<div class="scrollBox">
<div class="picOuterBox boxStyle">
<div class="arrow arrowLeft">ToLeft</div>
<div class="arrow arrowRight">ToRight</div>
<ul class="picInnerBox boxStyle">
<li>
<a href="" title="">
<img src="data:images/test.jpg" alt="">
</a>
</li>
<li>
<a href="" title="">
<img src="data:images/test.jpg" alt="">
</a>
</li>
<li>
<a href="" title="">
<img src="data:images/test.jpg" alt="">
</a>
</li>
<li>
<a href="" title="">
<img src="data:images/test.jpg" alt="">
</a>
</li>
<li>
<a href="" title="">
<img src="data:images/test.jpg" alt="">
</a>
</li>
</ul>
</div>
<div class="picControl">
<ul>
<li class="liSelected">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
/*$(".picOuterBox").boxScroll({
'liHover':'liSelected',
'child': 'li',
'style': 1,
'stepTime': 1,
'direction': 'right',
'toLeft': '.arrowLeft',
'toRight': '.arrowRight',
'ControlUl': '.picControl ul',
'cicle': true,
'circleTime': 5
});*/
$(".picInnerBox").boxScroll({
'liHover': 'liSelected',
'child': 'li',
'style': 0,
'stepTime': 1,
'direction': 'right',
'toLeft': '.arrowLeft',
'toRight': '.arrowRight',
'ControlUl': '.picControl ul',
'circle': true,
'circleTime': 5
});
/*$(".picInnerBox").boxScroll({
'liHover': 'liSelected',
'child': 'li',
'style': 2,
'direction': 'right',
'toLeft': '.arrowLeft',
'toRight': '.arrowRight',
'ControlUl': '.picControl ul',
'circle': true,
'circleTime': 5,
'fadeInTime': 300,
'fadeOutTime': 400
});*/
});
</script>
</body>
</html>
HTML
CSS
@charset "utf-8";
/* CSS Document */
/* to make it better to see */
/* as whole */
body{
margin : 0 0;
padding: 0 0;
height : 100%;
width : 100%;
}
.wrap{
font-family: "微软雅黑","宋体", Times, "Times New Roman", serif;
font-size : 14px;
margin : 0 0;
padding : 0 0;
height : 100%;
width : 100%;
overflow : hidden;
}
/* as whole end */ /* innerBox */
.boxStyle{
width : 500px;
height: 256px;
}
.scrollBox{
position: relative;
width : 500px;
margin : 0 auto;
}
.picInnerBox{
width : 10000px;
overflow: hidden;
}
.picInnerBox li{
cursor: pointer;
float : left;
}
.picOuterBox{
overflow: hidden; }
/* innerBox end */ /* arrow */
.arrow{
position: absolute;
top : 45%;
height : 40px;
cursor : pointer;
z-index :;
}
.arrow:hover{
color : #fff;
}
.arrowLeft{
float : left;
left : 5%;
}
.arrowRight{
float: right;
right: 5%;
}
/* arrow end */ /* controlUl */
.picControl{
overflow: auto;
width : 156px;
margin : 10px auto 0 auto;
}
.picControl ul li{
cursor : pointer;
float : left;
margin-left: 10px;
width : 20px;
height : 20px;
text-align : center;
-webkit-border-radius: 50%;
-moz-border-radius : 50%;
-ms-border-radius : 50%;
-o-border-radius : 50%;
border-radius : 50%;
/* if <IE7,use PIE.htc or IE-css3.htc here */
}
.picControl ul li:not(.liSelected){
background-color: #ccc;
}
.picControl ul li:hover{
background-color: #888;
}
.liSelected{
background-color: #888;
}
/* controlUl end */
CSS
JavaScript
/*
* boxScroll 0.1
* 兼容FF,Chrome等常见浏览器
*/
;(function($, window, document, undefined) {
//定义构造函数
var BoxObj = function(ele, opt) {
this.$element = ele;
this.defaults = {
'child': 'li',
'style': 0,
'stepTime': 1,
'direction': 'right',
'toLeft': null,
'toRight': null,
'ControlUl': null,
'circle': true,
'circleTime': 5,
'fadeInTime': 300,
'fadeOutTime': 400,
'liHover': null
}; this.options = $.extend({}, this.defaults, opt);
}; //在原型上添加方法
BoxObj.prototype = { boxScroll: function() { var boxWindow = this.$element,
child = $(boxWindow).find(this.options.child),
style = this.options.style,
circle = this.options.circle,
circleTime = this.options.circleTime,
direction = (this.options.direction == 'right') ? 1 : -1,
toLeft = this.options.toLeft,
toRight = this.options.toRight,
Control = this.options.ControlUl,
liHover = this.options.liHover,
lists = $(Control).children('li'),
boxWidth = $(child).width(),
imgIndexMax = $(child).length,
imgIndex,
timer, //margin and scroll stepTime
stepTime = this.options.stepTime, //fadeIn and Out control time
fadeInTime = this.options.fadeInTime,
fadeOutTime = this.options.fadeOutTime,
startTime,
endTime; //判断当前图片的位置
function getImgIndex() { switch (style) {
case 0: //margin
imgIndex = Math.round(parseInt($(boxWindow).css('margin-left')) * (-1) / boxWidth);
break; case 1: //scroll
imgIndex = Math.round($(boxWindow).scrollLeft() / boxWidth);
break; case 2: //fade
imgIndex = getIndexShow();
break; default:
}
} //fade 中判断图片index
function getIndexShow() {
var temp;
$(lists).each(function() {
if ($(this).hasClass(liHover)) {
temp = $(this).index();
}
});
return temp;
} //设置循环
function set() {
if (circle) {
timer = setInterval(function() {
boxScroll(imgIndex, direction);
}, 1000 * circleTime);
}
} //取消循环
function rest() {
clearInterval(timer);
set();
} //初始化
if (style == 2) {
$(child).eq(0).click();
}
set();
startTime = Date.parse(new Date());
endTime = Date.parse(new Date()); //绑定点击按钮
$(Control).delegate('li', 'click', function() {
boxScroll($(this).index(), 0);
rest();
}); //绑定左右按钮
$(toLeft).click(function() {
//主要用于防止show and hide 左右点击过快
startTime = Date.parse(new Date());
if ((startTime - endTime) > 800) {
boxScroll(0, -1);
rest();
endTime = Date.parse(new Date());
}
});
$(toRight).click(function() {
startTime = Date.parse(new Date());
if ((startTime - endTime) > 800) {
boxScroll(0, 1);
rest();
endTime = Date.parse(new Date());
}
}); function boxScroll(index, dir) {
if (!$(boxWindow).is(':animated')) {
//响应ul li control操作
if (!dir) {
imgIndex = index; //响应toLeft和toRight
} else {
if (dir == 1) { //向右
getImgIndex();
if (imgIndex === (imgIndexMax - 1)) {
imgIndex = 0;
} else {
imgIndex += 1;
}
} else { //向左
getImgIndex();
if (imgIndex === 0) {
imgIndex = (imgIndexMax - 1);
} else {
imgIndex -= 1;
}
}
} lists.eq(imgIndex).addClass(liHover);
lists.eq(imgIndex).siblings().removeClass(liHover); //具体执行
switch (style) {
case 0:
$(boxWindow).animate({
'margin-left': imgIndex * boxWidth * (-1) + 'px'
}, 1000 * stepTime);
break; case 1:
$(boxWindow).animate({
'scrollLeft': imgIndex * boxWidth + 'px'
}, 1000 * stepTime);
break; case 2:
$(child).fadeOut(fadeOutTime);
$(child).eq(imgIndex).fadeIn(fadeInTime);
break; default:
} }
}
}
}; //将方法添加到jquery对象的原型上
$.fn.boxScroll = function(options) {
//创建实例
var boxObj = new BoxObj(this, options);
return boxObj.boxScroll();
};
})(jQuery, window, document);
JS
BoxScroll1.0版本终于面世咯，希望大家尝试使用，多提issues，谢谢!
Marquee
模仿IE下面的marquee效果，鼠标移上去暂停。形成环的主要原理在于每张图片一旦判断出了外面的显示窗口就添加到尾部，用append和prepend模拟数组的push()和shift()。
代码如下:
HTML
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="" name="keywords" />
<meta content="" name="description" />
<meta name="author" content="codetker" />
<head>
<title>模拟marquee标签效果的简单实现</title>
<link href="style/reset.css" rel="stylesheet" type="text/css">
<link href="style/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.codetker.marquee.js"></script>
</head> <body>
<div class="wrap">
<div class="marquee">
<ul>
<li>
<a href="" title="">1
<img src="data:images/test.jpg" alt="">
</a>
</li>
<li>
<a href="" title="">2
<img src="data:images/test.jpg" alt="">
</a>
</li>
<li>
<a href="" title="">3
<img src="data:images/test.jpg" alt="">
</a>
</li>
<li>
<a href="" title="">4
<img src="data:images/test.jpg" alt="">
</a>
</li>
<li>
<a href="" title="">5
<img src="data:images/test.jpg" alt="">
</a>
</li>
<li>
<a href="" title="">6
<img src="data:images/test.jpg" alt="">
</a>
</li>
<li>
<a href="" title="">7
<img src="data:images/test.jpg" alt="">
</a>
</li>
<li>
<a href="" title="">8
<img src="data:images/test.jpg" alt="">
</a>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".marquee").marquee();
});
</script>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
body{
margin:0 0;
padding:0 0;
height:100%;
width:100%;
}
.wrap{
font-family:"微软雅黑","宋体", Times, "Times New Roman", serif;
font-size:14px;
margin:0 0;
padding:0 0;
height:100%;
width:100%;
overflow:hidden;
}
.marquee{
margin: 0 auto;
width: 960px;
height: 300px;
overflow: hidden;
}
.marquee ul{
width: 10000px;
}
.marquee ul li{
float: left;
width: 500px;
text-align: center;
}
.marquee ul li a{ }
.marquee ul li a:hover{
color: red;
}
JavaScript
/*
* boxScroll 0.1
* 兼容IE8,FF,Chrome等常见浏览器
*/
;(function($,window,document,undefined){
//定义构造函数
var BoxObj=function(ele,opt){
this.$element=ele; //最外层对象
this.defaults={
'style': 0 ,//滚动样式选择,默认为普通效果
'speed': 1 ,//默认为1s
'direction': 'left'//默认为向左边滚动
}, this.options=$.extend({},this.defaults,opt );
//这里可以添加一些通用方法
} //给构造函数添加方法
BoxObj.prototype={ commonScroll:function(){
//接收对象属性
var obj=this.$element;
var boxWindow=$(this.$element).children('ul');
var speed=this.defaults.speed;
var style=this.defaults.style;
var direction=(this.defaults.direction=='left')? 1 : -1;
var lists=$(boxWindow).children('li');
var len=$(lists).length;
var boxWidth=$(lists[0]).width();
var timer;
var step=(this.defaults.direction=='left')? 0 : boxWidth; function move(style,speed,direction){
if (style==0) {
if (direction==1) {
step+=1;
if(step>boxWidth){
step-=boxWidth;
$(boxWindow).append($(boxWindow).children().eq(0));//将第一项放在最后，相当于push(0),shift()
}else{
$(obj).scrollLeft(step);
}
}else if (direction== -1) {
step-=1;
if(step<0){
step+=boxWidth;
$(boxWindow).prepend($(boxWindow).children().eq(len-1));//将最后一项放在最前，相当于pop(last),unshift()
}else{
$(obj).scrollLeft(step);
}
}else{//不执行之外的数值 }
}else{//留待扩展,多了改switch }
} timer=setInterval(function(){
move(style,speed,direction);
},10*speed); //由于时间取得小，肉眼就看不出来 $(lists).each(function() {//鼠标移上暂停
$(this).hover(function() {
clearInterval(timer);
}, function() {
clearInterval(timer);
timer=setInterval(function(){
move(style,speed,direction);
},10*speed);
});
});
} } $.fn.marquee=function(options){
//创建实体
var boxObj=new BoxObj(this,options);
//用尾调的形式调用对象方法
return boxObj.commonScroll();
}
})(jQuery,window,document);
详细下载见https://github.com/codetker/myMarquee
jQuery插件开发之boxScroll与marquee的更多相关文章
- jQuery插件开发之windowScroll
回首望,曾经洋洋得意的代码现在不忍直视.曾经看起来碉堡的效果现在也能稍微弄点出来.社会在往前发展,人也得向前迈进. 参考于搜狗浏览器4.2版本首页的上下滚动效果.主要实现整个窗口的上下和左右滚动逻辑, ...
- jQuery插件开发之datalist
HTML5中定义了一种input框很好看的下拉列表--datalist,然而目前它的支持性并不好(万恶的IE,好在你要渐渐退役了...).于是最近更据需求写了一个小型datalist插件,兼容到IE8 ...
- 插件开发之360 DroidPlugin源码分析（五）Service预注册占坑
请尊重分享成果,转载请注明出处: http://blog.csdn.net/hejjunlin/article/details/52264977 在了解系统的activity,service,broa ...
- 插件开发之360 DroidPlugin源码分析（四）Activity预注册占坑
请尊重分享成果,转载请注明出处: http://blog.csdn.net/hejjunlin/article/details/52258434 在了解系统的activity,service,broa ...
- Chrome插件开发之manifest.json
广而告之: Chrome插件之一键保存网页为PDF1.1发布 http://www.cnblogs.com/bdstjk/p/3179543.html 最近做“一键保存网页为PDF”过程中,对Chro ...
- Qgis插件开发之Qgis源码学习
Qgis源码中的拖拽.zoomin/out等各个基础功能插件的实现位于qgis_app工程中. 具体头文件为: \QGIS\src\app\qgisapp.h 根据此类可以逐个找到Qgis的基础插件的 ...
- 插件开发之360 DroidPlugin源码分析（二）Hook机制
转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52124397 前言:新插件的开发,可以说是为插件开发者带来了福音,虽然还很多坑要填补, ...
- 插件开发之360 DroidPlugin源码分析（一）初识
转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52123450 DroidPlugin的是什么? 一种新的插件机制,一种免安装的运行机制 ...
- 新人大餐：2018最新Office插件开发之ExcelDNA开发XLL插件免费教学视频，五分钟包教包会
原始链接:https://www.cnblogs.com/Charltsing/p/ExcelDnaVideoCourse.html QQ: 564955427 先解释一下,为什么要做这个视频: 我在 ...
随机推荐
- Java定时任务的实现
本例依据Java自身提供的接口实现,通过监听器(Listener)和定时器(Timer)定时执行某个任务(Task).专业的开源工具可参考Quartz:http://www.opensymphony. ...
- PipelineDB On Kafka
PipelineDB 安装yum install https://s3-us-west-2.amazonaws.com/download.pipelinedb.com/pipelinedb-0.9.8 ...
- 【转】Android EventBus初探
出处:http://blog.csdn.net/lmj623565791/article/details/40794879 1.概述 最近大家面试说经常被问到EventBus,github上果断dow ...
- Jenkins 集成 git .net 和nuget
1. 源码配置 在 Credentials中配置 git 账号密码(如果是Gitee 可以使用 Jenkins Gitee Plugin) 2. 构建编译版本 2.1 批处理的目的 还原Nuget包 ...
- 转载:爬虫技术浅析(Python)
http://drops.wooyun.org/tips/3915 0x00 前言 网络爬虫(Web crawler),是一种“自动化浏览网络”的程序,或者说是一种网络机器人.它们被广泛用于互联网搜索 ...
- C# winform无边框窗体移动
public partial class MessageHints : Form { //窗体移动API [DllImport("user32.dll")] public stat ...
- （zxing.net）一维码UPC E的简介、实现与解码
UPC(Universal Product Code)码是最早大规模应用的条码,其特性是一种长度固定.连续性的条 码,目前主要在美国和加拿大使用,由于其应用范围广泛,故又被称万用条码. UPC码仅可 ...
- Windows服务器管理与优化
一.服务器自动重启windows服务器运行时间长了,内存会爆满,比如数据库会缓存大量的数量,IIS进程也会缓存数据而没有及时释放.这样需要定时重启服务器来释放内存. 创建任务计划,如在 每周一/周三/ ...
- 如何让你的项目同时支持go vendor和go module
目录 如何让你的项目同时支持go vendor和go module 1. go module简介 2. 使用go mod命令管理项目 2.1 初始化环境 2.2 构建 3. 保持兼容性 4. 使用go ...
- Android : 按 Back 按钮不返回处于后台的 Activity
在一个项目中,我有一种情况下启动一个新 Activity 后,按 Back 按钮时不想返回到后台的 Activity. 具体方法是, 在启动新的 Activity 的时候: Intent intent ...