jquery鼠标移到图上去变大

weixin_30709061

于 2019-07-23 04:44:14 发布

阅读量582

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/leekenky/p/4171867.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery练习</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
ul{overflow: hidden}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
}

/* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
<script>
$(function(){
$(".tooltip").hover(
function(e){
$("body").append("<div id='tooltip'><img src="+$(this).attr("href")+"></div>")
$("#tooltip").css({
left: e.pageX+20+"px",
top: e.pageY+20+"px"
}).show("fast")
},
function(){
$("#tooltip").remove()
}
).mousemove(function(e){$("#tooltip").css({
left: e.pageX+20+"px",
top: e.pageY+20+"px"
})})
})
</script>
</head>
<body>
<h3>有效果：</h3>
<ul>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_1_big.jpg" class="tooltip" title=""><img src="http://www.fgm.cc/learn/lesson5/img/shirt_1.jpg" alt="苹果 iPod"></a></li>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_2_big.jpg" class="tooltip" title="苹果 iPod nano"><img src="http://www.fgm.cc/learn/lesson5/img/shirt_2.jpg" alt="苹果 iPod nano"></a></li>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_3_big.jpg" class="tooltip" title="苹果 iPhone"><img src="http://www.fgm.cc/learn/lesson5/img/shirt_3.jpg" alt="苹果 iPhone"></a></li>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_4_big.jpg" class="tooltip" title="苹果 Mac"><img src="http://www.fgm.cc/learn/lesson5/img/shirt_4.jpg" alt="苹果 Mac"></a></li>
</ul>
<h3>无效果：</h3>
<ul>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_1_big.jpg" title="苹果 iPod"><img src="http://www.fgm.cc/learn/lesson5/img/shirt_1.jpg" alt="苹果 iPod"></a></li>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_2_big.jpg" title="苹果 iPod nano"><img src="http://www.fgm.cc/learn/lesson5/img/shirt_2.jpg" alt="苹果 iPod nano"></a></li>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_3_big.jpg" title="苹果 iPhone"><img src="http://www.fgm.cc/learn/lesson5/img/shirt_3.jpg" alt="苹果 iPhone"></a></li>
<li><a href="http://www.fgm.cc/learn/lesson5/img/shirt_4_big.jpg" title="苹果 Mac"><img src="http://www.fgm.cc/learn/lesson5/img/shirt_4.jpg" alt="苹果 Mac"></a></li>
</ul>
</body>
</html>