管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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>

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

教程首页 更多教程