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
Nov 26 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
Feb 22 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
js实现数字从零慢慢增加到指定数字示例
Nov 07 Javascript
JS sort排序详细使用方法示例解析
Sep 27 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/10/09 PHP
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
php at(@)符号的用法简介
2009/07/11 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Windows下安装python2.7及科学计算套装
2015/03/05 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
数据库方面面试题
2012/04/22 面试题
大学军训感言1500字
2014/03/09 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
甜品店创业计划书
2014/08/14 职场文书
组工干部演讲稿
2014/09/02 职场文书
大客户经理岗位职责
2015/04/09 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS