您的位置：首页 > Web前端 > JavaScript

js大图预览效果代码

2013-11-06 21:52 232 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=">
<title>this is a test for js</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<style type="text/css">
body {
background:#ccc;
}
ul {
padding:0px;
margin:80 auto;
width:810px;
list-style-type:none;

}
ul li {
float:left;
margin:0px 10px;
}
ul li img {
border:1px solid #aaa;
}
</style>
</head>
<body>
<ul>
<li><a href="images/7-0.jpg" title="meinv7" class="big"><img src="images/7-1.jpg" alt="meinv1" /></a></li>
<li><a href="images/8-0.jpg" title="meinv8" class="big"><img src="images/8-1.jpg" alt="meinv2" /></a></li>
<li><a href="images/10-0.jpg" title="meinv10" class="big"><img src="images/10-1.jpg" alt="meinv3" /></a></li>
<li><a href="images/11-0.jpg" title="meinv11" class="big"><img src="images/11-1.jpg" alt="meinv4" /></a></li>
</ul>
<script type="text/javascript">
$(function(){
var x = 10;
var y = 20;
$("a.big").mouseover(function(e){
this.mytitle = this.title;
this.title = "";
var imgtitle = this.mytitle? "" +this.mytitle : "";
//alert(this.title);
var bigdiv = "<div id='bigdiv' style='position:absolute;border:1px solid pink'><div id='content' style='background:#000;color:#fff;position:absolute;bottom:0px;text-align:center;width:100%;opacity:0.5'>"+imgtitle+"</div><img src='"+this.href+"' alt='产品预览图' /></div>";
$("body").append(bigdiv);
$("#bigdiv").css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast");
}).mouseout(function(){
this.title = this.mytitle;
$("#bigdiv").remove();
}).mousemove(function(e){
$("#bigdiv").css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
</script>
</body>
</html>

本文出自 “一步一步向上爬” 博客，请务必保留此出处http://linchqd.blog.51cto.com/7753012/1321142

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

标签：

相关文章推荐

新的分享

章节导航