原生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 ...
随机推荐
- MySQL——外键
概念 关键字:foreign key,也叫做外键约束! 如果一个实体A的某个字段,刚好指向另一个实体B的主键,那么实体A的这个字段就叫做外键: 所以,简单来说,外键就是本表的某个字段指向外表的主键! ...
- 深入浅出Cocoa之消息【转】
在入门级别的ObjC 教程中,我们常对从C++或Java 或其他面向对象语言转过来的程序员说,ObjC 中的方法调用(ObjC中的术语为消息)跟其他语言中的方法调用差不多,只是形式有些不同而已. 譬如 ...
- SPSS能做Cochran-Armitage趋势检验吗
SPSS能做Cochran-Armitage趋势检验吗 Cochran-Armitage (CA) 趋势检验是一种用于分析1个二分类变量和1个有序分类变量关联性的统计方法,由Cochran和Armti ...
- Directx11教程(51) 简单的billboard
原文:Directx11教程(51) 简单的billboard billboard称作公告板,通常用一个quad(四边形)表示[有的billboard用两个正交的quad表示],它的特点 ...
- Kubernetes1.4即将发布
(一)发布历史 Kubernetes 1.0 - 2015年7月发布 Kubernetes 1.1 - 2015年11月发布 Kubernetes 1.2 - 2016年3月发布 Kubernetes ...
- Java练习 SDUT-1160_某年某月的天数
C语言实验--某年某月的天数 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 输入年和月,判断该月有几天? Input ...
- tyvj1467 通向聚会的道路
背景 Candy住在一个被划分为n个区域的神奇小镇中,其中Candy的家在编号为n的区域,Candy生日这天,大家都急急忙忙赶去Candy家庆祝Candy的生日. 描述 Candy共有t个朋友 ...
- 《DL/T 1476-2015 电力安全工器具预防性试验规程》中的样品名称及试验项目
- LeetCode115 Distinct Subsequences
Given a string S and a string T, count the number of distinct subsequences of T in S. (Hard) A subse ...
- @bzoj - 2395@ [Balkan 2011]Timeismoney
目录 @description@ @solution@ @accepted code@ @details@ @description@ 有n个城市(编号从0..n-1),m条公路(双向的),从中选择n ...