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 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
图书管理程序(三)
2006/10/09 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
Python base64编码解码实例
2015/06/21 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python编写登陆接口的方法
2017/07/10 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
Python语言的变量认识及操作方法
2018/02/11 Python
python实现黑客字幕雨效果
2018/06/21 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
基于python操作ES实例详解
2019/11/16 Python
python实现简单图书管理系统
2019/11/22 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
高三自我鉴定范文
2013/10/19 职场文书
电台实习生求职信
2014/02/25 职场文书
品德评语大全
2014/05/05 职场文书
婚纱店策划方案
2014/05/22 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
新闻通讯稿模板
2015/07/22 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书