使用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 相关文章推荐
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
Vue组件简易模拟实现购物车
Dec 21 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
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
php实现webservice实例
2014/11/06 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
PHP进程同步代码实例
2015/02/12 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
文本加密解密
2006/06/23 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
2018/08/20 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
详解Python迭代和迭代器
2016/03/28 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
numpy中的meshgrid函数的使用
2019/07/31 Python
python装饰器代替set get方法实例
2019/12/19 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
全球最大的服务市场:Fiverr
2017/01/03 全球购物
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
博士生求职信
2014/07/06 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
心术观后感
2015/06/11 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript