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程序设计有所帮助。
相关推荐
-
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的一个简单的鼠标跟随提示效果
1.效果如图 2.实现思路 1 鼠标移入标题(这里是<a>标签) 创建一个div,div的内容为鼠标位置的文本 将创建好的div加到文档中 为提示层设置位置 2 鼠标移出标题 移除div 3 当鼠标在标题内移动时 同样添加div效果 3.JQuery实现代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="t
-
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 顶部导航跟随滚动条滚动固定浮动在顶部
复制代码 代码如下: <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li> <li>
-
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+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
-
基于jquery的跟随屏幕滚动代码
那么这是怎么实现的呢?本文将引用乌徒帮的跟随屏幕滚动代码,对此效果做详解. 一.原始代码 下面是乌徒帮的跟随屏幕滚动代码,它的作用域为乌徒帮网页两侧的边栏,以及双击屏幕后的右侧隐藏栏. 复制代码 代码如下: var $catalogueOffsetTop = $('aside#catalogue').offset().top; var $archiveOffestTop = $('aside#archive').offset().top; var $archiveOffestLeft = $('
-
jQuery实现跟随鼠标运动图层效果的方法
本文实例讲述了jQuery实现跟随鼠标运动图层效果的方法.分享给大家供大家参考.具体分析如下: 一.基本目标 写一个跟随鼠标运动的图层, 图层中显示当前鼠标的位置, 如下图所示: 此图层之所以使用jQuery,而不是因为javascript,是因为jQuery的代码其便于兼容当前的所有主流的浏览器,至少IE8是没有任何问题的,不用像javascript大段大段的代码都用到兼容性上面了. 二.制作过程 本次实验的核心是jquery里面的mousemove事件, 鼠标移动则触发. 代码如下: 复制代
-
jquery背景跟随鼠标滑动导航
本文实例讲述了支持背景图片上下滑动的竖向jQuery菜单导航特效代码,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312"> <title>左边跟随鼠标滑动导航</title> <meta name="keywords"
-
jQuery鼠标悬浮链接弹出跟随图片实例代码
本文章介绍了一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等,下面是代码实例: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>我们</title> <style type="text/css"> body{ margin:0
-
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会.很多新闻资讯类网站如新浪.网易.CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站. 现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果.就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多.内容较长的网站.志文工作室调研了几种类似功能的实现方法,摘录之以供参考. 参考一.提
-
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
随机推荐
- javascript类式继承新的尝试
- AngularJS中使用three.js的实例详解
- 批处理入门手册之批处理常用DOS命令篇(attrib、del、copy、xcopy)
- 利用Shell脚本循环读取文件中每一行的方法详解
- jquery实现点击TreeView文本父节点展开/折叠子节点
- Vue.js实现一个SPA登录页面的过程【推荐】
- 验证注册用户名必须为字母
- Android编程实现自动检测版本及自动升级的方法
- JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
- php addslashes和mysql_real_escape_string
- PHP mysql与mysqli事务使用说明 分享
- python递归打印某个目录的内容(实例讲解)
- SpringMVC下获取验证码实例详解
- eclipse中自动生成javadoc文档的方法
- 网络图片延迟加载实现代码 超越jquery控件
- php在页面中调用fckeditor编辑器的方法
- SQL中的ISNULL函数使用介绍
- javascript验证邮件地址和MX记录的方法
- 使用insertAfter()方法在现有元素后添加一个新元素
- JavaScript在控件上添加倒计时功能的实现代码