使用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 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
javascript类型转换使用方法
Feb 08 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
浅谈javascript中return语句
Jul 15 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 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编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
批量修改RAR文件注释的php代码
2010/11/20 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
Python数组条件过滤filter函数使用示例
2014/07/22 Python
Python中的filter()函数的用法
2015/04/27 Python
python妹子图简单爬虫实例
2015/07/07 Python
独特的python循环语句
2016/11/20 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
请介绍一下Ant
2016/07/22 面试题
哈理工毕业生的求职信
2013/12/22 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
党校毕业个人总结
2015/02/28 职场文书
企业员工辞职信范文
2015/05/12 职场文书
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers