javascript跑馬燈懸停放大效果實現代碼

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

好了,基本搞定,有什麼問題還請多多交流啊!

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More