原生Js 实现等比缩放页面
针对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 实现等比缩放页面的更多相关文章
- 原生Js 两种方法实现页面关键字高亮显示
原生Js 两种方法实现页面关键字高亮显示 上网看了看别人写的,不是兼容问题就是代码繁琐,自己琢磨了一下用两种方法都可以实现,各有利弊. 方法一 依靠正则表达式修改 1.获取obj的html2.统一替换 ...
- 原生js与jquery加载页面元素比较
原生js:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,js提供了window.onload 这个方法事先加载元素 <script type="text/javascrip ...
- 用原生JS实现爱奇艺首页导航栏
以下是爱奇艺首页的一个导航栏,用原生js写的,静态页面效果如下: 代码如下: <html> <head> <title>爱奇艺</title> < ...
- 原生js+css实现重力模拟弹跳系统的登录页面
今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...
- 页面性能优化-原生JS实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...
- pageresponse.min.js自动缩放页面改写
/* * 名称 :移动端响应式框架 * 作者 :白树 http://peunzhang.cnblogs.com * 版本 :v2.1 * 日期 :2015.10.13 * 兼容 :ios 5+.and ...
- 原生js实现类的添加和删除,以及对数据的add和update、view ,ajax请求 ,页面离开的操作
1 类操作 function hasClass(cla, element) { if(element.className.trim().length === 0) return false; var ...
- 【原生JS插件】LoadingBar页面顶部加载进度条
先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...
- 原生Js页面滚动延迟加载图片
原理和过程1.页面滚动加载事件2.获取元素在页面里的top值 根据滚动条的位置 判断何时显示图片3.获取元素集合 加载过的图片从集合里删除 效果预览:http://jsfiddle.net/dtdxr ...
随机推荐
- oracle默认日期格式
有关 Oracle 数据库中支持的语言的完整列表,以及与区域设置相关的信息细节,请参阅 Oracle Database Globalization Support Guide. 默认日期格式 小时.日 ...
- JavaScript--漏写var却还能使用标签
一个漏写var带来的问题: 这个是不标准的写法!不建议使用 但是效果还是出来了,为什么呢? 原因: https://zhidao.baidu.com/question/1637589020484843 ...
- DELL(linux 系统里系统掉盘)(阵列Foreign)命令行里重做阵列
故障现象 (阵列Foreign 系统下重做阵列) 例:四合一机器(DELL_XENCOMPA09) 有四个硬盘 如图 少认到一个 df -h fdisk -l 2>/dev/null | gr ...
- VS2017 打包成exe
在项目的解决方案 右键→ 新建项目 后出现如下选择 (如果没有找到,请在联机中搜索 visual studio installer 并安装) 选择项目类型 Setup Project,并输入名称, ...
- Hdu 1729 Nim博弈
点击打开题目链接 之前没做过这题,因为学弟问到我如果来求该题的sg值,才做了这题. 首先, 是多堆Nim博弈毫无疑问,这题是往一个有固定容量的箱子里放石子,和从一堆石子里面拿出石子是一个道理. 和传统 ...
- request header....
root@xxx# curl -i --get --include 'http://ali-barcode.showapi.com/barcode?code=6938166920785' -H 'Au ...
- POJ 2632 Crashing Robots (模拟 坐标调整)(fflush导致RE)
题目链接:http://poj.org/problem?id=2632 先话说昨天顺利1Y之后,直到今天下午才再出题 TAT,真是刷题计划深似海,从此AC是路人- - 本来2632是道略微恶心点的模拟 ...
- MaxCompute 项目子账号做权限管理
场景: 一个企业使用多款阿里云产品,MaxCompute是其中一个产品,用的是同个主账号,主账号不是由使用MaxCompute的大数据同学管理, 大数据同学使用的是子账号.大数据同学日常需要给Max ...
- HZOJ 导弹袭击
比较显然的一个性质是如果存在$a(i)>=a(j) \& \& b(i)>=b(j)$那么j没用. 我们并不需要A,B的具体取值,我们之关心$\frac {A}{B}$. ...
- C# 从零开始写 SharpDx 应用 画三角
原文:C# 从零开始写 SharpDx 应用 画三角 版权声明:博客已迁移到 https://blog.lindexi.com 欢迎访问.如果当前博客图片看不到,请到 https://blog.lin ...