锋利的jQuery 第三章章节总结的例子


Posted in Javascript onMarch 23, 2010
<style> 
li{ float:left; list-style:none; padding:3px;} 
img{ border:#CCC 1px solid;} 
#tooltip{ display:none; border:#CCC 1px solid; position:absolute;} 
.img1{ display:block;} 
.div1{ padding:0px; margin:0px; background:#111; color:FFF; font-family:微软雅黑;} 
</style> 
<ul> 
<li><a href="images/apple_1_bigger.jpg" class="tooltip"><img src="images/apple_1.jpg" /></a></li> 
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="第二个产品"><img src="images/apple_2.jpg" /></a></li> 
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="第三个产品"><img src="images/apple_3.jpg" /></a></li> 
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="第四个产品"><img src="images/apple_4.jpg" /></a></li> 
</ul> 
<script> 
var x = 10; 
var y = 10; 
$("a.tooltip").mouseover(function (e) { 
this.myTitle = this.title; 
this.title = ""; 
this.imgTitle = this.myTitle ? this.myTitle : "无title"; 
var tooltip = "<div id='tooltip'><img class='img1' src='" + this.href + "'/><div class='div1'>" + this.imgTitle + "</div></div>" 
$("body").append(tooltip); 
$("#tooltip").css({ 
"top": +(e.pageY + y) + "px", 
"left": +(e.pageX + x) + "px" 
}).show("fast"); 
}).mouseout(function () { 
$("#tooltip").remove(); 
this.title = this.myTitle; 
}) 
</script>
Javascript 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
redux-saga 初识和使用
Mar 10 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery 核心函数以及jQuery对象
Mar 23 #Javascript
jquery easyui的tabs使用时的问题
Mar 23 #Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 #Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 #Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 #Javascript
javascript 多浏览器 事件大全
Mar 23 #Javascript
jQuery $.each的用法说明
Mar 22 #Javascript
You might like
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
php UBB 解析实现代码
2011/11/27 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
node实现定时发送邮件的示例代码
2017/08/26 Javascript
node.js实现微信JS-API封装接口的示例代码
2017/09/06 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
采用怎样的方法保证数据的完整性
2013/12/02 面试题
施工资料员的岗位职责
2013/12/22 职场文书
行政求职信
2014/07/04 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
百年校庆感言
2015/08/01 职场文书
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python