鼠标悬停图片放大效果显示

最新推荐文章于 2024-05-20 11:38:15 发布

小哥哥小哥哥

最新推荐文章于 2024-05-20 11:38:15 发布

阅读量2.4k

点赞数 3

文章标签：鼠标悬停图片放大效果显示

<!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>
<style type="text/css">
/*图库样式*/
#gallery {
width:460px;
height: 270px;
margin: 0 auto;
padding: 10px;
background: #383131;
}

ul {
list-style-type: none;
position: absolute;
width: 460px;
}

#gallery ul li {
float: left;
margin: 10px;
background: white;
height: 100px;
width: 100px;
}

#gallery ul li:hover {
border: 3px solid white;
margin: 7px;
cursor: pointer;
}

#gallery ul li img{
height: 100px;
width: 100px;
}
/* 工具提示的样式 */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>

<script type="text/javascript" src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title; //得到当前链接的titl，即标题
this.title = "";
var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
var tooltip = "<div id='tooltip'> "+
"<img src='"+ this.href +"' alt='放大提示'/>"+
imgTitle+"</div>"; //新建一个id为tooltip的div元素
$("body").append(tooltip); //元素内部包含一个img，用来显示图片并且显示标题，追加到body区
$("#tooltip") //更改tooptip的顶部和左侧位置
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //使用show函数快速显示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //当鼠标移出时，从body区删除该div元素
}).mousemove(function(e){ //当鼠标移动时，调整div的位置位于鼠标箭头的下方
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
</script>
</head>

<body>

<div id="gallery">
<ul>

<li><a href="images/sample1.jpg" class="tooltip" title="喜鹊看花"><img src="images/sample1.jpg"/></a></li>
<li><a href="images/sample2.jpg" class="tooltip" title="繁花朵朵"><img src="images/sample2.jpg"/></a></li>
<li><a href="images/sample3.jpg" class="tooltip" title="姹紫嫣红"><img src="images/sample3.jpg"/></a></li>
<li><a href="images/sample5.jpg" class="tooltip" title="含苞怒放"><img src="images/sample5.jpg"/></a></li>
</ul>
</div>
</body>
</html>

小哥哥小哥哥

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
鼠标悬停图片放大效果显示

鼠标悬停图片放大提示效果/*图库样式*/#gallery {width:460px;height: 270px;margin: 0 auto;padding: 10px;background: #383131;}ul {list-style-type: none;position: absolute;width: 460px;}#
复制链接

扫一扫