使用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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
jquery.validate使用攻略 第一部
Jul 01 Javascript
js实现的map方法示例代码
Jan 13 Javascript
深入探讨JavaScript String对象
Mar 09 Javascript
详谈javascript中的cookie
Jun 03 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
用vue设计一个日历表
Dec 03 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
使用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
MySQL时间字段究竟使用INT还是DateTime的说明
2012/02/27 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
php动态变量定义及使用
2015/06/10 PHP
10条php编程小技巧
2015/07/07 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
JavaScript多态与封装实例分析
2018/07/27 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
基于JS实现快速读取TXT文件
2020/08/25 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
python命令行工具Click快速掌握
2019/07/04 Python
python中update的基本使用方法详解
2019/07/17 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
Python使用OpenPyXL处理Excel表格
2020/07/02 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
澳大利亚窗帘商店:Curtain Wonderland
2019/12/01 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
秘书英文求职信范文
2014/01/31 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书