jquery实现网站超链接和图片提示效果


Posted in Javascript onMarch 21, 2013

超链接提示效果:

<script type="text/javascript"> 
//<![CDATA[ 
$(function(){ 
var x = 10; 
var y = 20; 
$("a.tooltip").mouseover(function(e){ 
this.myTitle = this.title; 
this.title = ""; 
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素 
$("body").append(tooltip); //把它追加到文档中 
$("#tooltip") 
.css({ 
"top": (e.pageY+y) + "px", 
"left": (e.pageX+x) + "px" 
}).show("fast"); //设置x坐标和y坐标,并且显示 
}).mouseout(function(){ 
this.title = this.myTitle; 
$("#tooltip").remove(); //移除 
}).mousemove(function(e){ 
$("#tooltip") 
.css({ 
"top": (e.pageY+y) + "px", 
"left": (e.pageX+x) + "px" 
}); 
}); 
}) 
//]]> 
</script>

图片提示效果:
<script type="text/javascript"> 
//<![CDATA[ 
$(function(){ 
var x = 10; 
var y = 20; 
$("a.tooltip").mouseover(function(e){ 
this.myTitle = this.title; 
this.title = ""; 
var imgTitle = this.myTitle? "<br/>" + this.myTitle : ""; 
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素 
$("body").append(tooltip); //把它追加到文档中 
$("#tooltip") 
.css({ 
"top": (e.pageY+y) + "px", 
"left": (e.pageX+x) + "px" 
}).show("fast"); //设置x坐标和y坐标,并且显示 
}).mouseout(function(){ 
this.title = this.myTitle; 
$("#tooltip").remove(); //移除 
}).mousemove(function(e){ 
$("#tooltip") 
.css({ 
"top": (e.pageY+y) + "px", 
"left": (e.pageX+x) + "px" 
}); 
}); 
}) 
//]]> 
</script>
Javascript 相关文章推荐
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
js事件(Event)知识整理
Oct 11 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
js去除浏览器默认底图的方法
Jun 08 Javascript
js电话号码验证方法
Sep 28 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
jquery 表格的增行删行实现思路
Mar 21 #Javascript
杨氏矩阵查找的JS代码
Mar 21 #Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 #Javascript
js禁止document element对象选中文本实现代码
Mar 21 #Javascript
JS获取并操作iframe中元素的方法
Mar 21 #Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 #Javascript
js 验证密码强弱的小例子
Mar 21 #Javascript
You might like
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
文本加密解密
2006/06/23 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
Cython 三分钟入门教程
2009/09/17 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
详解python读取image
2019/04/03 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
TensorFlow通过文件名/文件夹名获取标签,并加入队列的实现
2020/02/17 Python
自学python用什么系统好
2020/06/23 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
《听鱼说话》教学反思
2014/02/15 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
人力资源作业细则
2014/03/03 职场文书
庆元旦活动总结
2014/07/09 职场文书
个人批评与自我批评
2014/10/15 职场文书
教师岗位职责
2015/02/03 职场文书