使用CSS3的scale实现网页整体缩放


Posted in Javascript onMarch 18, 2014

今天学习了一下QQ邮箱的网页整体缩放效果,原来实现方法很简单,代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> 
<title>测试页面</title> 
<style type="text/css"> 
div { 
width: 600px; 
text-align: center; 
font-size: 4em; 
color: #333; 
} 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script> 
<script type="text/javascript"> 
$(function() { 
var r = document.body.offsetWidth / window.screen.availWidth; 
$(document.body).css("-webkit-transform","scale(" + r + ")"); 
}); 
$(window).resize(function() { 
var r = document.body.offsetWidth / window.screen.availWidth; 
$(document.body).css("-webkit-transform","scale(" + r + ")"); 
}); 
</script> 
</head> 
<body> 
<div>改变窗口大小试试,你会发现什么?</div> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript中的Screen屏幕对象
Jan 16 Javascript
json跟xml的对比分析
Jun 10 Javascript
有趣的javascript数组定义方法
Sep 10 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
bootstrap中模态框、模态框的属性实例详解
Feb 17 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
JavaScript实现4位随机验证码的生成
Jan 28 Javascript
详解JavaScript中的this指向问题
Feb 05 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 #Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 #Javascript
js身份证判断方法支持15位和18位
Mar 18 #Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 #Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 #Javascript
javascript页面上使用动态时间具体实现
Mar 18 #Javascript
JS调用页面表格导出excel示例代码
Mar 18 #Javascript
You might like
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
JavaScript中的私有成员
2006/09/18 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
javascript折半查找详解
2015/01/26 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
详解Python中的type()方法的使用
2015/05/21 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
Python 音频生成器的实现示例
2019/12/24 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
python 伯努利分布详解
2020/02/25 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
大四自我鉴定范文
2013/10/06 职场文书
政府信息公开实施方案
2014/05/09 职场文书
本科生自荐信
2014/06/18 职场文书
邓小平理论心得体会
2014/09/09 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
预备党员表决心的话
2015/09/22 职场文书
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript