使用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 相关文章推荐
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
JS highcharts实现动态曲线代码示例
Oct 16 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 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
PHP生成Flash动画的实现代码
2010/03/12 PHP
PHP中的Memcache详解
2014/04/05 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
js 格式化时间日期函数小结
2010/03/20 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
Python中的列表知识点汇总
2015/04/14 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
Python下Fabric的简单部署方法
2015/07/14 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Python列表切片常用操作实例解析
2019/12/16 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
校园达人秀策划书
2014/01/12 职场文书
销售人员获奖感言
2014/02/05 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
教师暑期培训感言
2014/08/15 职场文书
2014年变电站工作总结
2014/12/19 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python