在做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. MySQL 临时表和复制表

    MySQL 临时表在我们需要保存一些临时数据时是非常有用的.临时表只在当前连接可见,当关闭连接时,Mysql会自动删除表并释放所有空间. 临时表在MySQL 3.23版本中添加,如果你的MySQL版本 ...

  2. 5.性能测试工具比较：Jmeter和LR

    性能测试工具较多,无法一一进行介绍,感兴趣者可自行搜索资料学习.需要说明的是工具使用方法和原理都大同小异,掌握一个,其他皆可快速上手. 下面就以服务端的性能测试工具为例,对市场上最常用,知名度较高,也 ...

  3. c++ throw异常(学习)

    #include <iostream>#include <stdio.h> using namespace std; void my_copy(const char* src_ ...

  4. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_02-freemarker介绍

  5. Vue学习笔记（四）一起进阶吧

    参考链接地址:https://segmentfault.com/a/1190000009188689?from=timeline Vuex框架原理与源码分析: http://tech.meituan. ...

  6. python之hashlib模块（MD5校验）

    示例:大文件md5校验 def md5(fileMd5): import hashlib md5_value = hashlib.md5() with open(fileMd5,'rb') as f: ...

  7. postman+jmeter接口实例

    接口基础 一.为什么要单独测试接口? 1. 程序是分开开发的,前端还没有开发,后端已经开发完了,可以提前进入测试2. 接口直接返回的数据------越底层发现bug,修复成本是越低的3. 接口测试能模 ...

  8. CSS - clearfix清除浮动

    首先,我们来解释一下为什么要使用 clearfix(清除浮动). 通常我们在写html+css的时候,如果一个父级元素内部的子元素是浮动的(float),那么常会发生父元素不能被子元素正常撑开的情况, ...

  9. Note 1: Good

    Note 1: Good 1. The collection of Linkun's [1]: 1.1coolJoy says "cool" when he heard that ...

  10. 《Java语言程序设计》异常处理

    一.请阅读并运行AboutException.java示例,然后通过后面的几页PPT了解Java中实现异常处理的基础知识. 1. 源代码为: import javax.swing.*; class A ...