使用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 相关文章推荐
不安全的常用的js写法
Sep 15 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
基于Vue实现拖拽效果
Apr 27 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
详解node登录接口之密码错误限制次数(含代码)
Oct 25 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
星际实力自我测试
2020/03/04 星际争霸
php常用字符串处理函数实例分析
2014/11/22 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
JavaScript实现随机点名器实例详解
2019/05/07 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
Python简单进程锁代码实例
2015/04/27 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
出纳的岗位职责
2013/11/09 职场文书
校园自助餐厅的创业计划书
2013/12/26 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
职业规划实施方案
2014/06/10 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
房屋产权证明书
2015/06/19 职场文书
中学图书馆工作总结
2015/08/11 职场文书
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python