pc端 前端页面 js灯箱效果能放大缩小吗
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了pc端 前端页面 js灯箱效果能放大缩小吗相关的知识，希望对你有一定的参考价值。
求助 我已经实现了灯箱效果 发现不能放大和缩小 我想通过鼠标滚轮实现把灯箱图片 放大缩小的效果?或者有没有能点击图片进行预览然后可以滚动鼠标进行放大缩小的CSs或者js
可以监听滚轮事件 mousewheel 判断是点击的图片是否显示，显示的话 先屏蔽滚动事件 然后获取到你显示出来的容器 改变一下img的css的 transform ：scale属性，也可以判断下滚动方向进行放大和缩小 如果没有显示 就不采取任何处理 参考技术A 可以通过鼠标滚轮滚动事件来做 参考技术B 有的，用Owl Carousel能实现你说的效果， 参考技术C <!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>zoom</title>
</head>
<body>
<image id="image" src="data:image/jpeg;base64,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">
<script type="text/javascript">
var image = document.querySelector('#image');
var iw = image.width,ih = image.height,zoomSept = 5;
image.addEventListener('mousewheel',function(e)
if( e.wheelDelta >0)
this.width+=5;
this.height+=5;
else
if(this.width<iw/2)return;
this.width-=5;
this.height-=5;
,false)
</script>
</body>
</html>
Js实现放大缩小html页面整体
Js实现放大缩小html页面整体
不包含iframe的写法
- html代码
<body>
<div >
<button onclick="enlargePage()">页面放大</button>
<button onclick="narrowPage()">页面缩小</button>
</div>
<div>这里是页面内容......</div>
</body>
- js代码
<script type="text/javascript">
//网页放大缩小的变量，初始值为1
var paramNumber = 1;
//缩小页面
function narrowPage()
//设置最小限制
if(paramNumber >0.2)
paramNumber -=0.1;
//缩小body
document.getElementsByTagName('body')[0].style.zoom=paramNumber;
//放大页面
function enlargePage()
//设置最大限制
if(paramNumber <5)
paramNumber +=0.1;
//放大body
document.getElementsByTagName('body')[0].style.zoom=paramNumber;
</script>
包含iframe的写法
- html代码
主页面代码：
<body>
<div >
<button onclick="enlargePage()">页面放大</button>
<button onclick="narrowPage()">页面缩小</button>
</div>
<div>这里是页面内容......</div>
<iframe id="iframeId" src="iframe-content.html"
frameborder="0" style="min-height:200px;overflow:visible;" >
</iframe>
</body>
iframe-content.html代码：
<body>
<div>这里是iframe的内容......</div>
</body>
- js代码
<script type="text/javascript">
//网页放大缩小的变量，初始值为1
var paramNumber = 1;
//如果有iframe的话，iframe也跟随主框架大小变化
$(function()
//根据id获取子iframe元素
var iframe = $("#iframeId")[0];
//重新加载子iframe时，每次在子iframe加载完成后，设置子iframe的body
if (iframe.attachEvent)
iframe.attachEvent('onload', function ()
document.getElementById('iframeId').contentDocument
.getElementsByTagName('body')[0].style.zoom=paramNumber ;
)
else
iframe.onload = function ()
document.getElementById('iframeId').contentDocument
.getElementsByTagName('body')[0].style.zoom=paramNumber ;
);
//缩小页面
function narrowPage()
//设置最小限制
if(paramNumber >0.2)
paramNumber -=0.1;
//缩小body
document.getElementsByTagName('body')[0].style.zoom=paramNumber;
document.getElementById('iframeId').contentDocument
.getElementsByTagName('body')[0].style.zoom=paramNumber;
//放大页面
function enlargePage()
//设置最大限制
if(paramNumber <5)
paramNumber +=0.1;
//放大body
document.getElementsByTagName('body')[0].style.zoom=paramNumber;
document.getElementById('iframeId').contentDocument
.getElementsByTagName('body')[0].style.zoom=paramNumber;
</script>
以上是关于pc端 前端页面 js灯箱效果能放大缩小吗的主要内容，如果未能解决你的问题，请参考以下文章