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中的双感叹号判断
Nov 11 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
JavaScript实现异步图像上传功能
Jul 12 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 Javascript
vue实现前端分页完整代码
Jun 17 Javascript
vue中使用vue-pdf的方法详解
Sep 05 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
php中数据的批量导入(csv文件)
2006/10/09 PHP
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
python多重继承新算法C3介绍
2014/09/28 Python
python处理大数字的方法
2015/05/27 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
会计专业毕业生自荐信范文
2013/12/20 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
获奖感言怎么写
2015/07/31 职场文书