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 顶部导航跟随滚动条滚动固定浮动在顶部
复制代码 代码如下: <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li> <li>
-
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
当一个页面内容很长的时候,侧边栏栏目可能显得太短,当窗口滑动到靠下的位置,则侧边即失去了展示内容的机会.很多新闻资讯类网站如新浪.网易.CSDN等,会在边栏的右下角以固定的小弹窗形式,以提供更多的内容展示方式,但这并不适合博客和web2.0风格的网站. 现在很多的独立博客和网站如人人网等,都使用了让侧边栏模块随滚动条滑动而位置固定的效果.就是当一个页面很长的时候,设定侧栏内容会跟随滚动条,这种效果适用于评论较多.内容较长的网站.志文工作室调研了几种类似功能的实现方法,摘录之以供参考. 参考一.提
-
jquery背景跟随鼠标滑动导航
本文实例讲述了支持背景图片上下滑动的竖向jQuery菜单导航特效代码,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312"> <title>左边跟随鼠标滑动导航</title> <meta name="keywords"
-
基于jquery的跟随屏幕滚动代码
那么这是怎么实现的呢?本文将引用乌徒帮的跟随屏幕滚动代码,对此效果做详解. 一.原始代码 下面是乌徒帮的跟随屏幕滚动代码,它的作用域为乌徒帮网页两侧的边栏,以及双击屏幕后的右侧隐藏栏. 复制代码 代码如下: var $catalogueOffsetTop = $('aside#catalogue').offset().top; var $archiveOffestTop = $('aside#archive').offset().top; var $archiveOffestLeft = $('
-
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实现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实现的提示浮层跟随鼠标移动
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实现跟随鼠标运动图层效果的方法
本文实例讲述了jQuery实现跟随鼠标运动图层效果的方法.分享给大家供大家参考.具体分析如下: 一.基本目标 写一个跟随鼠标运动的图层, 图层中显示当前鼠标的位置, 如下图所示: 此图层之所以使用jQuery,而不是因为javascript,是因为jQuery的代码其便于兼容当前的所有主流的浏览器,至少IE8是没有任何问题的,不用像javascript大段大段的代码都用到兼容性上面了. 二.制作过程 本次实验的核心是jquery里面的mousemove事件, 鼠标移动则触发. 代码如下: 复制代
-
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鼠标悬浮链接弹出跟随图片实例代码
本文章介绍了一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等,下面是代码实例: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>我们</title> <style type="text/css"> body{ margin:0
-
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的一个简单的鼠标跟随提示效果
1.效果如图 2.实现思路 1 鼠标移入标题(这里是<a>标签) 创建一个div,div的内容为鼠标位置的文本 将创建好的div加到文档中 为提示层设置位置 2 鼠标移出标题 移除div 3 当鼠标在标题内移动时 同样添加div效果 3.JQuery实现代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="t
随机推荐
- windows下安装mongodb以及node.js连接mongodb实例
- tomcat中Servlet的工作机制详细介绍
- $()JS小技巧
- js中常用的Tab切换效果(推荐)
- 用javascript获得地址栏参数的两种方法
- 怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
- 一个简单实现多条件查询的例子
- PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
- C#浅拷贝和深拷贝实例解析
- mysql常用日期时间/数值函数详解(必看)
- 关于function类中定义变量this的简单说明
- 详解webpack和webpack-simple中如何引入css文件
- 浅谈idea live template高级知识_进阶(给方法,类,js方法添加注释)
- jQuery EasyUI API 中文文档 - ComboGrid 组合表格
- 详解webpack 如何集成第三方js库
- 浅谈javascript中return语句
- Android学习教程之高仿安卓微信6.0(2)
- java长整除问题浅谈
- Nginx服务器下防盗链的方法介绍
- C++ 数据结构链表的实现代码