在做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. [Java读书笔记] Effective Java(Third Edition) 第 4 章 类和接口

    第 15 条: 使类和成员的可访问性最小化 软件设计基本原则:信息隐藏和封装. 信息隐藏可以有效解耦,使组件可以独立地开发.测试.优化.使用和修改.   经验法则:尽可能地使每个类或者成员不被外界访问 ...

  2. MySQL中tinytext、text、mediumtext和longtext等各个类型详解

    转: MySQL中tinytext.text.mediumtext和longtext等各个类型详解 2018年06月13日 08:55:24 youcijibi 阅读数 26900更多 个人分类: 每 ...

  3. Redis有序Set、无序Set的使用经历

    为了实现一个类似关系数据库中的卖家信息的单表,首先我们知道单表必然可增删查改,其次为了区分先来后到又需要有ID主键且自增长.开始考虑使用hash数据类型,因为hash是key+列1.列2...这样一来 ...

  4. SQL查询交集、并集、差集

     两个表A  和表 T          交集 intersect 并集   UNION SQL:select df from A union select sd from T; 在Union后不加A ...

  5. swift 第一课 基础知识-1

    1. 基本的打印: print("这是学习 swift 的第一课") var varA = print("a 的值是 \(varA)") //注:字符串打印参数 ...

  6. Golang sync.WaitGroup的用法

    0x01 介绍 经常会看到以下了代码: 12345678910111213 package main import ( "fmt" "time") func m ...

  7. SQL中有关DQL、DML、DDL、DCL的概念与区别？

    SQL(Structure Query Language)结构化查询语言是数据库的核心语言,是高级的非过程化编程语言.它功能强大,效率高,简单易学易维护.SQL语言基本上独立于数据库本身.使用的机器. ...

  8. TCP/IP和OSI/RM以及协议端口

    TCP/IP:数据链路层:ARP,RARP网络层: IP,ICMP,IGMP传输层:TCP ,UDP,UGP应用层:Telnet,FTP,SMTP,SNMP. OSI:物理层:EIA/TIA-232, ...

  9. 解决Linux：Too many levels of symbolic links

    Too many levels of symbolic links 解决:创建链接时使用绝对路径

  10. jquery清除元素的点击事件

    $("#id").css("pointer-events", "none");