萬盛學電腦網 >> 腳本專題 >> javascript >> 使用CSS3的scale實現網頁整體縮放
使用CSS3的scale實現網頁整體縮放
QQ郵箱的網頁整體縮放效果，原來實現方法如此簡單，下面有個實現示例，大家可以參考下
今天學習了一下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排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved