jQuery写的鼠标经过放大图片效果

时间：2013-08-27 11:17 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

jQuery写的鼠标经过放大图片效果

<!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" />
<meta name="keywords" content="JS代码,鼠标经过放大图片效果,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为鼠标经过放大图片效果，属于站长常用代码，更多鼠标经过放大图片效果代码请访问源码搜藏JS代码频道。" />
<title>鼠标经过放大图片效果_源码搜藏</title>
<link rel="stylesheet" href="css/lrtk.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<style type="text/css">

#featured-wrap {
position: relative;
width: 592px;
height: 96px;
margin: 0 auto;
}

#featured-content {
overflow: hidden;
}

#featured-content a {
float: left;
margin: 0 5px;
}

#featured-content a img {
border: 1px solid #888;
padding: 3px;
vertical-align: top;
}

#featured-preview {
position: absolute;
top: -64px;
left: 0;
z-index: 90;
display: none;
overflow: hidden;
width: 320px;
height: 217px;
}

#featured-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 100;
}

#featured-overlay div {
float: left;
cursor: e-resize;
background: red;
display: none;
width: 148px;
height: 96px;
}

</style>
<script type="text/javascript">

function showPreview(event) {
$("#featured-preview").show();
};

function hidePreview(event) {
$("#featured-preview").hide();
};

function updatePreview(index) {
$("#featured-preview img").hide().eq( index ).show();
};

function movePreview(event) {
var content_position = $("#featured-content").offset();

$("#featured-preview").css("left", event.pageX - content_position.left - 160);
};

$(document).ready(function() {
var content_els = $("#featured-content a");
var overlay_wrap = $("#featured-overlay");
var overlay_els = $("div", overlay_wrap)

overlay_els
.css('opacity', 0)
.mousemove( movePreview )
.mouseenter(function() {
updatePreview( overlay_els.index( this ) );
})
.click(function() {
window.location.href = content_els.eq( overlay_els.index( this ) ).attr("href");
})
.show();

overlay_wrap
.mouseenter( showPreview )
.mouseleave( hidePreview );

});
</script>
</head>
<body>
<div id="content">
<h1>鼠标经过放大图片效果（jQuery）</h1>
<hr />

<div id="featured-wrap">
<div id="featured-content">
<a href="http://www.codesocang.com/"><img alt="Jardines" src="images/2_s.jpg" /></a>
<a href="http://101.es/"><img alt="101 - Cientouno" src="images/1_s.jpg" /></a>
<a href="http://www.codesocang.com/"><img alt="Mission Bicycle Company" src="images/3_s.jpg" /></a><a href="http://codesocang.com/"><img alt="Bet Your Followers" src="images/5_s.jpg" /></a>
</div>
<div id="featured-preview">
<img alt="Jardines" src="images/2_b.jpg" />
<img alt="101 - Cientouno" src="images/1_b.jpg" />
<img alt="Mission Bicycle Company" src="images/3_b.jpg" />
<img alt="Bet Your Followers" src="images/5_b.jpg" />
</div>
<div id="featured-overlay">
<div></div><div></div><div></div><div></div>
</div>
</div>

</div>

<div style="text-align:center">
<p>来源：<a href="http://www.codesocang.com/" target="_blank">源码搜藏</a>　代码整理：<a href="http://www.codesocang.com/" target="_blank">源码搜藏</a>　感谢：<a href="http://www.iseedy.com/" target="_blank">爱看电影网</a></p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>

</div>
</body>
</html>