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

<!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>
阅读更多
下一篇前端
博主设置当前文章不允许评论。

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

qq_15253407 qq_15253407

2016-07-11 16:02:53

阅读数:2978

没有更多推荐了,返回首页

关闭
关闭