<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>move img</title>
<style>
#baobaophoto{
width:300px;
height:200px;
overflow:hidden;
position:relative;
}
#bbimg{
position:absolute;
}
a:link,
a:visited{
text-decoration:none;
}
a:hover{
color:#FF0000;
}
.link{
font-weight:normal;
color:#000;
}
.hover{
font-weight:bold;
color:#FF0000;
}
</style>
<script>
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function"){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
function movePhoto(element_id,move_x,move_y,interval){
var bbimg = document.getElementById(element_id);
if(bbimg.moveevent) clearTimeout(bbimg.moveevent);
var xpos = parseInt(bbimg.style.left);
var ypos = parseInt(bbimg.style.top);
if(xpos == move_x && ypos == move_y) return true;
if(xpos < move_x){
var intermove = Math.ceil((move_x-xpos)/10);
xpos = xpos + intermove;
};
if(xpos > move_x){
var intermove = Math.ceil((xpos-move_x)/10);
xpos = xpos - intermove;
};
if(ypos < move_y){
var intermove = Math.ceil((move_y-ypos)/10);
ypos = ypos + intermove;
};
if(ypos > move_y){
var intermove = Math.ceil((ypos-move_y)/10);
ypos = ypos - intermove;
};
bbimg.style.left = xpos + "px";
bbimg.style.top = ypos + "px";
var repeatmove = "movePhoto('"+element_id+"',"+move_x+","+move_y+","+interval+")";
bbimg.moveevent = setTimeout(repeatmove,interval);
}
function bindImg(){
var bbimg = document.getElementById("bbimg");
if(!bbimg.style.left) bbimg.style.left = "0px";
if(!bbimg.style.top) bbimg.style.top = "0px";
var list = document.getElementsByTagName("ol")[0];
var lista = list.getElementsByTagName("a");
lista[0].onmouseover = function(){
movePhoto("bbimg",0,0,15);
for(var i=0;i<lista.length;i++){
lista[i].className = "link";
}
this.className = "hover";
}
lista[1].onmouseover = function(){
movePhoto("bbimg",-300,0,15);
for(var i=0;i<lista.length;i++){
lista[i].className = "link";
}
this.className = "hover";
}
lista[2].onmouseover = function(){
movePhoto("bbimg",-600,0,15);
for(var i=0;i<lista.length;i++){
lista[i].className = "link";
}
this.className = "hover";
}
}
addLoadEvent(bindImg);
</script>
</head>
<body>
<ol>
<li><a class="hover" href="#">第一张</a></li>
<li><a class="link" href="#">第二张</a></li>
<li><a class="link" href="#">第三张</a></li>
</ol>
<div id="baobaophoto"><img id="bbimg" src="http://hi.csdn.net/attachment/201108/3/0_1312345338dejs.gif" width="900" height="200" border="0" /></div>
</body>
</html>
要点
- 利用容器的相对定位给容器内的图片提供绝对定位，图片切换滑动的原理就是通过改变 CSS left 值来移动图片在容器内的位置
- 容器设置overflow:hidden可以让容器内的元素以容器给定的固定尺寸来显示，超出的部分不显示，所以我们在视觉上才会有在一个固定尺寸内图片滑动的效果
- addLoadEvent 事件加载队列函数，可以方便的让多个函数绑定到window.onload事件上
- movePhoto 移动照片的核心函数，if(bbimg.moveevent) clearTimeout(bbimg.moveevent); 用于清除切换标签后，上一次调用函数带来的延迟，这里的变量moveevent无论是设置成全局变量还是局部变量都不能达到目的，原因是如果设置成全局变量，那么在函数movePhoto的一开始我还没有定义变量，所以是没法在clearTimeout函数中调用的，javascript就会出错，而局部变量就更没法在另外的函数中使用了，它只能在使用var定义它的这个函数之内使用。最终的解决方案就是给元素bbimg定义一个属性，属性和方法其实就是绑定在某个对象上的变量和函数，只不过限定只能用于其自身。
- parseInt函数可以把字符串中的数值提取出来并且永远是整数 例如上面代码中我们的字符串比如是 300px 其结果就是 300，如果需要保留字符串中带有小数点的数字（浮点数），那么就得用parseFloat函数。
- Math.ceil((move_x-xpos)/10); 目标位置 - 当前位置 = 剩余距离，这样的方式可以以缓冲的速度来移动目标， 除以10是决定缓冲的速度，这个值越大则越慢。因为把剩余距离要除以一个数值，而当这个剩余距离小于10的时候再除以10就永远只能在0-1之间，也就是说目标位置和最终位置之间的差距永远不会是0，所以我们需要把剩余距离 向大于方向舍入为一个整数，比如0.21舍入为1，Math.ceil就是这个作用，它可以把浮点数向“大于”方向舍入为与之最接近的整数。Math.floor和它相反，取“小于”方向的最接近的整数。Math.round则是返回最接近的整数，如果小数部分大于等于0.5，返回值是大于方向最接近的整数，否则round函数返回小于方向最接近的整数。
- bbimg.style.left 则是运用了 CSS DOM， 我们可以通过DOM获取和改变元素的CSS样式信息，本次实例中移动图片就是通过改变图片离容器左侧距离来实现移动的。
- setTimeout 函数是在载入此函数后，以预定的时间去延迟执行一个函数，延迟的时间是以毫秒为单位，通常使用到setTimeout函数就应该给其定义相应的一个变量，在clearTimeout的时候可以把该变量作为此函数的参数使用，用于清除setTimeout函数。
- lista[i].className = "link"; 则是通过修改元素 class 属性来重新渲染新的CSS样式，之前的样式会被替换。如果想不被替换，可以使用自定义函数addClass
2679
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
