jQuery鼠标悬停显示大图特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标悬停显示大图特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="imagetoolbar" content="no" />
	<title>Fancy Hover Effect | Demo page</title>
	<link rel="stylesheet" href="style.css" />
	<script type="text/javascript" src="jquery-1.9.1.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>Fancy Hover Effect</h1>
      <div id="featured-wrap">
    <div id="featured-content"> <a href="#"><img alt="Jardines" src="2_s.jpg" /></a> <a href="#"><img alt="101 - Cientouno" src="1_s.jpg" /></a> <a href="#"><img alt="Mission Bicycle Company" src="3_s.jpg" /></a><a href="#"><img alt="Bet Your Followers" src="5_s.jpg" /></a> </div>
    <div id="featured-preview"> <img alt="Jardines" src="2_b.jpg" /> <img alt="101 - Cientouno" src="1_b.jpg" /> <img alt="Mission Bicycle Company" src="3_b.jpg" /> <img alt="Bet Your Followers" src="5_b.jpg" /> </div>
    <div id="featured-overlay">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
  </div>
</div>
</body>
</html>

CSS代码(style.css):

body{background:#EEE;font-family:"Trebuchet MS",Verdana,Arial,sans-serif;font-size:14px;line-height:1.6;}
#content{width:750px;margin:50px auto;padding:20px;background:#FFF;border:1px solid #CCC;}
h1{margin:0;}
hr{border:none;height:1px;line-height:1px;background:#CCC;margin-bottom:20px;padding:0;}
p{margin:0;padding:7px 0;}
.clear{clear:both;line-height:1px;font-size:1px;}
a{outline-color:#888;}

附件:下载该文件资源,减少时间成本(增值服务)