仿淘宝中鼠标悬浮在某张图片上的时候,北京图像变灰并且不可以编辑,并且在图片上层显示图片,文字或其他信息。实现代码如下:
<!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=gb2312" />
<title>jquery遮罩</title>
<style>
.backimgstyle{
width:300px;
height:300px;
position:fixed;
top:0px;
left:0px;
}
.forwardstyle{
width:50px;
height:40px;
}
div.back-div{
width:300px;
height:300px;
}
div.forward-div{
visibility:hidden;
width:150px;
height:150px;
text-align:center;
position:fixed;
top:70px;
left:70px;
}
.forwardshow{
visibility:visible;
width:150px;
height:150px;
text-align:center;
position:fixed;
top:70px;
left:70px;
opacity:1;
filter:alpha(opacity=100); /*针对IE8之前的版本 */
}
.back{
opacity:0.3;
filter:alpha(opacity=30); /*针对IE8之前的版本 */
disabled:true;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
</head>
<body>
<div class="back-div" id="back-div">
<img src="../2.jpg"/>
</div>
<div class="forward-div" id="forward-div">
<table>
<tr><a href="www.baidu.com"><img src="../2.jpg"/></a></tr><br/><br/>
<tr><a href="www.baidu.com"><img src="../3.jpg"/></a></tr>
</table>
</div>
<script>
$(document).ready(function(){
$("#back-div img").addClass("backimgstyle");
for(var i=0;i<2;i++){
$("#forward-div img").eq(i).addClass("forwardstyle");
}
$("#forward-div").hover(
function () {
$("#back-div").addClass("back");
},
function () {
$(this).removeClass("forward-div");
}
);
$("#back-div").hover(
function () {
$('#forward-div').removeClass("forward-div");//先清除所有选中
$("#forward-div").addClass("forwardshow");
$(this).addClass("back");
},
function () {
$(this).removeClass("back");
$("#forward-div").removeClass("forwardshow");
$("#forward-div").addClass("forward-div");
}
);
});
</script>
</body>
</html>