作家
登录

javascript 仿QQ滑动菜单效果代码

作者: 来源:www.28hudong.com 2013-03-30 01:19:54 阅读 我要评论

【程序源码】 复制代码 代码如下: 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中使用css需要注意的地方小结

1.在改变单个元素样式时,注意style对象的语法和css中使用的语法几乎是一一对应的。不过包含连字符的属性则被替换为一种“camel castring”的形式,例如:font-size现在成了fontSize,而margin-top变成了marginTop>>>详细阅读


本文标题:javascript 仿QQ滑动菜单效果代码

地址:http://www.17bianji.com/kaifa2/JS/25766.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)