javascript 仿QQ滑动菜单效果代码


Posted in Javascript onSeptember 03, 2010

【程序源码】

var QQ = function() { 
// 公用函数 
function T$(id) { return document.getElementById(id); } 
function T$$(root, tag) { return (root || document).getElementsByTagName(tag); } 
function $extend(des, src) { for(var p in src) { des[p] = src[p]; } return des; } 
function $each(arr, callback, thisp) { 
if (arr.forEach) {arr.forEach(callback, thisp);} 
else { for (var i = 0, len = arr.length; i < len; i++) callback.call(thisp, arr[i], i, arr);} 
} 
function currentStyle(elem, style) { 
return elem.currentStyle || document.defaultView.getComputedStyle(elem, null); 
} 
// 缓动类 
var Tween = { 
Quart: { 
easeOut: function(t,b,c,d){ 
return -c * ((t=t/d-1)*t*t*t - 1) + b; 
} 
}, 
Back: { 
easeOut: function(t,b,c,d,s){ 
if (s == undefined) s = 1.70158; 
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; 
} 
}, 
Bounce: { 
easeOut: function(t,b,c,d){ 
if ((t/=d) < (1/2.75)) { 
return c*(7.5625*t*t) + b; 
} else if (t < (2/2.75)) { 
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 
} else if (t < (2.5/2.75)) { 
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 
} else { 
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 
} 
} 
} 
} // 主类构造函数 
var scrollTrans = function(cid, sid, count, config) { 
var self = this; 
if (!(self instanceof scrollTrans)) { 
return new scrollTrans(cid, sid, count, config); 
} 
self.container = T$(cid); 
self.scroller = T$(sid); 
if (!(self.container || self.scroller)) { 
return; 
} 
self.config = $extend(defaultConfig, config || {}); 
self.index = 0; 
self.timer = null; 
self.count = count; 
self.step = self.scroller.offsetWidth / count; 
}; 
// 默认配置 
var defaultConfig = { 
trigger: 1, // 触发方式1:click other: mouseover 
auto: true, // 是否自动切换 
tween: Tween.Quart.easeOut, // 默认缓动类 
Time: 10, // 滑动延时 
duration: 50, // 切换时间 
pause: 3000, // 停顿时间 
start: function() {}, // 切换开始执行函数 
end: function() {} // 切换结束执行函数 
}; 
scrollTrans.prototype = { 
constructor: scrollTrans, 
transform: function(index) { 
var self = this; 
index == undefined && (index = self.index); 
index < 0 && (index = self.count - 1) || index >= self.count && (index = 0); 
self.time = 0; 
self.target = -Math.abs(self.step) * (self.index = index); 
self.begin = parseInt(currentStyle(self.scroller)['left']); 
self.change = self.target - self.begin; 
self.duration = self.config.duration; 
self.start(); 
self.run(); 
}, 
run: function() { 
var self = this; 
clearTimeout(self.timer); 
if (self.change && self.time < self.duration) { 
self.moveTo(Math.round(self.config.tween(self.time++, self.begin, self.change, self.duration))); 
self.timer = setTimeout(function() {self.run()}, self.config.Time); 
} else { 
self.moveTo(self.target); 
self.config.auto && (self.timer = setTimeout(function() {self.next()}, self.config.pause)); 
} 
}, 
moveTo: function(i) { 
this.scroller.style.left = i + 'px'; 
}, 
next: function() { 
this.transform(++this.index); 
} 
}; 
return { 
scroll: function(cid, sid, count, config) { 
window.onload = function() { 
var frag = document.createDocumentFragment(), 
nums = []; 
for (var i = 0; i < count; i++) { 
var li = document.createElement('li'); 
(nums[i] = frag.appendChild(document.createElement('li'))).innerHTML = i + 1; 
} 
T$('page').appendChild(frag); 
// 调用主类 
var st = scrollTrans(cid, sid, count, config); 
$each(nums, function(o, i) { 
o[st.config.trigger == 1 ? 'onclick' : 'onmouseover'] = function() { o.className = 'on'; st.transform(i); } 
o.onmouseout = function() { o.className = ''; st.transform();} 
}); 
st.start = function() { 
$each(nums, function(o, i) { 
o.className = st.index == i ? 'on' : ''; 
}); 
}; 
st.transform(); 
} 
} 
} 
}(); 
QQ.scroll('container', 'scroller', 5, {trigger: 0});

【参数说明】
var defaultConfig = { 
trigger: 1, // 触发方式 1:click 其余: mouseover 
auto: true, // 是否自动切换 
tween: Tween.Quart.easeOut, // 默认缓动类 
Time: 10, // 滑动延时 
duration: 50, // 切换时间 
pause: 3000, // 停顿时间 
start: function() {}, // 切换开始执行函数 
end: function() {} // 切换结束执行函数 
};

【使用方法】
QQ.scroll('container' /*外部容器ID*/, 'scroller'/*滑动容器ID*/, 5/*切换图片数目*/, {trigger: 0} /*默认配置*/);

【源码下载】
slider
Javascript 相关文章推荐
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
javascript获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
编写一个javascript元循环求值器的方法
Apr 14 Javascript
原生javascript实现图片轮播效果代码
Sep 03 #Javascript
IE6不能修改NAME问题的解决方法
Sep 03 #Javascript
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 #Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 #Javascript
Dojo 学习要点
Sep 03 #Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 #Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 #Javascript
You might like
PHP 5.0 Pear安装方法
2006/12/06 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
JavaScript 创建对象
2009/07/17 Javascript
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
python 简单的多线程链接实现代码
2016/08/28 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
创先争优标语
2014/06/27 职场文书
个人股份合作协议书
2014/10/24 职场文书
2014年民警工作总结
2014/11/25 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python