页面所需样式以及涉及到的Jquery插件
1 <mce:script src="../js/jquery-1.5.js" mce_src="js/jquery-1.5.js" type="text/javascript"></mce:script>
2<mce:script src="../js/jquery.jqzoom-core.js" mce_src="js/jquery.jqzoom-core.js" type="text/javascript"></mce:script>
3<link rel="stylesheet" href="../css/jquery.jqzoom.css" mce_href="css/jquery.jqzoom.css" type="text/css">
4<mce:style type"text/css"><!--
5body{margin:0px;padding:0px;font-family:Arial;}
6a img,:link img,:visited img { border: none; }
7table { border-collapse: collapse; border-spacing: 0; }
8:focus { outline: none; }
9*{margin:0;padding:0;}
10p, blockquote, dd, dt{margin:0 0 8px 0;line-height:1.5em;}
11fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}
12fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}
13dl dd{margin:0px;}
14dl dt{}
15.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
16.clearfix{display:block;zoom:1}
17
18ul#thumblist{display:block;}
19ul#thumblist li{float:left;margin-right:2px;list-style:none;}
20ul#thumblist li a{display:block;border:1px solid #CCC;}
21ul#thumblist li a.zoomThumbActive{
22 border:1px solid red;
23}
24.jqzoom{
25 text-decoration:none;
26 float:left;
27}
页面前台:
注:此处涉及到的 控件 标签 如:<a>,完全可以给其添加runat="server"标识成为服务器控件,可以在后台动态添加链接,以及标题。
1 <div class="clearfix" id="content" style="margin-top:100px;margin-left:350px; height:500px;500px;" >
2 <div class="clearfix">
3 <a href="imgProd/triumph_big1.jpg" mce_href="imgProd/triumph_big1.jpg" class="jqzoom" rel='gal1' title="triumph" >
4 <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;">
5 </a>
6 <select style="position:absolute;left:800px;top:120px;"><option>test ie6</option></select>
7 </div>
8 <br/>
9 <div class="clearfix" >
10 <ul id="thumblist" class="clearfix" >
11 <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>
12 <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>
13 <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>
14 </ul>
15 </div>
16 </div>
js:
<script type="type/javascript">
$(document).ready(function() {
var options = {
zoomWidth: 400,
zoomHeight: 400,
xOffset: 10,
yOffset: 0,
position: 'left'
};
$('.jqzoom').jqzoom(options);
});
</script>
效果图如下: