JQuery实现一个简单的鼠标跟随提示效果
2016-01-12 11:31
1001 查看
效果体验:http://hovertree.com/texiao/jsstudy/2/
实现思路
1 鼠标移入标题(这里是<a>标签)
创建一个div,div的内容为鼠标位置的文本
将创建好的div加到文档中
为提示层设置位置
2 鼠标移出标题
移除div
3 当鼠标在标题内移动时
同样添加div效果
上面是跟随光标的,这个是居中的:
http://hovertree.com/texiao/jsstudy/2/1.htm
跟随光标完整代码如下:
居中的实现请看:http://hovertree.com/h/bjaf/tishikuang.htm
更多特效: /article/4797642.html
实现思路
1 鼠标移入标题(这里是<a>标签)
创建一个div,div的内容为鼠标位置的文本
将创建好的div加到文档中
为提示层设置位置
2 鼠标移出标题
移除div
3 当鼠标在标题内移动时
同样添加div效果
上面是跟随光标的,这个是居中的:
http://hovertree.com/texiao/jsstudy/2/1.htm
跟随光标完整代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery弹出光标跟随提示框- 何问起</title><base target="_blank" /> <style type="text/css"> #tooltip { position: absolute; border: #333 1PX solid; background: #f7f5d1; padding: 1px; color: #333; display: none; padding: 1px; }a{color:blue} #hovertree,#yestop,#hoverclock{width:789px;margin:20px auto} </style> <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> </head> <body> <div id="hovertree"><a href="http://hovertree.com" class="tooltip" title="何问起首页">何问起首页</a> <a href="http://hovertree.com/texiao/" class="tooltip" title="网页特效库">特效</a></div> <div id="yestop"><a href="http://hovertree.com/h/bjaf/tishikuang.htm" class="tooltip" title="本效果代码">原文</a> <a href="http://hovertree.com/texiao/jsstudy/2/" class="tooltip" title="本效果网址">效果</a> <br /><br /><a href="#" class="tooltip" title="弹出层">test</a> </div> <div id="hoverclock">请把光标在各个链接上面移动,将会弹出跟随光标的提示框。 <br /></div> <script> $(function () { var x = 15; var y = 10; $("a.tooltip").mouseover(function (e) { //当鼠标指针从元素上移入时 this.myTitle = this.title; this.title = ""; var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>"; $("body").append(tooltip); $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast"); }).mouseout(function () { //当鼠标指针从元素上移开时 this.title = this.myTitle; $("#tooltip").remove(); }).mousemove(function (e) { //当鼠标指针从元素上移动时 $("#tooltip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }); }); }); </script> </body> </html>
居中的实现请看:http://hovertree.com/h/bjaf/tishikuang.htm
更多特效: /article/4797642.html
相关文章推荐
- Jquery取得iframe子父元素互相操作的方法
- 7个jQuery最佳实践
- jQuery升级踩坑大全
- jQuery升级踩坑大全
- 如何自己开发一款js或者jquery插件
- 强大实用的jQuery幻灯片插件Owl Carousel
- Jquery学习笔记:事件处理基础介绍
- jquery实现限制textarea输入字数
- jquery插件范例代码
- 使用jquery插件layer代替window.confirm方法
- 使用jquery插件layer代替window.confirm方法
- jQuery fontIconPicker 使用
- jQuery Mobile的初识与使用
- jQuery 处理TextArea
- 原生js和jquery实现图片轮播特效
- 转载 -- jquery easyui datagrid 动态表头 + 嵌套对象属性展示
- 实例详解jQuery Mockjax 插件模拟 Ajax 请求
- jQuery中的事件
- jquery模拟实现鼠标指针停止运动事件
- 实例详解jQuery Mockjax 插件模拟 Ajax 请求