您的位置：首页 > 其它

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

2016-07-11 16:02 537 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  图片 鼠标
相关文章推荐
新的分享
章节导航