针对1920*1080 分配率缩放

window.addEventListener('load', adaptation);
window.addEventListener('resize', adaptation);
function adaptation () {
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var nw = 1920;
nh = 1080;
var left, top, scale;
if (w / h > nw / nh) {
scale = h / nh;
top = 0;
left = (w - nw * scale) / 2;
} else {
scale = w / nw;
left = 0;
top = (h - nh * scale) / 2;
}
document.getElementById('main').setAttribute('style', 'transform: scale('+ scale +');left:'+left+'px;top:'+top+'px;');
}

原生Js 实现等比缩放页面的更多相关文章

  1. 原生Js 两种方法实现页面关键字高亮显示

    原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...

  2. 原生js与jquery加载页面元素比较

    原生js:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,js提供了window.onload 这个方法事先加载元素 <script type="text/javascrip ...

  3. 用原生JS实现爱奇艺首页导航栏

    以下是爱奇艺首页的一个导航栏,用原生js写的,静态页面效果如下: 代码如下: <html> <head> <title>爱奇艺</title> < ...

  4. 原生js+css实现重力模拟弹跳系统的登录页面

    今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...

  5. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

  6. pageresponse.min.js自动缩放页面改写

    /* * 名称 :移动端响应式框架 * 作者 :白树 http://peunzhang.cnblogs.com * 版本 :v2.1 * 日期 :2015.10.13 * 兼容 :ios 5+.and ...

  7. 原生js实现类的添加和删除,以及对数据的add和update、view ,ajax请求 ,页面离开的操作

    1 类操作 function hasClass(cla, element) { if(element.className.trim().length === 0) return false; var ...

  8. 【原生JS插件】LoadingBar页面顶部加载进度条

    先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...

  9. 原生Js页面滚动延迟加载图片

    原理和过程1.页面滚动加载事件2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxr ...

随机推荐

  1. 跨境网上收款 找PayPal没错(php如何实现paypal支付)

    开发前准备 在我的博客中 有介绍如何获取ID 和 secret : 好了 在上一篇博客中详细介绍了也不少: 跨境网上收款 找PayPal没错(如何获取ID 和 secret) http://blog. ...

  2. get请求url中带有中文参数出现乱码情况

    在项目中经常会遇到中文传参数,在后台接收到乱码问题.那么在遇到这种情况下我们应该怎么进行处理让我们传到后台接收到的参数不是乱码是我们想要接收的到的,下面就是我的一些认识和理解. get请求url中带有 ...

  3. JDBC操作数据库实例

    jdbc操作数据库实例 1.jdbc创建数据库 1.1 前提条件 1.拥有创建和删除表的权限 2.数据库已经启动,且可用 1.2 jdbc创建数据库表的步骤: 导包:导入需要进行数据库编程的 JDBC ...

  4. oracle审计实施

    1.语句审计 Audit session;  Audit session By ; 与instance连接的每个会话生成一条审计记录.审计记录将在连接时期插入并且在断开连接时期进行更新. 保留有关会话 ...

  5. Kernal Panic - Not syncing : VFS: unable to mount root fs on unknown-block

    升级了一下centos6.5 执行了 yum -y update reboot 出现了以下问题: Kernal Panic - Not syncing : VFS: unable to mount r ...

  6. 仔细看看Javascript中的逻辑与(&&)和逻辑或(||)

    学过Java和C的人,都知道逻辑与(&&)和逻辑或(||),他们都是短路运算符,也就是说,对于&&来说,只要左边的操作数是false,它就不会再去判断右边的操作数是tr ...

  7. uva 10453 【回文串区间dp】

    Uva 10453 题意:给定字符串,问最少插入多少个字符使其变成回文串,并任意输出一种结果. 题解:和Uva 10739类似,这里是只能增加.类似定义dp[i][j]表示子串Si...Sj变为回文串 ...

  8. Flask 第二篇

    Flask 中的 Render Redirect HttpResponse 1.Flask中的HTTPResponse 在Flask 中的HttpResponse 在我们看来其实就是直接返回字符串 2 ...

  9. oracle中常用的时间格式转换

    1:取得当前日期是本月的第几周  select to_char(sysdate,'YYYYMMDD W HH24:MI:SS') from dual; TO_CHAR(SYSDATE,'YY') se ...

  10. java 简单实现FtpClient

    1. 引入喜闻乐见的maven地址 <dependency> <groupId>commons-net</groupId> <artifactId>co ...