javascript跑马灯悬停放大效果实现代码

225 阅读 0 评论 149 点赞

我是靠谱客的博主迷你大白，最近开发中收集的这篇文章主要介绍javascript跑马灯悬停放大效果实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

用过qq空间的朋友应该对这个很熟悉吧,效果蛮炫的,不过它们是用flash实现的,那么javascript可不可以呢,我琢磨了三天,终于弄的差不多了,不过还是有些地方不完善,还望大家多多谅解,我会在以后将其完善的.

先说下思路:
首先动态创建一个html结构

复制代码代码如下:

 
<div style="overflow-x:hidden;"> 
<table border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td><img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="4.jpg">.............</td> 
<td></td> 
</tr> 
</table> 
</div> 

这个很关键,然后设置一个计时器来模拟img的移动,并且绑定外层div的onmouseenter和onmouseleave事件.最后将外层的div对象返回.

下面看代码

复制代码代码如下:

 
sx.activex.dynamicpic={ 
init:function(imga,border,margin,w,h,step,speed){ 
var demo=document.createElement("div"); 
var tbody=document.createElement("tbody"); 
var demo1=document.createElement("td"); 
var demo2=document.createElement("td"); 
var table=document.createElement("<table border=/"0/" cellspacing=/"0/" cellpadding=/"0/">"); 
var tr=document.createElement("tr"); 
demo.style.position="absolute"; 
demo.style.height=h+"px"; 
demo.style.width=w+"px"; 
demo.style.overflowX="hidden"; 
for(var i=0;i<imga.length;i++){ 
var img=document.createElement("img") 
img.src=imga[i]; 
img.style.height=h+"px"; 
img.style.width=parseInt(w/imga.length)+"px"; 
demo1.appendChild(img) 
} 
tr.appendChild(demo1); 
tr.appendChild(demo2); 
tbody.appendChild(tr); 
table.appendChild(tbody); 
demo.appendChild(table); 
var c=demo1.all; 
for(var i=0;i<c.length;i++){ 
c[i].style.marginLeft=margin+"px"; 
c[i].style.border=border; 
} 
demo2.innerHTML = demo1.innerHTML 
function Marquee(){ 
if(demo2.offsetWidth-demo.scrollLeft<=0){ 
//alert(demo.scrollLeft); 
demo.scrollLeft-=demo1.offsetWidth;} 
else{ 
demo.scrollLeft+=step; 
} 
} 
var MyMar = setInterval(Marquee,speed); 
demo.onmouseenter = function(){ 
clearInterval(MyMar); 
var t=document.elementFromPoint(window.event.clientX,window.event.clientY); 
if(t.tagName!="IMG") 
return; 
if(t.offsetHeight>demo.offsetHeight+10) 
return; 
//alert(t.src); 
var d=document.createElement("img"); 
d.style.height=t.offsetHeight+50+"px"; 
d.style.width=t.offsetWidth+50+"px"; 
d.style.position="absolute"; 
d.style.top="-25px"; 
if(t.parentNode==demo2){ 
d.style.left=t.offsetLeft+demo1.offsetWidth-20+"px"; 
//alert(1); 
//demo.scrollLeft-=demo1.offsetWidth; 
}else{ 
d.style.left=t.offsetLeft-25+"px";} 
//alert(d.style.left); 
//alert(window.event.clientX); 
//alert(t.offsetLeft-demo.scrollLeft+demo.offsetWidth-25); 
d.src=t.src; 
d.onmouseleave=function(){ 
d.parentNode.removeChild(d); 
MyMar = setInterval(Marquee,speed) 
} 
//alert(1); 
//demo.style.overflow="visible"; 
demo1.appendChild(d); 
//alert(m.innerHTML); 
} 
demo.onmouseleave = function(){MyMar = setInterval(Marquee,speed)} 
return demo; 
} 
} 

函数参数的imga是你要传入img地址的数组,border是图片的边框属性,margin是图片间的距离,w是外层div的width,h同理,step是计时器执行一次图片移动的步数,speed是计时器的时间间隔.
上面的计时器代码借用了网上的一段代码,不过我自己做了些改进.
下面给出调用代码:

复制代码代码如下:

 
<html> 
<head> 
<title>Untitled Document</title> 
</head> 
<body> 
<script src="kongjian.js"></script> 
<script> 
var a=sx.activex.dynamicpic.init(["1 (1).jpg","1.jpg","1 (2).jpg","1 (3).jpg"],"2px red solid",5,500,100,2,10); 
document.body.appendChild(a); 
</script> 
</body> 
</html> 

好了,基本搞定,有什么问题还请多多交流啊!