原生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 ...
随机推荐
- [运维]ESXI Web Client 标签: vmware运维服务器 2017-05-28 20:59 597人阅读 评论(9)
ESXI安装完成之后,配置好ip,我们就可以使用了?那么如何使用呢?一般来说有两种方式,一种是安装专门的管理客户端,client端,另一种更加方便,就是使用web client端. 下面来介绍一下es ...
- pycharm 2017 序列号失效问题解决(2016-2017版本都有效)
pycharm 序列号失效问题解决 this license BIG3CLIK6F has been cancelled 具体如下: 对,没错,这个激活码本来可以使用到2018年的,但是,忽然间 ...
- poj2195&&hdu1533 最小费用流
这题也可以用km做,我写的代码km比费用流快很多. 最小费用流: #include<stdio.h> #include<string.h> #include<math.h ...
- HTML之CSS标签
1.CSS选择器 1).id选择器 2).class选择器 3).标签选择器 4).层级选择器(空格) (1)id层级选择器 (2)class层级选择器 5).组合选择器(逗 ...
- Python3 写的远程批量修改文件内容的脚本
一.说明: 1.利用Python的paramiko模块,调用远程的shell命令去修改相应文件. 2.有一个专用配置文件,列出服务器清单. 3.Python循环读取配置文件的服务器IP去连接它,并执行 ...
- 13条必知必会&&测试
1.13条必知必会 <> all(): 查询所有结果 <> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 <> get(**kwargs) ...
- 2018-8-10-WPF-轻量级-MVVM-框架入门-2.1.2
title author date CreateTime categories WPF 轻量级 MVVM 框架入门 2.1.2 lindexi 2018-08-10 19:16:51 +0800 20 ...
- POJ-2502_Subway
Subway Time Limit: 1000MS Memory Limit: 65536K Description You have just moved from a quiet Waterloo ...
- 04使用harbor配置私仓
安装harbor之前,需要安装好Python,Docker,DockerCompose.Python需要2.7以上的版本,Docker需要1.10以上的版本:Docker Compose 需要1.6. ...
- HZOJ Blue
Blue: 贪心. 我们不妨给蛤定一个先后顺序,则贪心策略即从右至左每只蛤依次往最远的石子跳. 证明: 如果最右的蛤不往最远的石子跳,而是选择了一个较近的石子,那么必然会存在一个该蛤左边的蛤越过了它跳 ...