程序博客网 > 男生衣服品牌知乎

Javascript制作风车图片特效

来源：互联网发布：男生衣服品牌知乎编辑：程序博客网时间：2024/05/02 01:16

点击按钮显现特效

代码如下

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

0 0

男生衣服品牌知乎

男生衣服品牌知乎

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子房价吧福建房价淮南房价太和房价焦作房价隆昌房价茂名房价莆田房价黄石房价吉安房价网未来房价长兴房价资阳房价郴州房价莆田房价网赤峰房价房价房价汕尾房价简阳市房价濮阳房价北戴河房价汉川房价网贵港房价漳州房价晋城房价玉溪房价麻城房价抚州房价十堰房价网邵阳房价银川房价通州房价柳州房价平顶山房价淄博房价温江房价成都房价网成都的房价西海岸房价长沙市房价阳江房价