Javascript制作风车图片特效


点击按钮显现特效

代码如下

//Css and Javascript

<style type="text/css">
      body,img{margin:0px; padding:0px;}
    body{
            background: url(%E6%A1%8C%E9%9D%A2%E5%A3%81%E7%BA%B8/656107.jpg) no-repeat center fixed;     
            text-align:center;
        }
    button{
            width:140px;
            height:80px;
            font-size:24px;
            font-weight:bold;
            background-color:#09F;
            border:#FFF solid 5px;
            margin-top:250px;
            cursor:pointer;
        }
  </style>
  <script type="text/javascript">
      window.onload = function()
    {
        var wdWidth = document.documentElement.clientWidth;
        var wdHeight = document.documentElement.clientHeight;
        var imgs = document.images;
        imgs.item(0).style = "position:absolute;left:0px;top:0px;";    
        imgs.item(1).style = "position:absolute;left:"+(wdWidth-imgs.item(1).width)+"px;top:0px;";    
        imgs.item(2).style = "position:absolute;left:0px;top:"+(wdHeight-imgs.item(2).height)+"px;";    
        imgs.item(3).style = "position:absolute;left:"+(wdWidth-imgs.item(3).width)+"px;\
                                top:"+(wdHeight-imgs.item(3).height)+"px;";    
    }
    
    function show()
    {
        show_img1();
        show_img2();
        show_img3();
        show_img4();
    }
    var wdWidth = document.documentElement.clientWidth-2;
    var wdHeight = document.documentElement.clientHeight-2;
    var imgs = document.images;
    var img1_inte;
    function show_img1()
    {
        
        var img1 = imgs.item(0);
        var img1_width = img1.width;
        var img1_x = img1.offsetLeft;
        img1.style.left = (img1_x+1)+"px";
        img1_inte = setTimeout('show_img1()',1);
        if(img1_x+img1_width == wdWidth)
        {
            clearTimeout(img1_inte);    
        }
    }
    var img2_inte;
    function show_img2()
    {
        var img = imgs.item(1);    
        var img_height = img.height;
        var img_y = img.offsetTop;
        img.style.top = (img_y+1)+"px";
        img2_inte = setTimeout("show_img2()",1);
        if(img_y+img_height == wdHeight)
        {
            clearTimeout(img2_inte);    
        }
    }
    var img3_inte;
    function show_img3()
    {
        
        var img1 = imgs.item(3);
        var img1_width = img1.width;
        var img1_x = img1.offsetLeft;
        img1.style.left = (img1_x-1)+"px";
        img3_inte = setTimeout('show_img3()',1);
        if(img1_x+img1_width == img1_width)
        {
            clearTimeout(img3_inte);    
        }
    }
    var img4_inte;
    function show_img4()
    {
        var img = imgs.item(2);    
        var img_height = img.height;
        var img_y = img.offsetTop;
        img.style.top = (img_y-1)+"px";
        img4_inte = setTimeout("show_img4()",1);
        if(img_y+img_height == img_height)
        {
            clearTimeout(img4_inte);    
        }
    }
  </script>

//Body

<body>
    <img src="桌面壁纸/471817.jpg" width="260" height="150" />
    <img src="桌面壁纸/xinfeng.jpg" width="260" height="150" />
    <img src="桌面壁纸/aifeier.jpg" width="260" height="150" />
    <img src="桌面壁纸/653148.jpg" width="260" height="150" />
    <button onClick="show()">Click Me</button>
 </body>


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com