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实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
javascript 闭包疑问
Dec 30 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 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开发者的10个技巧
2011/02/25 PHP
php编写一个简单的路由类
2011/04/13 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
js 作用域和变量详解
2017/02/16 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
2019/04/08 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
python使用scrapy解析js示例
2014/01/23 Python
Python闭包实现计数器的方法
2015/05/05 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
找工作最新求职信
2013/12/22 职场文书
物理专业本科生自荐信
2014/01/30 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
学术研讨会主持词
2015/07/04 职场文书
《绝招》教学反思
2016/02/20 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python