上面知乎首页就是这样。
我的鼠标移动到这个图片就变放大镜。
然后我单击右键就变大了。
这个下面就是这样。然后右上角可以关闭。大的图片也变小了。
就这么正常！
就这么优雅！
如何帅气的放大镜。
我再用粗糙的代码也写不出来
我的思路就是这样<a href="%E6%94%BE%E5%9B%BE"><img src="%E5%9B%BE%E7%89%87" style="max-width:90%" style="max-width:90%" alt="知乎那个小小的图片鼠标有放大镜的功能怎么做到的？放图！" ></a>
这烂思路土得掉牙。
如何给我一个更优雅的思路代码！
上面知乎首页就是这样。
我的鼠标移动到这个图片就变放大镜。
然后我单击右键就变大了。
这个下面就是这样。然后右上角可以关闭。大的图片也变小了。
就这么正常！
就这么优雅！
如何帅气的放大镜。
我再用粗糙的代码也写不出来
我的思路就是这样<a href="%E6%94%BE%E5%9B%BE"><img src="%E5%9B%BE%E7%89%87" style="max-width:90%" style="max-width:90%" alt="知乎那个小小的图片鼠标有放大镜的功能怎么做到的？放图！" ></a>
这烂思路土得掉牙。
如何给我一个更优雅的思路代码！
点击图片放大的效果可以使用jQuery的插件来实现，我的jQuery也是刚刚开始学习，如果下面答案有出现错误的话，希望题主或者接下来的答主纠正！
比较简单的一款是：imgbox 这款插件很小，才6kb，而且参数设置简单，我很是喜欢。
这款插件我登陆了它的官网，发现网站已经不存在了，所以在百度上搜索了一些例子：
imgbox Dome Page
html部分的一小撮代码讲解：
<code><a id="example1-3" title="Maecenas eros massa, pulvinar et sagittis adipiscing, <br /> molestie et arcu" href="http://farm3.static.flickr.com/2642/4003912116_389c3891cf.jpg"><img alt="" src="http://farm3.static.flickr.com/2642/4003912116_389c3891cf_m.jpg"></a> </code>
其中主要要注意的是代码仲 href 后面接的是放大后的图片，src后接的是缩小时的图片。
使用主要是在页头把jQuery插件导入，该例子的主要参数如下代码：
<code> <script type="text/javascript">
$(document).ready(function() {
$("#example1-1").imgbox();
$("#example1-2").imgbox({
'zoomOpacity' : true,
'alignment' : 'center'
});
$("#example1-3").imgbox({
'speedIn' : 0,
'speedOut' : 0,
});
$("#example2-1, #example2-2").imgbox({
'speedIn' : 0,
'speedOut' : 0,
'alignment' : 'center',
'overlayShow' : true,
'allowMultiple' : false
});
});
</script></code>其中最主要的是 speedIn 动画小变大的时间间隔，以毫秒为单位speedOut 动画大变小的时间间隔，以毫秒为单位alignment 动画变大后所处的位置
更多类似的优秀插件：
fancybox
lighterbox
写好一个放大图的容器,css设置position:fixed,全屏大小,display:none
中间放大图img,右上角放X
<code><div id="fullscreen-container">
<div class="fullscreen-close" onclick="closePreview()"></div>
<!--下面放大图-->
<img id="fullscreen-img" class="fullscreen-img" src="" alt="知乎那个小小的图片鼠标有放大镜的功能怎么做到的？放图！" >
</div>
<!--这里是小图们-->
<img src="img1.jpg" style="max-width:90%" style="max-width:90%" onclick="openPreview(this.src)" alt="知乎那个小小的图片鼠标有放大镜的功能怎么做到的？放图！" >
<img src="img2.jpg" style="max-width:90%" style="max-width:90%" onclick="openPreview(this.src)" alt="知乎那个小小的图片鼠标有放大镜的功能怎么做到的？放图！" >
<img src="img3.jpg" style="max-width:90%" style="max-width:90%" onclick="openPreview(this.src)" alt="知乎那个小小的图片鼠标有放大镜的功能怎么做到的？放图！" >
<img src="img4.jpg" style="max-width:90%" style="max-width:90%" onclick="openPreview(this.src)" alt="知乎那个小小的图片鼠标有放大镜的功能怎么做到的？放图！" >
</code>js
<code>function openPreview(url){
document.getElementbyId('fullscreen-img').src = url;
document.getElementbyId('fullscreen-container').style.display = "block";
}
function closePreview(){
document.getElementbyId('fullscreen-container').style.display = "none";
}
</code>至于鼠标的放大镜效果,可以在小图的css上加 cursor: zoom-in,鼠标移过去就会变成放大镜
全屏容器和大图的css大概是:(尺寸具体自己定)
<code>.fullscreen-container{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.fullscreen-img{
position: absolute;
width: 1200px;
height: 600px;
top: 50%;
left: 50%;
margin-left: -600px;
margin-top: -300px;
}
</code>
