对于div里面内容过大根据长度或者宽度进行适配,然后可以滚轮缩放的功能

Posted pengfei25

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了对于div里面内容过大根据长度或者宽度进行适配,然后可以滚轮缩放的功能相关的知识,希望对你有一定的参考价值。

在做3000的项目中,因为页面的svg很大,但是做的只是适配电脑,打开肯定是看不全的,要看全就必须进行滚动,可是客户提出了将页面放在电视机上面,用电视输入网址直接访问,这样问题就来了,电视上怎么进行滚动呢

所以新增需求

1、页面根据不同尺寸的设置进行适配

2、确保页面内容可以全部查看完整

3、可以进行滚轮滚动缩放

实例

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
    html,body{
        width:100%;
        height:100%;
        overflow:hidden;
        padding:0;
        margin:0;
    }
    #big{
        overflow:auto;
        width:100%;
        height:100%
    }
    #content{
        width:3000px;
        height:2000px;
        background-color:pink;
        display:flex;
        justify-content:center;
        align-items:center;
        transform-origin:0 0;
    }
    #content>span{
        display:flex;
        justify-content:center;
        align-items:center;
        width:500px;
        height:500px;
        color:white;
        background: rgba(0,0,0,0.5);
    }
  </style>
 </head>
 <body>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>        
    <script type="text/javascript">
        window.onload=function(){
            initEvent()
            //计算是宽度优先的还是高度优先的
            initScale()
        }
        function initScale(){
            var initScale = 1;
            if($(window).width()/$("#content").width()<$(window).height()/$("#content").height()){
                initScale=$(window).width()/$("#content").width();
            }else{
                initScale=$(window).height()/$("#content").height();
            }
            console.log(initScale)
            $("#content").css("transform","scale("+initScale+")")    
        }
        function initEvent(){
            //滚轮效果
            var params={}
            $(body).on(mousewheel,function(e){
                params.zoomVal+=event.wheelDelta/1200;
                var o=e.target;
                if (params.zoomVal >= 0.2) {
                    $("#content").css("transform","scale("+params.zoomVal+")")    
                } else {
                    params.zoomVal=0.2;//不让其一直无限缩小
                    $("#content").css("transform","scale("+params.zoomVal+")")    
                    return false;
                }
            })
            $(window).on("resize",function(){
                initScale()
            })
        }
    </script>
    <div id="big">
        <div id="content" class="big-image">
            <span>测试根据屏幕尺寸进行缩放div</span>
        </div>
    </div>
 </body>
</html>

效果图

技术图片

 

以上是关于对于div里面内容过大根据长度或者宽度进行适配,然后可以滚轮缩放的功能的主要内容,如果未能解决你的问题,请参考以下文章

怎么让div的宽度不变,高度自适应内容的高度,新手求举例,谢谢

外层div自适应里面内容的宽度,div里面分为2边自适应中间固定,里面有多宽,外层div就有多宽

div的宽度随着内容的增多而自适应

html+css(左边宽度高度,右边自动占满,右边内容过大左边自动缩小,内容三个点显示)

如何让iframe里面的内容宽度自适应

聊聊PC端页面适配