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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jquery实现的提示浮层跟随鼠标移动

Javascript: jQuery生成asp.net服务器控件的代码; javascript 实现的完全兼容鼠标滚轴缩放图片的代码; JavaScript学习笔记（十七）js 优化; 使用SyntaxHighlighter实现HTML高亮显示代码的方法; javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系; 利用jQuery 实现GridView异步排序、分页的代码; jquery.lazyload 实现图片延迟加载jquery插件; Lazy Load 延迟加载图片的 jQuery 插件; jquery 插件实现图片延迟加载效果代码; javascript小数计算出现近似值的解决办法; jquery1.4后 jqDrag 拖动不可用; jquery 应用代码方便的排序功能; 选择TreeView控件的树状数据节点的JS方法(jquery); jquery 图片Silhouette Fadeins渐显效果; JQuery Dialog(JS 模态窗口,可拖拽的DIV); javascript 同时在IE和FireFox获取KeyCode的代码; js 键盘记录实现(兼容FireFox和IE); javascript 函数速查表; jQuery AnythingSlider滑动效果插件; 经典海量jQuery插件大家可以收藏一下

No. « ‹ 283 284 285 286 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 379 ::

收藏到网摘: n/a

JavaScript Event学习补遗 addEventSimple jQuery 添加/移除CSS类实现代码

提示浮层跟随鼠标移动(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="/upload/tech/20100227/20100227014621_5487315b1286f907165907aa8fc96619.js"></script>
</head>
<body>
<a class="preview">把鼠标放到这里1</a>
<br><br>
<a class="preview">把鼠标放到这里2</a>
<br><br>
<a class="preview">把鼠标放到这里3</a>
<br><br>
<a class="preview">把鼠标放到这里4</a>
<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 全选提示:你可先修改部分代码,再按运行]

JavaScript Event学习补遗 addEventSimple jQuery 添加/移除CSS类实现代码

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

评论 (0) All