当鼠标在界面上移动的时候，后面有一连串的图片跟随者一起飘动，效果如下：

实现的基本思想：准备五个img标签，为了方便控制都放在一个div里面，设置div的定位方式为 fixed，设置成这中定位方式主要是为了解决在页面出现滚动条的情况下，图片还能够跟随鼠标移动。然后再鼠标移动的时候，延时给每一个图片设置定位的left和top距离就OK了。HTML和CSS代码如下：

 <html xmlns="http://www.w3.org/1999/xhtml">

     <head>

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

             div{

                     width:100px;

                     height:80px;

                     position:fixed;

         </style>

     </head>

     <body>

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

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

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

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

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

     </body>

 </html>

在JS中，给当前文档对象注册一个事件，之所以注册给document而不是body是因为，当页面中没有内容的时候，body基本上是没有大小而言。代码如下：

     <script type="text/javascript" >

         window.onload = function(){

             document.onmousemove = function(evt){

                 var e = evt || window.event;

                 //拿到鼠标当前的坐标

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

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

                 //获取页面上的div控件

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

                 setTimeout(function(){

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

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

                 },0);

                 setTimeout(function(){

                     //    var j = i;

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

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

                 },50);

                 setTimeout(function(){

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

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

                 },100);

                 setTimeout(function(){

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

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

                 },150);

                 setTimeout(function(){

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

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

                 },200);

             };

         }

     </script>

简单繁琐代码段

通过上面的代码基本上就已经实现了我们想要的效果，但是非常的繁琐，如果想再添加几个图片，又需要重新的拷贝一大片，还需要计算时间等，不过比较容易理解。

从上面的代码中可以看出，其实每一个setTimeout中代码都是一样的，不同的是imags的索引而已，而且 在每一个setTimeout中传递的都是一个匿名函数。故可以通过一个循环来进行控制，在代码中setTimeout里面传递的是一个匿名函数，是需要引用外部变量的。但由于循环变量i在循环执行完成后已经是5，而在引用它的匿名函数中并不会被驻留，于是最后通过给一个自我执行的匿名函数传参的方式，来使每一个匿名函数来给里面的匿名函数(闭包)维护一个变量作用域。改良后的代码如下：

     <script type="text/javascript" >

         window.onload = function(){

             document.onmousemove = function(evt){

                 var e = evt || window.event;

                 //拿到鼠标当前的坐标

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

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

                 //获取页面上的div控件

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

                 for(var i=0;i<imgs.length;i++){

                     //通过参数的形式把i传递过来，就能够将每一个i的值一直保存在内存中，直到闭包的匿名函数不在使用它

                     (function(j){

                         setTimeout(function(){

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

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

                         },j*40)

                     })(i);

                 };

             };

         }

     </script>

JS中图片飞飞效果的更多相关文章

  1. JS实现图片''推拉门''效果

    JS实现图片''推拉门''效果   ''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通 ...

  2. JS中图片的放大缩小没反应

    这段代码无反应: 代码如下: <script type="text/javascript"> onload = function () { document.getEl ...

  3. js实现图片局部放大效果

    图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积. 如上图,可以看到,这是放大镜的基本效果,主要分成左右两个部分.左边 ...

  4. 3月题外：关于JS实现图片缩略图效果的一些小问题

    由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...

  5. 3月题外：关于JS实现图片缩略图效果的一个小问题

    由于3月可能要结束实习,所以应该不会有特别固定的主题,另外我会在月初陆续补上上个月的番外篇Projection和TMS,作为介绍性的内容对矢量切片部分进行补充,剩下时间不定期写一些杂烩. 最近两天在做 ...

  6. js实现图片幻灯片效果

    其效果是点击图片切换到下一张图片 首先准备五张图片 <ul class="imge"> <li><img src="images/1.jpg ...

  7. js中图片获取src的正则

    链接: JavaScript 正则表达式:http://www.runoob.com/js/js-regexp.html js正则匹配出所有图片及图片地址src的方法:http://www.jb51. ...

  8. js中图片上传,多次上传同一张不生效

    在做图片上传的功能时, 使用删除功能删除了一张图片, 然后想重新上传原来删除的图片, 结果预览不显示, 也不能上传成功 解决办法, 在删除方法里置空input $("#id").f ...

  9. 使用纯生js实现图片轮换

    效果图预览. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

随机推荐

  1. jquery ajax 全局事件

    jquery的ajax方法的全部全局事件:(不管是$.ajax().$.get().$.load().$.getJSON()等都会默认触发全局事件) ajaxStart:ajax请求开始前 ajaxS ...

  2. 2017/2/11CSS基础

    一:html中div: 1.DIV标签应用于 Style Sheet(样式表)方面会更显威力,它最终目的是给设计者另一种组织能力,有 Class.Style.title.ID 等属性. 2.<d ...

  3. Roslyn研究随笔

    Roslyn概述: http://blogs.ejb.cc/archives/7604/dotnet-compile-platform-roslyn-overview 使用Microsoft Rosl ...

  4. DHT

    DHT(Distributed Hash Table,分布式哈希表)类似Tracker的根据种子特征码返回种子信息的网络.DHT全称叫分布式哈希表(Distributed Hash Table),是一 ...

  5. css固宽截取字符串

    width:200px; white-space:nowrap; word-break:keep-all; overflow:hidden; text-overflow:ellipsis; 移动端支持 ...

  6. 再读c++primer plus 001

    1. OOP强调的是在运行阶段(而不是编译阶段)进行决策,运行阶段指的是程序正在运行时,编译阶段指的是编译器将程序组合起来时. 2.变量的值都存储在栈中,而new从被称为堆或自由存储区的内存区域分配内 ...

  7. MongDB 配置成本地服务

    一.配置mangodb. 首先现在下来直接安装就好了, 可视化工具可以后面再安装. 在自己安装的目录下面(这个随意做好能够放一块)建立一个data文件, 再在下面建立一个db文件 在cmd中进入到Mo ...

  8. 840. Magic Squares In Grid

    class Solution { public: int numMagicSquaresInside(vector<vector<int>>& grid) { ; in ...

  9. 832. Flipping an Image

    class Solution { public: vector<vector<int>> flipAndInvertImage(vector<vector<int& ...

  10. react组件父传子

    react组件父传子,子组件使用父组件的数据,用props import React, { Component } from 'react'; class App extends Component ...