在做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里面内容过大根据长度或者宽度进行适配，然后可以滚轮缩放的功能的更多相关文章

  1. css如何让<a>标签，根据输入的内容长度调整宽度，宽度自适应，那位大仙帮帮忙

    css如何让<a>标签,根据输入的内容长度调整宽度,宽度自适应,那位大仙帮帮忙 5 样式 .ceshi{float:left; margin-left:13px; width:180px; ...

  2. 浏览器对DIV+CSS兼容性问题大总结

    浏览器对DIV+CSS兼容性问题大总结 接触DIV+CSS架构已经快两年了,个人觉得css入门不难,但要学精并非一朝一夕的,现在大部分网络公司都比较主张用div+css来布局,这就面临着一个比较难的问 ...

  3. 为什么当多个inline-block的div中，如果有的div没有内容而有的div有内容，有内容的会下沉？

    为什么当多个inline-block的div中,如果有的div没有内容而有的div有内容,有内容的会下沉? 就像这样 两个div高度相同,第二个我写了一个1当作 有内容吧,它就下沉了... 奇怪... ...

  4. 如何让2个并列的div根据内容自动保持同等高度

    最近在工作中碰到一个需求: 有左右2个并列的div,2个div都不能限定高度.左div为导航,右div为内容.如何能让左div块自动获得和右div块相等的高度? 同时,也有网友提问到"如果右 ...

  5. 让2个并列的div根据内容自动保持同等高度js

    有左右2个并列的div,2个div都不能限定高度.左div为导航,右div为内容.如何能让左div块自动获得和右div块相等的高度? 同时,也有网友提问到“如果右块高度比左块低,会不会导致左块的内容被 ...

  6. div+css 怎么让一个小div在另一个大div里面 垂直居中

    div+css 怎么让一个小div在另一个大div里面 垂直居中 方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent {           width:800 ...

  7. 表格不被内容撑大，且超出的内容变为省略号（css)

    今天写代码,发现表格会被内容撑大,影响到了网页的整体布局. 百度了一解决方法,下面是代码和我的备注 table{table-layout: fixed;}        //固定表格 table td ...

  8. POST内容太大的问题

    背景: 最近项目进入尾声,需要做交付测试,发现CMS生成页面在反复修改保存多次后,由于页面存在动态加载js的缘故,使得页面的内容越来越大,最终出现页面没有办法保存(ajax post将页面的内容发送给 ...

  9. http响应报文，如果响应的内容比较大，客户端怎么样判断接收完了呢？

    1.   http协议有正文大小说明的content-length 2. 或者分块传输chunked的话  读到0\r\n\r\n 就是读完了 ---------------------------- ...

随机推荐

  1. Projects: Linux scalability: Accept() scalability on Linux 惊群效应

    小结: 1.不必要的唤醒 惊群效应 https://github.com/benoitc/gunicorn/issues/792#issuecomment-46718939 https://www.c ...

  2. 如何在国内使用google

    而Google却一直坚持“机器算法”至上,让信息以公正的排序结果呈现,对于IT人员来说国内不能用google进行搜索是很痛苦的. 公司邮件介绍了一些方法,mark一下还是很有用的. http://ww ...

  3. python3 super().__init__() 和 __init__() 的区别

    1.单继承 super().__int__()和 Base.__init__(self)是一样的, super()避免了基类的显式调用. class Base(object): def __init_ ...

  4. 动手生成 Delphi xe DBTreeview 三级行政图树 省市县

    表结构及记录 object tarea: TFDQuery    Connection = FDConnection1    SQL.Strings = (      'select *'      ...

  5. php错误机制总结

    转 http://www.cnblogs.com/yjf512/p/5314345.html

  6. Vue 组件基础完整示例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 源码搭建zabbix服务

    1) 部署LNMP 1.1) cd /root tar -xf lnmp_soft.tar.gz cd lnmp_soft/ tar -xf nginx-1.10.3.tar.gz cd nginx- ...

  8. 《PC Assembly Language》读书笔记

    本书下载地址:pcasm-book. 前言 8086处理器只支持实模式(real mode),不能满足安全.多任务等需求. Q:为什么实模式不安全.不支持多任务?为什么虚模式能解决这些问题? A: 以 ...

  9. postgres csv日志和查看用户权限

    最近在使用postgres 时遇到的2个问题,顺便记录一下查到的比较好的资料. 怀疑postgres在执行SQL时报错,程序日志中有无明确异常信息.通过查看csv日志来确定是否SQL真的是执行时报错. ...

  10. redis主从同步错误处理

    背景: 之前resis只有一台服务器(redis  master),现需要为其增加一台slave服务器(slave),做成一主一从 要求,不影响 master的正常情况下完成 . 1.配置slave: ...