您的位置：首页 > 其它

鼠标放到图片上图片会有图片提示的两个方法

2017-02-23 23:26 253 查看

法一：<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片提示</title>

<script src="../js/jquery-3.1.1.js" type="text/javascript"></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;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
}
.clearfix{
clear: both;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
<script type="text/javascript">
$(function(){
var $img;
$("a[class='tooltip']").mouseover(function(event){
$(this).removeAttr("title")
//获取图片href
var $href=$(this).attr("href");
//创建一张图片
$img=$("<img id='tooltip' src='"+$href+"'></img>");
//3.把图片追加到body
$("body").append($img);
//$img.show();
$img.css({
"left":event.pageX+5,
"top":event.pageY+10,
}).show(500);
}).mouseout(function(event){
$img.remove();
}).mousemove(function(event){

})
});
</script>

</head>
<body>
<h3>有效果：</h3>
<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>
<div class="clearfix"></div>
</ul>

<br/><br/><br/><br/>
<br/><br/><br/><br/>

<h3>无效果：</h3>
<ul>
<li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
</ul>
</body>
</html>
法二：

<script type="text/javascript">
$(function(){
$(".tooltip").mouseover(function(event){
var $href=$(this).data("mydata");
if($href==null){
$(this).data("mydata",$(this).attr("href"));
$href=$(this).data("mydata");
$(this).removeAttr("title");
}
var $myimg=$("<img id='tooltip' src='"+$href+"'></img>");
$("body").append($myimg);
$myimg.css({
"top":event.pageY+15,
"left":event.pagex+5
}).show(100);
}).mouseout(function(){
$("#tooltip").remove();
}).mousemove(function(){
$("#tooltip").css({
"top":event.pageY+15,
"left":event.pagex+5
}).show(100);
})
});
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航