pc端 前端页面 js灯箱效果能放大缩小吗

JavaScript027

pc端 前端页面 js灯箱效果能放大缩小吗,第1张

可以监听滚轮事件 mousewheel 判断是点击的图片是否显示，显示的话 先屏蔽滚动事件 然后获取到你显示出来的容器 改变一下img的css的 transform ：scale属性，也可以判断下滚动方向进行放大和缩小 如果没有显示 就不采取任何处理

首先你要有后台的图片地址，然后引用一个js插件就可以实现你要的效果了。至于插件的话，我建议你可以去这人网址下载，里面有很多灯箱图片效果。http://www.xiamiz.com/list-86-1.html 希望我的回答你.如果还有问题，你可以继续追问。

第一种方法： <a href="http://www.baidu.com" data-featherlight="iframe">baidu</a>

第二种方法：

$.featherlight({iframe: 'http://www.baidu.com', iframeMaxWidth: '80%', iframeWidth: 500,

iframeHeight: 300})

这个用用一个函数抱起来。可以点击执行这个语句。

第三种方法： <a class="btn btn-default" href="#" data-featherlight="#fl3">iFrame</a>

<iframe class="lightbox" src="//player.vimeo.com/video/33110953" width="500" height="281" id="fl3" style="border:none" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 用id f13 一看就懂了。