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 相关文章推荐
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
JavaScript异步操作中串行和并行
Nov 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 simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
深入浅析Python传值与传址
2018/07/10 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
python实现视频分帧效果
2019/05/31 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
详解Python实现进度条的4种方式
2020/01/15 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
Python socket处理client连接过程解析
2020/03/18 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
python实现银行账户系统
2021/02/22 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
餐饮主管岗位职责
2013/12/10 职场文书
接受捐赠答谢词
2014/01/27 职场文书
老公给老婆的保证书
2014/04/28 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
MySQL数据库必备之条件查询语句
2021/10/15 MySQL