JS 点击小图片出现大图片

Question

 如题。想做出那种产品展示的那个效果。有一个小的图片一点他的大图片就出来。    百度上我看了很多，都不怎么实用。想找一个简单点的。能用就可以。代码不要写的太多

Answer 1

<a href="big.jpg" target=_blank><img src='small.jpg'/></a>

Answer 2

http://js.alixixi.com/a/2016372263094.shtml这是放大镜特效

Answer 3

<script type="text/javascript">
window.onload=function(){
   var dd=document.getElementById("dd").getElementsByTagName("img");
    for(var i=0;i<dd.length;i++)
 {
   dd[i].onclick=function(){
     document.getElementById("ff").style.display="block";
    document.getElementById("ff").getElementsByTagName("img")[0].src=this.src;
   }
 }
}
</script>
<div id="dd">
<img src="1.jpg" style="width:55px;height:55px"></img>
<img src="2.jpg" style="width:55px;height:55px"></img>
<img src="3.jpg" style="width:55px;height:55px"></img>
<div id="ff" style="display:none;width:300px;height:300px"><img src="" style="width:300px;height:300px"></img></div>
</div>
这样可否！如果要定位置就加个CSS的的绝对和相对定位来控制大图显示的位置！！

Answer 4

<a href="big.jpg" target=_blank><img src='small.jpg'/></a>