昆明java培训
达内昆明广州春城路

18487146383

热门课程

javascript跑马灯悬停放大效果

  • 时间:2016-03-09
  • 发布:昆明Java培训
  • 来源:达内新闻


  qq空间的朋友应该对这个很熟悉吧, 昆明java培训小编觉得效果蛮炫的,不过它们是用flash实现的,那么javascript可不可以呢, 昆明java培训根据网上资料找一些,终于弄的差不多了,不过还是有些地方不完善,还望大家多多谅解,会在以后将其完善的.

    昆明java培训先说下思路:

首先动态创建一个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的移动,并且绑定外层divonmouseenteronmouseleave事件.最后将外层的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是外层divwidth,h同理,step是计时器执行一次图片移动的步数,speed是计时器的时间间隔.

上面的计时器代码借用了网上的一段代码,不过昆明java培训老师做了些改进.

下面给出调用代码:

 代码如下:

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

 很多时候我们都把思维局限在一个点上,其实将局限点打开了,我们就可以有更好的思维,做出更好的设计昆明java培训与你一起学习成长。

上一篇:java让世界精彩起来
下一篇:Java多线程发展简史

“因材施教,分级培优”十问十答

达内举办“2016授课讲师资格认证培训“,不断提升教学品质

达内牵手猿圈科技,打造技能测评、学习、就业一站式服务

毕业三年之内能转行学编程吗?

选择城市和中心
贵州省

广西省

海南省