手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript 仿QQ滑动菜单效果代码
javascript 仿QQ滑动菜单效果代码
摘要:【程序源码】复制代码代码如下:varQQ=function(){//公用函数functionT$(id){returndocument.ge...

【程序源码】

复制代码 代码如下:

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 仿QQ滑动菜单效果代码】相关文章:

滚动效果

javascript鼠标滑动评分控件完整

javascript实现炫酷的拖动分页

学习javascript文件加载优化

javascript实现仿腾讯游戏选择

JavaScript版代码高亮

Javascript 不能释放内存.

javascript 动态添加表格行

JavaScript实现鼠标点击后层展开效果的方法

javascript事件冒泡和事件捕获详解

精品推荐
分类导航