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 相关文章推荐
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
Jquery插件easyUi实现表单验证示例
Dec 15 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
ES5和ES6中类的区别总结
Dec 21 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类
2006/11/25 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
JS实现留言板功能
2017/06/17 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
微信小程序云开发之新手环境配置
2019/05/16 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
Python单例模式实例详解
2017/03/01 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
Python元组知识点总结
2019/02/18 Python
python批量爬取下载抖音视频
2019/06/17 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
会计专业自我鉴定
2014/02/10 职场文书
运动会稿件50字
2014/02/17 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL
MySQL 原理与优化之Update 优化
2022/08/14 MySQL