在做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. WebView调用js方法获取返回值的完美解决方案

    在Android项目中我们或多或少会涉及到与js交互的问题,这其中WebView是必须掌握的控件,今天主要说说我们通过WebView调用js方法,然后如何很好的获取返回值.这里我总结了三种方式,大家可 ...

  2. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_14.RabbitMQ研究-与springboot整合-搭建环境

    我们选择基于Spring-Rabbit去操作RabbitMQ https://github.com/spring-projects/spring-amqp 使用spring-boot-starter- ...

  3. kafka----简单的脚本命令重点

    kafka命令如下: kafka-shell基本命令 在节点hadoop-2,hadoop-3,hadoop-5,启动kafka 启动命令如下 kafka-server-start.sh /usr/l ...

  4. C#创建windows服务(二：创建和卸载windows服务)

    引用地址: https://docs.microsoft.com/zh-cn/dotnet/framework/windows-services/how-to-create-windows-servi ...

  5. Spring Security(1)：认证和授权的核心组件介绍及源码分析

    Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方式的安全框架.它包括认证(Authentication)和授权(Authorization)两个部 ...

  6. handlebars基础及循环使用示例

    var source = "<p>Hello, my name is {{name}}. I am from {{hometown}}. I have " + &quo ...

  7. Windows下Apache+PHP+MySQL搭建web服务器

    Apache+PHP+MySQL搭建服务器 工欲善其事必先利其器. 最近由于电脑出了问题不得不重新安装需要的文件,代码什么的都没了,以前也没怎么写过东西这回就先试试手,写的不是太好,希望大家不要介意哈 ...

  8. python全栈测试之路-py3基础：基础的常用语法知识

    python基础链接 python3速查参考- python基础 2 -> if语句应用 + while循环应用 https://www.cnblogs.com/wuzhiming/p/7795 ...

  9. 安卓运行linux应用程序

    安卓是可以运行linux应用程序的,安卓系统原来就基于Linux.但是安卓已经把linux改头换面了.具体方法是安装Termux软件,然后就可以运行pkg命令安装软件包了,希望可以帮助到大家.

  10. shell学习笔记2-find和xargs

    1,find命令形式 find pathname -options [-print - exec -ok] pathname find命令所查找的目录路径.. 表示当前目录,/表示系统根路径 -pri ...