ASP.NET中引入JQuery实现图片放大功能

之前无聊时候看到凡客（http://www.vancl.com/StyleDetail_8774_0043061_0/YueKongShengHuoFanBuXiuXianXie.html?ref=sr_1_1_5fcb425eb7bb4e0a891b763471ee9604） 鼠标悬浮到商品上面 ，显示商品高清样图的功能，一直想做一个，由于工作很忙，一直没有实践。恰好最近项目也有用到这个功能，所以就借此时间做了一个Demo.希望大家多多指教.





页面所需样式以及涉及到的Jquery插件

<mce:script src="../js/jquery-1.5.js" mce_src="js/jquery-1.5.js" type="text/javascript"></mce:script>
<mce:script src="../js/jquery.jqzoom-core.js" mce_src="js/jquery.jqzoom-core.js" type="text/javascript"></mce:script>
<link rel="stylesheet" href="../css/jquery.jqzoom.css" mce_href="css/jquery.jqzoom.css" type="text/css">
<mce:style type"text/css"><!--
body{margin:0px;padding:0px;font-family:Arial;}
a img,:link img,:visited img { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline: none; }
*{margin:0;padding:0;}
p, blockquote, dd, dt{margin:0 0 8px 0;line-height:1.5em;}
fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}
fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}
dl dd{margin:0px;}
dl dt{}
.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
.clearfix{display:block;zoom:1}

ul#thumblist{display:block;}
ul#thumblist li{float:left;margin-right:2px;list-style:none;}
ul#thumblist li a{display:block;border:1px solid #CCC;}
ul#thumblist li a.zoomThumbActive{
    border:1px solid red;
}
.jqzoom{
	text-decoration:none;
	float:left;
}
--></mce:style><style type"text/css" mce_bogus="1">body{margin:0px;padding:0px;font-family:Arial;}
a img,:link img,:visited img { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline: none; }
*{margin:0;padding:0;}
p, blockquote, dd, dt{margin:0 0 8px 0;line-height:1.5em;}
fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}
fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}
dl dd{margin:0px;}
dl dt{}
.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
.clearfix{display:block;zoom:1}

ul#thumblist{display:block;}
ul#thumblist li{float:left;margin-right:2px;list-style:none;}
ul#thumblist li a{display:block;border:1px solid #CCC;}
ul#thumblist li a.zoomThumbActive{
    border:1px solid red;
}
.jqzoom{
	text-decoration:none;
	float:left;
}</style>
<mce:script type="text/javascript"><!--
$(document).ready(function() {
	$('.jqzoom').jqzoom({
            zoomType: 'reverse',
            lens:true,
            preloadImages: false,
            alwaysOn:false
        });
	$('.jqzoom').jqzoom();
});
// --></mce:script>

页面前台：



注：此处涉及到的 控件 标签 如：<a>,完全可以给其添加runat="server"标识成为服务器控件，可以在后台动态添加链接，以及标题。

<div class="clearfix" id="content" style="margin-top:100px;margin-left:350px; height:500px;width:500px;" >
    <div class="clearfix">
        <a href="imgProd/triumph_big1.jpg" mce_href="imgProd/triumph_big1.jpg" class="jqzoom" rel='gal1'  title="triumph" >
            <img src="imgProd/triumph_small1.jpg" mce_src="imgProd/triumph_small1.jpg"  title="triumph"  style="border: 4px solid #666;" mce_style="border: 4px solid #666;">
        </a>
	<select style="position:absolute;left:800px;top:120px;"><option>test ie6</option></select>
    </div>
	<br/>
        <div class="clearfix" >
	<ul id="thumblist" class="clearfix" >
		<li><a class="zoomThumbActive" href="javascript:void(0);" mce_href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small1.jpg',largeimage: './imgProd/triumph_big1.jpg'}"><img src="imgProd/thumbs/triumph_thumb1.jpg" mce_src="imgProd/thumbs/triumph_thumb1.jpg"></a></li>
		<li><a href="javascript:void(0);" mce_href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small2.jpg',largeimage: './imgProd/triumph_big2.jpg'}"><img src="imgProd/thumbs/triumph_thumb2.jpg" mce_src="imgProd/thumbs/triumph_thumb2.jpg"></a></li>
		<li><a  href="javascript:void(0);" mce_href="javascript:void(0);" rel="{gallery: 'gal1', smallimage: './imgProd/triumph_small3.jpg',largeimage: './imgProd/triumph_big3.jpg'}"><img src="imgProd/thumbs/triumph_thumb3.jpg" mce_src="imgProd/thumbs/triumph_thumb3.jpg"></a></li>
	</ul>
	</div>
</div>

效果图如下：





如有不足，请大家多多指教. 最后希望对大家有帮助 谢谢！