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>
焦点图下载排行
-
2017-03-24
-
2019-06-28
-
2014-03-13
-
2018-07-11
-
2015-02-05
-
2017-03-24
-
2013-08-27
-
2017-03-24
最新文章
-
JQuery手风琴式相册图片特效是一款只需点击图片缩略图即可展开当前的图片
2022-03-15
-
-
Jquery带进度条提示焦点图是一款带进度条提示的图片淡出淡进切换效果代码
2022-03-15
-
2019-06-28
-
2018-07-11
-
2018-05-14
-
2017-03-24
-
2017-03-24
热门源码
