原生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 ...
随机推荐
- 利用Factory-boy来生成实例数据
库和版本:Faker==2.0.0factory-boy==2.12.0 官方文档:https://factoryboy.readthedocs.io/en/latest/index.html 1. ...
- mysqldump命令之数据库迁移
格式说明如下: mysqldump -h源主机IP -u源主机用户 -p源主机用户密码 数据库名 | mysql -h目标主机IP -u目标主机用户 -p目标用户密码 数据库名
- js日历
html部分 <div class="div"> <p><span onclick="syn()">上一年</span ...
- bzoj1060 时态同步
Description 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数字1,2,3….进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路板 ...
- JavaScript--时间日期格式化封装
这是一个正常的封装: 其他非正常的请按照以下语句自由搭配 <!DOCTYPE html> <html lang="en"> <head> < ...
- Hdu 2522 hash
题目链接 题意:输入整数n (1<= abs(n) <= 10^5) , 输出 1/n. 这题不是自己做出来的...看了网上的思路.这种题目都能想到用hash..反正我是没往那里想,看到循 ...
- 2017校赛 C: 不爱学习的小W【模拟】
题目描述 “叮铃铃”上课了,同学们都及时到了教室坐到了座位上,教室里有n行m列的座位而且刚好坐满.既然是上课,那老师叫学生回答问题就是再正常不过的事了,同样地,教室里也就有爱学习和不爱学习的学生了,爱 ...
- IDEA入门(1)--lombok和Junit generator2插件的运用
前言 最近在慕课网看到了一些视频,准备从0开始做一个电商网站.视频中的大牛用的java的IDE都是IDEA,让我很纠结.从as到MyEclipse,好不容易稍微熟悉了一下MyEclipse的基本操作, ...
- 使用 git 来管理 PCB 版本
使用 git 来管理 PCB 版本 在传统的 PCB 版本管理是复制一份,再重命名,写上日期,写上修改日志. 自从接触了 git 后,发现 git 的版本管理完全可以胜任,且可以做的更好. 原来使用商 ...
- ios开发――解决UICollectionView的cell间距与设置不符问题
在用UICollectionView展示数据时,有时我们希望将cell的间距调成一个我们想要的值,然后查API可以看到有这么一个属性: - (CGFloat)minimumInteritemSpaci ...