javascript 仿QQ滑动菜单效果代码


【程序源码】

复制代码 代码如下:

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



相关阅读:
在ASP.NET2.0中通过Gmail发送邮件的代码
基于mysql的论坛(3)
利用jQuery实现页面渐显效果
通过JS获取用户本地图片路径并显示的代码
感应鼠标的图片遮罩动画效果
dedecms pagelist标签修改方法分享
linux系统下cron运行php程序
基于jquery实现的可以编辑选择的下拉框的代码
jquery trim() 功能源代码
ASP.NET中高质量缩略图的生成代码
在 Windows 系统下管理 Oracle 9i 服务
nfs 配置的简单例子
jQuery中将函数赋值给变量的调用方法
Oracle需要的是Zend而不是Red Hat
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 小学生重阳节:思念在重阳 懂你,想你,却不能拥有你...... 2013年圣诞贺卡英文 学生军训心得体会800字 我心中的上虞水作文1200字 勇展翅膀,飞向成功 春花颂作文700字 读西游记有感100字 市人事局2016年党风廉政建设工作总结 飞舞的泡泡,纯真的心作文700字 幼儿园中班说课稿:好听的电话铃声 干渴的高原 大人不应该对小孩子做的事作文200字 我心目中的欧老师作文500字 2016年度公司个人工作总结 《蚁和蜂》 *厂2005年度倡议书 吹泡泡糖比赛作文 一片瓦寺游记 你能证明它们吗? —— 初中数学第五册教案 很多时候,不是男人在欺骗我们,是我们自己在骗自己 四大功能笔作文500字 散了的人,埋下的风景,从此,不言悲喜。 读《爱迪生传》有感 优秀临床护士先进事迹材料 青秀山-----醉人的美 《骆驼祥子》阅读心得作文600字 追寻(朋友) 小学五年级作文450字:栀子 法院优秀党员总结表彰大会领导讲话 5.人生注定不是一凡风顺 突然很想对自己说声对不起 物业部副经理述职报告 打屁股的教训作文1600字 语文教科研工作总结-教学工作总结_教学工作总结 狗狗咬一咬 沉醉是梦想流逝的风景线 青灰的雨 情感压抑的伤感句子 心在微笑,便是春天 初三写祖国的作文范文 妈妈,我要跟老师学写作文900字 18丑小鸭(转载) 九个笑话,九个人生哲理 夜下忆往事 留下这个冬天的思念... 看花灯的作文600字 从残缺中寻找价值 感恩·简单作文1400字 梦里·樱花逝

Copyright © 2016 phpStudy |