使用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 相关文章推荐
javascript 贪吃蛇实现代码
Nov 22 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
JS闭包用法实例分析
Mar 27 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
Vue3.0的优化总结
Oct 16 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网上商城购物车设计代码分享
2012/02/15 PHP
php程序内部post数据的方法
2015/03/31 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
李宁官方网店:中国运动品牌
2017/11/02 全球购物
迟到检讨书800字
2014/01/13 职场文书
美术指导求职信
2014/03/17 职场文书
演讲稿格式范文
2014/05/19 职场文书
营销总监岗位职责
2014/09/16 职场文书
升学宴来宾致辞
2015/07/27 职场文书
学校教学管理制度
2015/08/06 职场文书