jQuery实现磁力图片跟随效果完整示例

 更新时间:2016年09月16日 00:49:48   作者:永远爱好写程序  
这篇文章主要介绍了jQuery实现磁力图片跟随效果,结合完整实例形式分析了jQuery事件响应及animate方法实现带缓冲效果的图片跟随效果,需要的朋友可以参考下

本文实例演示了jQuery实现磁力图片跟随效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>磁力图片</title>
  <style type="text/css">
    #imgSel{position:absolute;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $(document).mousemove(function (e) {
        $("#imgSel").animate({"left":e.pageX,"top":e.pageY},0.1);
      });
    });
  </script>
</head>
<body>
  <img id="imgSel" src="../images/select.JPG" />
</body>
</html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

  • jQuery插件ajaxFileUpload实现异步上传文件效果

    jQuery插件ajaxFileUpload实现异步上传文件效果

    jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来我们来看下用AjaxFileUpload插件实现文件上传的方法,有需要的小伙伴可以参考下
    2015-04-04
  • jQuery实现数字华容道小游戏(实例代码)

    jQuery实现数字华容道小游戏(实例代码)

    这篇文章主要介绍了jQuery实现数字华容道小游戏功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • jquery实现兼容IE8的异步上传文件

    jquery实现兼容IE8的异步上传文件

    这里给大家分享的是使用jQuery插件实现兼容IE8的异步上传文件的代码,效果非常不错,有需要的小伙伴可以参考下。
    2015-06-06
  • jQuery+CSS3文字跑马灯特效的简单实现

    jQuery+CSS3文字跑马灯特效的简单实现

    下面小编就为大家带来一篇jQuery+CSS3文字跑马灯特效的简单实现。小编觉得挺不错的,现在就分享给大家看,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • jquery操作对象数组元素方法详解

    jquery操作对象数组元素方法详解

    本文介绍了jQuery操作对象数组元素的3种方法以及一种错误方法,这里记录一下,防止下次再犯,有需要的小伙伴也可以参考下。
    2014-11-11
  • jQuery元素选择器用法实例

    jQuery元素选择器用法实例

    这篇文章主要介绍了jQuery元素选择器用法,通过一个简单的隐藏div元素实例讲述了元素选择器的用法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jQuery实现瀑布流布局

    jQuery实现瀑布流布局

    上篇文章我们介绍了使用原生的javascript实现了图片瀑布流效果,本文我们来用jQuery来实现同样的效果。
    2014-12-12
  • Jquery attr()方法 属性赋值和属性获取详解

    Jquery attr()方法 属性赋值和属性获取详解

    下面小编就为大家带来一篇Jquery attr()方法 属性赋值和属性获取详解。小编觉得挺不错的,现在分享给大家,也给大家做个参考
    2016-04-04
  • 基于JQuery的实现图片轮播效果(焦点图)

    基于JQuery的实现图片轮播效果(焦点图)

    用JQuery操作DOM确实很方便,并且JQuery提供了非常人性化的API应付我们的各种需求,其中选择器在此示例-JQuery实现图片轮播效果上体现的尤为出色。大大简化了js的代码。
    2010-09-09
  • jquery 将disabled的元素置为enabled的三种方法

    jquery 将disabled的元素置为enabled的三种方法

    在jquery中可以通过jqueryObj.attr("disabled","disabled")将页面中某个元素置为不可编辑或触发状态,但是在jquery的API reference中并没说明怎么将页面置为disable的元素重新置为可触发或可编辑的。
    2009-07-07

最新评论