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

本文实例演示了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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery实现跟随鼠标运动图层效果的方法

    jQuery实现跟随鼠标运动图层效果的方法

    本文实例讲述了jQuery实现跟随鼠标运动图层效果的方法.分享给大家供大家参考.具体分析如下: 一.基本目标 写一个跟随鼠标运动的图层, 图层中显示当前鼠标的位置, 如下图所示: 此图层之所以使用jQuery,而不是因为javascript,是因为jQuery的代码其便于兼容当前的所有主流的浏览器,至少IE8是没有任何问题的,不用像javascript大段大段的代码都用到兼容性上面了. 二.制作过程 本次实验的核心是jquery里面的mousemove事件, 鼠标移动则触发. 代码如下: 复制代

  • jQuery网页右侧广告跟随滚动代码分享

    两种方法都分享给大家,希望对大家的学习有所启发. 方法一: <script type="text/javascript">// <![CDATA[ $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(func

  • jquery实现的提示浮层跟随鼠标移动

    jquery实现: jquery实现简单文字提示 #preview{border:1px solid #cccccc; background:#9900CC;color:#fff; padding:5px; display:none; position:absolute;} 把鼠标放到这里1 把鼠标放到这里2 把鼠标放到这里3 把鼠标放到这里4 把鼠标放到这里5 this.imagePreview = function(){ /* CONFIG */ xOffset = 10; yOffset

  • jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层

    复制代码 代码如下: <!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>jquery.tex

  • 基于JQuery的一个简单的鼠标跟随提示效果

    基于JQuery的一个简单的鼠标跟随提示效果

    1.效果如图 2.实现思路 1 鼠标移入标题(这里是<a>标签) 创建一个div,div的内容为鼠标位置的文本 将创建好的div加到文档中 为提示层设置位置 2 鼠标移出标题 移除div 3 当鼠标在标题内移动时 同样添加div效果 3.JQuery实现代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="t

  • 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)

    当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会.很多新闻资讯类网站如新浪.网易.CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站. 现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果.就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多.内容较长的网站.志文工作室调研了几种类似功能的实现方法,摘录之以供参考. 参考一.提

  • jquery背景跟随鼠标滑动导航

    jquery背景跟随鼠标滑动导航

    本文实例讲述了支持背景图片上下滑动的竖向jQuery菜单导航特效代码,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312"> <title>左边跟随鼠标滑动导航</title> <meta name="keywords"

  • 基于jquery的跟随屏幕滚动代码

    基于jquery的跟随屏幕滚动代码

    那么这是怎么实现的呢?本文将引用乌徒帮的跟随屏幕滚动代码,对此效果做详解. 一.原始代码 下面是乌徒帮的跟随屏幕滚动代码,它的作用域为乌徒帮网页两侧的边栏,以及双击屏幕后的右侧隐藏栏. 复制代码 代码如下: var $catalogueOffsetTop = $('aside#catalogue').offset().top; var $archiveOffestTop = $('aside#archive').offset().top; var $archiveOffestLeft = $('

  • jQuery鼠标悬浮链接弹出跟随图片实例代码

    jQuery鼠标悬浮链接弹出跟随图片实例代码

    本文章介绍了一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等,下面是代码实例: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>我们</title> <style type="text/css"> body{ margin:0

  • jQuery 顶部导航跟随滚动条滚动固定浮动在顶部

    jQuery 顶部导航跟随滚动条滚动固定浮动在顶部

      复制代码 代码如下: <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li> <li>

  • jQuery实现div浮动层跟随页面滚动效果

    复制代码 代码如下: <!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> <meta http-equiv=&qu

  • jQuery+css3实现文字跟随鼠标的上下抖动

    css3过渡属性结合jq,如果直接复制代码运行,需要加载一个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

随机推荐