JS商品图片局部放大效果

<!-- CSS代码开始 -->
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0}
ul,ol,li{list-style:none}
input,button{margin:0;font-size:12px;vertical-align:middle}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; text-align:center;margin:0 auto}
table{border-collapse:collapse;border-spacing:0}
a{color:#333;text-decoration:none}
a:hover{color:#ef9b11;text-decoration:underline}
.box{width:620px;margin:20px auto}
.left-pro{width:572px; padding:20px 10px;border:1px solid #ccc;text-align:left;float:left}
.left-pro .t1{width:100px;float:left}
.left-pro .t2{width:352px;text-indent:0;float:left;padding-left:10px}
.left-pro .t2 img{text-indent:0;}
#showArea img{cursor:pointer;display:block;margin-bottom:5px;width:68px;padding:1px;border:1px solid #ccc;height:68px;float:left}
#main_img{cursor:pointer;display:block}
#gotop{cursor:pointer;display:block;margin-left:9px}
#gobottom{cursor:pointer;display:block;margin-left:9px}
#showArea{height:379px;margin:10px;overflow:hidden}
<!-- CSS代码结束 -->

<!-- HTML代码开始 -->
<div class="box">
	<div class="left-pro">
		<div class="t1">
			<img src="images/gotop.gif" id="gotop" />
			<div id="showArea">
				<a href="images/img01.jpg" rel="zoom1" rev="images/img01.jpg"><img src="images/img01s.jpg" /></a>
				<a href="images/img02.jpg" rel="zoom1" rev="images/img02.jpg"><img src="images/img02s.jpg" /></a>
				<a href="images/img03.jpg" rel="zoom1" rev="images/img03.jpg"><img src="images/img03s.jpg" /></a>
				<a href="images/img01.jpg" rel="zoom1" rev="images/img01.jpg"><img src="images/img01s.jpg" /></a>
				<a href="images/img02.jpg" rel="zoom1" rev="images/img02.jpg"><img src="images/img02s.jpg" /></a>
				<a href="images/img03.jpg" rel="zoom1" rev="images/img03.jpg"><img src="images/img03s.jpg" /></a>
				<a href="images/img01.jpg" rel="zoom1" rev="images/img01.jpg"><img src="images/img01s.jpg" /></a>
				<a href="images/img02.jpg" rel="zoom1" rev="images/img02.jpg"><img src="images/img02s.jpg" /></a>
			</div>
			<img src="images/gobottom.gif" id="gobottom"  />
		</div>
		<div class="t2">
		<a href="images/img01.jpg" id="zoom1" class="MagicZoom MagicThumb"><img src="images/img01.jpg" id="main_img" class="main_img" style="width:400px; height:400px;" /></a>
		</div>
	</div>
</div>
<div style="clear:both;"></div>
<script type="text/javascript" src="js/getElementById.js"></script>
<!-- 代码结束 -->

```javascript
在这里插入代码片

function jQuery(e) {return document.getElementById(e);}
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp(’\b’+cl+’\b’);
var elem = this.getElementsByTagName(’*’);
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}
var MyMar;
var speed = 1; //速度，越大越慢
var spec = 1; //每次滚动的间距, 越大滚动越快
var ipath = ‘images/’; //图片路径
var thumbs = document.getElementsByClassName(‘thumb_img’);
for (var i=0; i<thumbs.length; i++) {
thumbs[i].onmouseover = function () {jQuery(‘main_img’).src=this.rel; jQuery(‘main_img’).link=this.link;};
thumbs[i].onclick = function () {location = this.link}
}
jQuery(‘main_img’).onclick = function () {location = this.link;}
jQuery(‘gotop’).onmouseover = function() {this.src = ipath + ‘gotop2.gif’; MyMar=setInterval(gotop,speed);}
jQuery(‘gotop’).onmouseout = function() {this.src = ipath + ‘gotop.gif’; clearInterval(MyMar);}
jQuery(‘gobottom’).onmouseover = function() {this.src = ipath + ‘gobottom2.gif’; MyMar=setInterval(gobottom,speed);}
jQuery(‘gobottom’).onmouseout = function() {this.src = ipath + ‘gobottom.gif’; clearInterval(MyMar);}
function gotop() {jQuery(‘showArea’).scrollTop-=spec;}
function gobottom() {jQuery(‘showArea’).scrollTop+=spec;}

在这里插入代码片

![图片放大效果](https://img-blog.csdnimg.cn/20190926111402616.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dKXzE5OTc=,size_16,color_FFFFFF,t_70)