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

更新时间：2010年02月11日 12:21:23 作者：

提示浮层跟随鼠标移动(jquery版)

jquery实现：

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery实现简单文字提示</title> <style type="text/css"> #preview{border:1px solid #cccccc; background:#9900CC;color:#fff; padding:5px; display:none; position:absolute;} </style> <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.js"></script> </head> <body> <a class="preview">把鼠标放到这里1</a> <br><br><br> <a class="preview">把鼠标放到这里2</a> <br><br><br> <a class="preview">把鼠标放到这里3</a> <br><br><br> <a class="preview">把鼠标放到这里4</a> <br><br><br> <a class="preview">把鼠标放到这里5</a> <script type="text/javascript"> this.imagePreview = function(){ /* CONFIG */ xOffset = 10; yOffset = 30; // 可以自己设定偏移值 /* END CONFIG */ $("a.preview").hover(function(e){ $("body").append("<div id='preview'>jquery实现简单文字提示</div>"); $("#preview") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px") .fadeIn("slow"); }, function(){ $("#preview").fadeOut("fast"); }); $("a.preview").mousemove(function(e){ $("#preview") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px"); }); }; // 页面加载完执行 $(document).ready(function(){ imagePreview(); }); </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

jquery等待效果示例
这篇文章主要介绍了jquery等待效果示例,需要的朋友可以参考下
2014-05-05
jQuery操作选中select下拉框的值代码实例
这篇文章主要介绍了jQuery操作选中select下拉框的值代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-02-02
jquery如何改变html标签的样式(两种实现方法)
对于如何修饰html标签，这对于js来说，可以通过setAttribute来设置标签的属性，通过getAttribute来得到标签的属性，而在jq中当然也可以实现类似的功能，方法上肯定比js要简化多了,接下来介绍实现方法，感兴趣的朋友可以了解下
2013-01-01
JQuery 学习笔记选择器之三
JQuery选择器之三首先老规矩提供我学习用的例子
2009-07-07
jquery操作ID带有变量的节点实例
下面小编就为大家带来一篇jquery操作ID带有变量的节点实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-12-12
jquery中加载图片自适应大小主要实现代码
当图片较小时显示实际大小，当图片超过div 大小时图片自动适应div的大小，下面有个示例，大家可以参考下，希望对大家有所帮助
2013-08-08
jQuery实现每日秒杀商品倒计时功能
这篇文章主要介绍了 jQuery实现每日秒杀商品倒计时功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-09-09
使用jQuery的ajax方法向服务器发出get和post请求的方法
这篇文章主要介绍了使用jQuery的ajax方法向服务器发出get和post请求的方法,需要的朋友可以参考下
2017-01-01
jQuery的实现原理的模拟代码 -2 数据部分
在 jQuery 中，可以对每一个 DOM 对象保存私有的数据。
2010-08-08
jQuery为DOM动态追加事件的方法
下面小编就为大家带来一篇jQuery为DOM动态追加事件的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-02-02