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 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
js实现特别简单的钟表效果
Sep 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脚本的10个技巧(4)
2006/10/09 PHP
php生成mysql的数据字典
2016/07/07 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
深入理解python中的闭包和装饰器
2016/06/12 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
Python实现读取json文件到excel表
2017/11/18 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
Python在线和离线安装第三方库的方法
2020/10/31 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
出生证明公证书
2014/04/09 职场文书
要账委托书范本
2014/09/15 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
具结保证书范本
2015/05/11 职场文书
python脚本框架webpy模板控制结构
2021/11/20 Python
Python中三种花式打印的示例详解
2022/03/19 Python
Python开发五子棋小游戏
2022/04/28 Python