【CSON原创】javascript图片滚动效果发布

功能说明：

在GMC实习的时候，写过一个图片滚动切换的控件，现在也发布一下。

1。支持点击左右按钮滚动图片。

2。支持点击右上角的选择按钮进行图片滚动。

支持IE 6 7 8 FireFox Chrome

效果预览：

实现原理：

把所有对象包含在单行，并且通过按钮的点击，控制单行的移动，实现图片滚动效果。

通过对数函数实现移动的先加速后减速效果。

代码分析：

var defaults = {
changerId: 'phos_changer', //控件id
containerId: 'phos_container', //图片包含块id
bodyId: 'boxDiv2', //包含块外div的id
select_btn_Id:'select', //选择按钮前缀
bodyWidth: 500, //显示区域宽度
left_btn_Id: 'left_btn', //左按钮id
right_btn_Id: 'right_btn', //右按钮id
movePath: 300, //切换速度
groupCount: 5, //每次显示个数
btnClass: 'btn', //左右按钮类
selectorContainerId:'select_btns_area', //选择按钮的容器id
left_btn_disble_Class: 'left_btn_disable', //左按钮禁用时样式类
right_btn_disble_Class: 'right_btn_disable', //右按钮禁用时样式类
select_btn_Class:'select_btn', //选择按钮样式类
left_btn_Class:'left_btn', //左按钮样式类
right_btn_Class:'right_btn', //右按钮样式类
left_btn_over_Class:'left_btn_over', //左按钮鼠标移上去时样式类
right_btn_over_Class:'right_btn_over', //右按钮鼠标移上去时样式类
select_btn_selected_Class:'select_btn_selected'//选择按钮被选择后样式类
};
var opts=util.extend(defaults,option);

首先定义默认值对象，里面包含所有参数的默认值，包括左右按钮ID，按钮不同状态下使用的样式class，每次显示对象的数量等，并且下面使用extend把用户传入的参数对象与默认对象结合，形成最终的参数对象，extend写在工具类中，具体如下：

extend:function(destination,source){
for(var name in source){
destination[name]=source[name];

}
return destination;
}

这里由于传入的参数没有引用类型，所以工具类中的extend只实现了浅复制。

set_EventsHandler_for_selectors:function(obj){
util.addEventHandler(obj.selectorContainer,'click',function(eve){
eve=eve||window.event;
var target=eve.target||eve.srcElement;
if(target!=obj.currentSelector){
var targetIndex=target.id.charAt(target.id.length-1);
var currentIndex=obj.currentSelector.id.charAt(obj.currentSelector.id.length-1);
var len=targetIndex-currentIndex;
if(len>0){
for(var t=0;t<len;t++){

len>1?obj._moveLeft(obj,obj.movePath+300)():obj._moveLeft(obj)();

}
}
else{
for(var t=0;t<-len;t++){

len<-1?obj._moveRight(obj,obj.movePath+300)():obj._moveRight(obj)();

}
}

}

});

},

为右上角的选择按钮绑定事件处理程序，当按钮跨度为2（例如有第一个选择按钮跳到第三个选择按钮时），增大滚动速度，原速度（movePath）增加300后传入处理移动的函数。

_moveLeft:function(obj,movePath) {
if(!movePath)movePath=obj.movePath;
returnfunction(){
if (obj.isLeft) {
if(obj.selectIndex<obj.selectorArray.length)
{
obj.selectorArray[obj.selectIndex].className=obj.select_btn_Class;
obj.selectIndex+=1;
obj.ori_left= parseInt(util.getComputedStyle(obj.phos_container).left);
obj.selectorArray[obj.selectIndex].className=obj.select_btn_Class+''+obj.select_btn_selected_Class; }
obj.currentLeft =obj. currentLeft -obj.moveLength;
obj.isRight =false;
obj._lMove(obj,movePath);

}
if (obj.currentLeft <=-(obj.container_length - obj.moveLength)) {

obj.right_btn.className = obj.btnClass+''+obj.right_btn_Class +''+ obj.right_btn_disble_Class;

obj.isLeft =false;
}
}

},

移动函数有向左移动和向右移动两个，由于两者原理相似，因此这里只分析向左移动函数。这里由于需要向事件处理程序传递参数，所以使用了闭包的方法，返回一个没有参数的function。

函数首先判断isLeft是否为true，isLeft是控制对象是否能向左滚动的一个属性，当为false时，意味着已经滚动到最后，不能继续滚动，此时不能调用“原子”的向左滚动函数_lMove，该函数如下：

_lMove:function(obj,movePath) {

if (parseInt(util.getComputedStyle(obj.phos_container).left) > obj.currentLeft) {

obj.path+=1;

obj.phos_container.style.left =Math.max(obj.currentLeft, obj.ori_left-Math.log(obj.path)/Math.log(5)*movePath) + 'px';
window.setTimeout(arguments.callee, 50,obj,movePath);
}
else {
obj.path=0;

obj.isRight =true;
obj.left_btn.className = obj.btnClass+''+obj.left_btn_Class;
obj.getCurrentSelector();
}

},

这个就是前面所说的“原子”向左移动的函数，该函数通过定时器递归调用。所谓“原子”，就是每次该函数调用时只向左移动一个单位的位移，该单位的位移使用对数函数计算：

单位位移=obj.ori_left-Math.log(obj.path)/Math.log(5)*movePath

利用对数函数曲线，可以实现先加速后减速的效果。并且需要注意的是由于每次移动固定的位移，所以必须保证移动后的位移小于等于极限的位移，因此需要用Math.max来限定位移量。

new phos_changer(
{
changerId: 'phos_changer1',
containerId: 'phos_container1',
selectorContainerId:'select_btns_area1',
bodyId: 'boxDiv1',
select_btn_Id:'select',
left_btn_Id: 'left_btn1',
right_btn_Id: 'right_btn1'
});

最后是调用的方法，传入一个对象，里面包含需要个性化的参数，实现对控件的初始化。

完整demo代码：

js：

View Code

CSS：

View Code

*{margin:0; padding:0}
.phos_changer{width:650px; position:relative; height:200px;}
.productCol{ overflow:hidden;height:100px; width:500px; position:absolute; left:50%; margin-left:-250px; top:30px;}
.phos_container{height:100%; position:absolute; left:0; top:0;}
.btn{width:45px; height:45px; position:absolute;}
.left_btn{ left:20px; top:60px; z-index:100; background-image:url(http://images.cnblogs.com/cnblogs_com/Cson/290336/r_left-btn-over.png); background-repeat:no-repeat;}
.right_btn{ right:20px; top:60px; z-index:100; background-image:url(http://images.cnblogs.com/cnblogs_com/Cson/290336/r_right-btn-over.png); background-repeat:no-repeat;}
.left_btn_over{background-image:url(http://images.cnblogs.com/cnblogs_com/Cson/290336/r_left-btn-over.png);}
.right_btn_over{background-image:url(http://images.cnblogs.com/cnblogs_com/Cson/290336/r_right-btn-over.png);}
.left_btn_disable{background-image:url(http://images.cnblogs.com/cnblogs_com/Cson/290336/r_left-btn.png);}
.right_btn_disable{background-image:url(http://images.cnblogs.com/cnblogs_com/Cson/290336/r_right-btn.png);}

.select_btns_area{position:absolute; top:0; right:50px;}
.select_btn{width:15px; height:15px; background-image:url(http://images.cnblogs.com/cnblogs_com/Cson/290336/r_pageBtn-up.png); background-repeat:no-repeat; float:left; margin-left:10px; display:inline;}

.select_btn_selected{background-image:url(http://images.cnblogs.com/cnblogs_com/Cson/290336/r_pageBtn-select.png); background-repeat:no-repeat;}
.photo_container{ width:100px; height:100px; background-color:Red; float:left;}

HTML：

View Code

欢迎转载，请标明出处：http://www.cnblogs.com/Cson/archive/2011/03/30/2000075.html#

posted @ 2011-03-30 16:45 Cson 阅读(2063) 评论(7) 编辑收藏举报

刷新页面返回顶部

【CSON原创】javascript图片滚动效果发布

公告