知乎那个小小的图片鼠标有放大镜的功能怎么做到的?放图!

上面知乎首页就是这样。
我的鼠标移动到这个图片就变放大镜。
然后我单击右键就变大了。
这个下面就是这样。然后右上角可以关闭。大的图片也变小了。
就这么正常!
就这么优雅!

如何帅气的放大镜。
我再用粗糙的代码也写不出来
我的思路就是这样<a href="放图"><img src="图片" width="100" height="100"></a>
这烂思路土得掉牙。
如何给我一个更优雅的思路代码!

点击图片放大的效果可以使用jQuery的插件来实现,我的jQuery也是刚刚开始学习,如果下面答案有出现错误的话,希望题主或者接下来的答主纠正!
比较简单的一款是:imgbox 这款插件很小,才6kb,而且参数设置简单,我很是喜欢。
这款插件我登陆了它的官网,发现网站已经不存在了,所以在百度上搜索了一些例子:

imgbox Dome Page

html部分的一小撮代码讲解:

<a id="example1-3" title="Maecenas eros massa, pulvinar et sagittis adipiscing, &lt;br /&gt; 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>

其中主要要注意的是代码仲 href 后面接的是放大后的图片,src后接的是缩小时的图片。

使用主要是在页头把jQuery插件导入,该例子的主要参数如下代码:

 <script type="text/javascript"> $document.readyfunction { $"#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>

其中最主要的是
speedIn 动画小变大的时间间隔,以毫秒为单位
speedOut 动画大变小的时间间隔,以毫秒为单位
alignment 动画变大后所处的位置

更多类似的优秀插件:
fancybox
lighterbox

写好一个放大图的容器,css设置position:fixed,全屏大小,display:none
中间放大图img,右上角放X

<div id="fullscreen-container"> <div class="fullscreen-close" onclick="closePreview"></div> <!--下面放大图--> <img id="fullscreen-img" class="fullscreen-img" src="">
</div> <!--这里是小图们-->
<img src="img1.jpg" width="100" height="100" onclick="openPreviewthis.src">
<img src="img2.jpg" width="100" height="100" onclick="openPreviewthis.src">
<img src="img3.jpg" width="100" height="100" onclick="openPreviewthis.src">
<img src="img4.jpg" width="100" height="100" onclick="openPreviewthis.src">

js

function openPreviewurl{ document.getElementbyIdfullscreen-img.src = url; document.getElementbyIdfullscreen-container.style.display = "block";
}
function closePreview{ document.getElementbyIdfullscreen-container.style.display = "none";
}

至于鼠标的放大镜效果,可以在小图的css上加 cursor: zoom-in,鼠标移过去就会变成放大镜

全屏容器和大图的css大概是:尺寸具体自己定

.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;
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注