快捷導(dǎo)航

javascript跑馬燈懸停放大效果實(shí)現(xiàn)代碼

更新時(shí)間：2012年12月12日 10:41:12 作者：

用過qq空間的朋友應(yīng)該對(duì)這個(gè)很熟悉吧,效果蠻炫的,不過它們是用flash實(shí)現(xiàn)的,那么javascript可不可以呢,需要的朋友可以了解下

用過qq空間的朋友應(yīng)該對(duì)這個(gè)很熟悉吧,效果蠻炫的,不過它們是用flash實(shí)現(xiàn)的,那么javascript可不可以呢,我琢磨了三天,終于弄的差不多了,不過還是有些地方不完善,還望大家多多諒解,我會(huì)在以后將其完善的.

先說下思路:
首先動(dòng)態(tài)創(chuàng)建一個(gè)html結(jié)構(gòu)

復(fù)制代碼代碼如下:

 
<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> 

這個(gè)很關(guān)鍵,然后設(shè)置一個(gè)計(jì)時(shí)器來模擬img的移動(dòng),并且綁定外層div的onmouseenter和onmouseleave事件.最后將外層的div對(duì)象返回.

下面看代碼

復(fù)制代碼代碼如下:

 
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; 
} 
} 

函數(shù)參數(shù)的imga是你要傳入img地址的數(shù)組,border是圖片的邊框?qū)傩?margin是圖片間的距離,w是外層div的width,h同理,step是計(jì)時(shí)器執(zhí)行一次圖片移動(dòng)的步數(shù),speed是計(jì)時(shí)器的時(shí)間間隔.
上面的計(jì)時(shí)器代碼借用了網(wǎng)上的一段代碼,不過我自己做了些改進(jìn).
下面給出調(diào)用代碼:

復(fù)制代碼代碼如下:

 
<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> 

好了,基本搞定,有什么問題還請(qǐng)多多交流啊!

您可能感興趣的文章: