课程咨询 :186 8716 1620      qq:2066486918

昆明Java培训 > 达内新闻 > javascript跑马灯悬停放大效果
  • javascript跑马灯悬停放大效果

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


  •   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多线程发展简史

最新开班日期  |  更多

Java--零基础全日制班

Java--零基础全日制班

开班日期:11/30

Java--零基础业余班

Java--零基础业余班

开班日期:11/30

Java--周末提升班

Java--周末提升班

开班日期:11/30

Java--零基础周末班

Java--零基础周末班

开班日期:11/30

  • 网址:http://km .java.tedu.cn      地址:昆明市官渡区春城路62号证券大厦附楼6楼
  • 课程培训电话:186 8716 1620      qq:2066486918    全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56