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 相关文章推荐
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
JScript实现表格的简单操作
Aug 15 Javascript
图文详解vue框架安装步骤
Feb 12 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原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
2009/11/26 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
python全局变量引用与修改过程解析
2020/01/07 Python
Python之Django自动实现html代码(下拉框,数据选择)
2020/03/13 Python
python实现简单文件读写函数
2021/02/25 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
医药专业推荐信
2013/11/15 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
员工年终考核评语
2014/12/31 职场文书
放弃继承权公证书
2015/01/23 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫
在Python 中将类对象序列化为JSON
2022/04/06 Python