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> 好了,基本搞定,有什么问题还请多多交流啊!

　　推荐阅读

　　js里怎么取select标签里的值并修改

如下的部分代码：复制代码代码如下: <select name=”company_id” id=”company_id”> <option selected=”selected” value=”b”>BBB</option> <option value=”A”>AAA</option> <option value=”C”>CCC</op>>>详细阅读

本文标题：javascript跑马灯悬停放大效果实现代码

地址：http://www.17bianji.com/kaifa2/JS/22843.html

1/2 1