原生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 ...
随机推荐
- 在Liferay 7中如何自定义一个Portlet的toolbar
哈哈,懒得自己写了,直接贴教程了,你想为那个portlet添加自定义的toolbar,就在javax.portlet.name=属性中写上它的值.教程博客:Adding Portlet URL in ...
- 【时光回溯】【JZOJ3566】【GDKOI2014】阶乘
题目描述 输入 第一行有一个正整数T,表示测试数据的组数. 接下来的T行,每行输入两个十进制整数n和base. 输出 对于每组数据,输出一个十进制整数,表示在base进制下,n!结尾的零的个数. 样例 ...
- Person Re-identification 系列论文笔记(七):PCB+RPP
Beyond Part Models: Person Retrieval with Refined Part Pooling Sun Y, Zheng L, Yang Y, et al. Beyond ...
- PHPCMS快速建站系列之添加单页模版
单页模板命名:page_xxx.html 以page_开头 在模版所在目录的config.php中添加配置项 'page_xxx.html' => '单网页', 也可以不在config中配置,不 ...
- TZOJ 4471: Postman FJ (二分+bfs)
描述 FJ now is a postman of a small town in the hills. The town can be represented by a N×N matrix. Ea ...
- 个人总结OLinux上安装oracle11G Data Guard
一.准备环境 1.swap要求 swap最好设置3G以上,如果安装过程中报swap不足,可参考: https://www.jianshu.com/p/46635a12c8d0 2.官网必须安装包列表: ...
- char和achar互转
#pragma once#include "stdafx.h" #ifndef _Convert_H_#define _Convert_H_ //定义转换类class Conver ...
- AtCoder Grand Contest 019 B - Reverse and Compare【思维】
AtCoder Grand Contest 019 B - Reverse and Compare 题意:给定字符串,可以选定任意i.j且i<=j(当然i==j时没啥卵用),然后翻转i到j的字符 ...
- 2019-2-27-如何替换一个-exe-的图标
title author date CreateTime categories 如何替换一个 exe 的图标 lindexi 2019-02-27 20:33:16 +0800 2019-2-27 2 ...
- Gym - 101480D_Digit Division
题意:输入n,m,将n分段,每一段都可以被m整除,有多少种方法. 题解:找到n最多可以分成多少段,1段1中分法,2段2中分法,3段4种分法--计算可知若有x段则2^x-1种分法. 注意:如果n无法被m ...