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 多浏览器 事件大全
Mar 23 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 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 中文和编码判断代码
2010/05/16 PHP
PHP 事件机制(2)
2011/03/23 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
python中的字典使用分享
2016/07/31 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
python新手学习可变和不可变对象
2020/06/11 Python
Django如何实现防止XSS攻击
2020/10/13 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
电焊工工作岗位职责
2014/02/06 职场文书
《十六年前的回忆》教学反思
2014/02/14 职场文书
企业授权委托书范本
2014/09/22 职场文书
安徽导游词
2015/02/12 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
Python的property属性详细讲解
2022/04/11 Python
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL