当前位置: 亚洲城ca88 > 计算机网络 > 正文

img的src地址的js代码_底工知识_脚本之家,JS中图

时间:2019-11-23 21:28来源:计算机网络
目的:求得div下img的src html: JS中图纸飞飞效果 兑现的着力考虑:策画多个img标签,为了便利调节都放在叁个div里面,设置div的一向格局为fixed,设置成那中定位形式注重是为了减轻在页

目的:求得div下img的src html:

JS中图纸飞飞效果

兑现的着力考虑:策画多个img标签,为了便利调节都放在叁个div里面,设置div的一向格局为 fixed,设置成那中定位形式注重是为了减轻在页面出现滚动条的景观下,图片仍然是能够够跟随鼠标移动。然后再鼠标移动的时候,延时给每叁个图片设置固定的left和top间隔就OK了。HTML和CSS代码如下:

 

复制代码

 1 <html xmlns=";

 2     <head>

 3         <style type="text/css" rel="stylesheet">

 4             div{

 5                     width:100px;

 6                     height:80px;

 7                     

 8                     position:fixed;

 9         </style>

10     </head>

11 

12     <body>    

13             <div ><img src="images/tianshi.gif" alt="天使" /></div>

14             <div><img src="images/tianshi.gif" alt="天使" /></div>

15             <div><img src="images/tianshi.gif" alt="天使" /></div>

16             <div><img src="images/tianshi.gif" alt="天使" /></div>

17             <div><img src="images/tianshi.gif" alt="天使" /></div>

18     </body>

19 </html>

复制代码

 

 

    在JS中,给当下文档对象注册一个事件,之所以注册给document而不是body是因为,当页面中平昔不内容的时候,body基本上是不曾轻重来说。代码如下:

 

 

复制代码

 1     <script type="text/javascript" >

 2         window.onload = function(){

 3             document.onmousemove = function(evt){

 4                 var e = evt || window.event;

 5                 //获得鼠标当前的坐标

 6                 var x = parseInt(e.clientX) 5;

 7                 var y = parseInt(e.clientY) 5;

 8                 //获取页面上的div控件

 9                 var imgs = document.getElementsByTagName('div');

10 

11                 setTimeout(function(){

12                         imgs[0].style.left = x 'px';

13                         imgs[0].style.top = y 'px';

14                 },0);

15                 setTimeout(function(){

16                     //    var j = i;

17                         imgs[1].style.left = x 'px';

18                         imgs[1].style.top = y 'px';

19                 },50);

20                 setTimeout(function(){

21                         imgs[2].style.left = x 'px';

22                         imgs[2].style.top = y 'px';

23                 },100);

24                 setTimeout(function(){

25                         imgs[3].style.left = x 'px';

26                         imgs[3].style.top = y 'px';

27                 },150);

28                 setTimeout(function(){

29                         imgs[4].style.left = x 'px';

30                         imgs[4].style.top = y 'px';

31                 },200);

32             };

33         }

34     </script>

复制代码

    通过下边包车型大巴代码基本上就曾经落到实处了大家想要的效应,然而那些的繁杂,如若想再增多几个图片,又要求再度的正片一大片,还索要总计时间等,但是比较简单明白。

 

    从上边的代码中能够观望,其实每多个setTimeout中代码都以千篇后生可畏律的,分歧的是imags的索引而已,并且在每三个setTimeout中传送的都是叁个无名函数。故能够通过一个循环来拓宽支配,在代码中setTimeout里面传递的是贰个无名函数,是索要引用外界变量的。但出于循环变量i在循环实行到位后风流倜傥度是5,而在援引它的无名氏函数中并不会被滞留,于是最后经过给一个自己试行的无名氏函数字传送参的不二诀窍,来使每叁个佚名函数来给个中的无名函数(闭包)维护三个变量功能域。校订后的代码如下:

 

复制代码

 1     <script type="text/javascript" >

 2         window.onload = function(){

 3             document.onmousemove = function(evt){

 4                 var e = evt || window.event;

 5                 //得到鼠标当前的坐标

 6                 var x = parseInt(e.clientX) 5;

 7                 var y = parseInt(e.clientY) 5;

 8                 //获取页面上的div控件

 9                 var imgs = document.getElementsByTagName('div');

10                 

计算机网络,11                 for(var i=0;i<imgs.length;i ){

12                     //通过参数的款型把i传递过来,就可以见到将每一个i的值向来保存在内部存款和储蓄器中,直到闭包的无名氏函数不在使用它

13                     (function(j){

14                         setTimeout(function(){

15                             imgs[j].style.left = x 'px';

16                             imgs[j].style.top = y 'px';

17                         },j*40)

18                     })(i);

19                 };

20             };

21         }

22     </script>

落成的主导思想:准备四个img标签,为了便利调整都坐落三个div里面,设置div的定点情势为 fixed,设置成那中稳固方式主...

. .

作者的错误代码: initImage; functioninitImage(){ for{ imageId[i]=document.getElementById; } } functionloadImage(){ for{ imageList[j]=imageId[j].getElementsByTagName[0]; if(imageId[j].src=="images/loading.gif") imageId[j].src="images/" j ".gif"; else.......... } }解决难点的代码复制代码 代码如下:

编辑:计算机网络 本文来源:img的src地址的js代码_底工知识_脚本之家,JS中图

关键词: 亚洲城ca88