注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

牧野流星

每个人心中都有一个梦想..........

 
 
 

日志

 
 

纯JS图片轮播幻灯片效果  

2014-09-26 08:36:41|  分类: JS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
效果图
纯JS图片轮播幻灯片效果 - 过客 - 牧野流星
 
用到的图片
纯JS图片轮播幻灯片效果 - 过客 - 牧野流星

代码:
<!DOCTYPE html>
<html> 
<head>
<meta charset="UTF-8">
<style>
.imgbox {
width:136px;
height:200px;
overflow:hidden;
position:relative;
}
#preview {
position:absolute;
}

</style>
</head>
<body>
<div id="linklist">
<a href="#">不惧风暴</a><br>
<a href="#">敢死队3</a><br>
<a href="#">猩球崛起</a><br>
</div>
<div class="imgbox" id="imgbox"><img src="topic.gif" id="preview"/></div>
</body>
<script>
function moveElement(elementID,final_x,final_y,interval){
var elem = document.getElementById(elementID);
if(elem.movement) clearTimeout(elem.movement);
if(!elem.style.left) elem.style.left = "0px";
if(!elem.style.right) elem.style.right = "0px";
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if(xpos == final_x && ypos == final_y) return true;
if(xpos<final_x){
dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if(xpos>final_x){
dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if(ypos<final_y) ypos++;
if(ypos>final_y) ypos--;
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}

function prepareImgbox(){
var preview = document.getElementById('preview');
preview.style.position = 'absolute';
preview.style.left = '0px';
preview.style.top  = '0px';
var list = document.getElementById('linklist');
var links = list.getElementsByTagName("a");
for(var i=0;i<links.length;i++){
}
links[0].onmouseover = function(){
moveElement("preview",0,0,10);
}
links[1].onmouseover = function(){
moveElement("preview",-140,0,10);
}
links[2].onmouseover = function(){
moveElement("preview",-280,0,10);
}
}
window.onload= function(){
prepareImgbox();
}
</script>
</html>
  评论这张
 
阅读(326)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018