jQuery实现图片信息的浮动显示实例代码


Posted in Javascript onAugust 28, 2013

如图:
jQuery实现图片信息的浮动显示实例代码 

<html> 
<head> 
<meta charset="utf-8"/> 
<style> 
li{list-style:none;float:left;margin-right:10px;border:1px solid #AAAAAA} 
#tooltip{position:absolute;} 
</style> 
<script type="text/javascript" src="./script/jquery-1.4.2.min.js"></script> 
<script> 
$(function(){ 
var x = 10; 
var y = 20; 
$("a.tooltip").hover(function(){ 
var title = this.title; 
$("a.tooltip").attr("newTitle",this.title); 
this.title = ''; 
var $div = $("<div id='newTip'><img src='"+this.href+"'/><br/>"+this.newTitle+"</div>"); 
$("body").append($div); 
$div.css({"position":"absolute","background":"silver"}).show("fast"); 
},function(){ 
this.title = this.newTitle; 
$("#newTip").remove(); 
}).mousemove(function(e){ var $div = $("#newTip").css({"left":(e.pageX+x)+'px',"top":(e.pageY+y)+'px'}).show("fast"); 
}); 
}) 
</script> 
</head> 
<body> 
<ul> 
<li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> 
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> 
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> 
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> 
</ul> 
</body> 
</html>
Javascript 相关文章推荐
Document 对象的常用方法
Jul 31 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
JS中Attr的用法详解
Oct 09 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
JQuery筛选器全系列介绍
Aug 27 #Javascript
HTML Color Picker(js拾色器效果)
Aug 27 #Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 #Javascript
javascript:void(0)使用探讨
Aug 27 #Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 #Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 #Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 #Javascript
You might like
PHP+DBM的同学录程序(3)
2006/10/09 PHP
php at(@)符号的用法简介
2009/07/11 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
javascript call和apply方法
2008/11/24 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
Angular实现响应式表单
2017/08/04 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
js实现选项卡效果
2020/03/07 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
学python需要去培训机构吗
2020/07/01 Python
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
Java的基础面试题附答案
2016/01/10 面试题
门卫班长岗位职责
2013/12/15 职场文书
酒店总经理欢迎词
2014/01/08 职场文书
《日月潭》教学反思
2014/02/28 职场文书
企业宣传方案
2014/03/04 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
先进个人申报材料
2014/12/30 职场文书
继续教育个人总结
2015/03/03 职场文书