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


复制代码 代码如下:

<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>



相关阅读:
asp.net 中将表单提交到另一页 Code-Behind(代码和html在不同的页面)
MySQL数据库字符集的出错故障
PHP数组 为文章加关键字连接 文章内容自动加链接
MySQL企业数据库前景分析
使用Div+Css进行网页布局的11个好处
开源空间:关于Linux下时间编程的问题
php smarty模版引擎中的缓存应用
关于图片按比例自适应缩放的js代码
超文本链接指针
php中的时间处理
PHP5中的时间相差8小时的解决办法
oracle和sql server的一些保留关键字
DNS专题(3)---域名服务器的类型③
Linux下玩转暴力破解 几款经典破解软件介绍
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4