php - 知乎那个小小的图片鼠标有放大镜的功能怎么做到的？放图！-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

php - 知乎那个小小的图片鼠标有放大镜的功能怎么做到的？放图！

怪我咯 2017-04-10 15:35:29

[PHP讨论组]

839

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

如何帅气的放大镜。
我再用粗糙的代码也写不出来
我的思路就是这样
这烂思路土得掉牙。
如何给我一个更优雅的思路代码！

怪我咯

走同样的路，发现不同的人生

全部回复(1)

天蓬老师2017-04-10 15:37:29 1楼

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

<p id="fullscreen-container">
    <p class="fullscreen-close" onclick="closePreview()"></p>
    <!--下面放大图-->
    <img id="fullscreen-img" class="fullscreen-img" src="">
</p>

<!--这里是小图们-->
<img src="img1.jpg" width="100" height="100" onclick="openPreview(this.src)">
<img src="img2.jpg" width="100" height="100" onclick="openPreview(this.src)">
<img src="img3.jpg" width="100" height="100" onclick="openPreview(this.src)">
<img src="img4.jpg" width="100" height="100" onclick="openPreview(this.src)">

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

至于鼠标的放大镜效果,可以在小图的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;
}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>