在做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. 前端知识点回顾——mongodb和mongoose模块

    mongodb和mongoose模块 数据库 数据库有关系型数据库(MySQL)和非关系型数据库(mongodb),两者的语法和数据存储形式不一样. mySQL 关系型数据库 类似于表格的形式,每一条 ...

  2. linux下docker如何指定容器的工作目录?

    答: 启动容器时传入-w <work_dir>参数即可,如: docker run -it -w <work_dir> <container_image_name> ...

  3. kotlin中类型检查和类型转换

    is 和!is操作符,可以在运行时检查一个对象与一个给定的类型是否一致,或者使用与它相反的!is操作符 fun main(arg: Array<String>) { var a :Any= ...

  4. x86架构64位模式下的寄存器列表

    在此列出x86架构处理器在64位模式下的可用寄存器列表,方便查阅- 这里要注意的是,在64位模式下,所有通用寄存器都能访问第8位部分,低16位部分以及低32位部分. 以下是64位模式下AMD64 AB ...

  5. tortoiseGit did not exit cleanly (exit code 128)

    安装并配置好tortoiseGit之后,clone项目时,报错: git did not exit cleanly (exit code 128)如下图: 该问题解决方式: 1.确保Pageant启动 ...

  6. asp.net MVC AngularJS

    http://www.cnblogs.com/powertoolsteam/category/834105.html

  7. 19 Flutter仿京东商城项目 商品详情 底部浮动导航布局 商品页面布局

    效果: widget/JdButton.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.da ...

  8. PAT 甲级1025 PAT Ranking (25 分)（结构体排序，第一次超时了，一次sort即可小技巧优化）

    题意: 给定一次PAT测试的成绩,要求输出考生的编号,总排名,考场编号以及考场排名. 分析: 题意很简单嘛,一开始上来就,一组组输入,一组组排序并记录组内排名,然后再来个总排序并算总排名,结果发现最后 ...

  9. cv2.bitwise_and的应用,

    import cv2 import numpy as np Load two images img1 = cv2.imread('messi.png') img2 = cv2.imread('logo ...

  10. matlab 提取图像轮廓（图像边缘提取）

    利用edge()函数提取图像轮廓,绘制出对象的边界和提取边界坐标信息,matlab实现代码如下: close all;clear all;clc; % 提取图像轮廓,提取图像边缘 I = imread ...