使用jquery和javascript创建缩放效果(在net.magazine中公布的代码) 但在下一步中,尝试将此网络调整为不同的设备(使用媒体查询.etc) 我遇到了问题 我试图检测窗口大小(我的笔记本电脑屏幕尺寸是.1024 x 768) 我得到窗口和文件宽度/高度相同的结果= 737x402!?为什么? 是因为缩放比例不是全屏的吗?
<div id=wrap>
<div id=container>
<div id=content>
<div class=section id=first ></div>
<div class=section id=second ></div>
</div>
</div>
</div>
<div id=scroller ></div>
css
body{
margin: 0;
padding: 0;
}
#wrap {
position: fixed;
width: 100%;
}
#scroller {
height: 1500px;
}
#container {
position: relative;
top:-57px;
margin:0 auto;
width: 1070px;
height: 665px;
}
#content {
height: 665px;
position: absolute;
width: 100%;
}
#front-first {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
background: url(images/pic1.jpg) no-repeat;
background-size:70%;
position: absolute;
z-index:20;
display: block;
width: 1070px;
height: 665px;
margin: 0 auto;
}
#front-second {
-webkit-transform: scale(0.3333);
-moz-transform: scale(0.3333);
-o-transform: scale(0.3333);
transform: scale(0.3333);
background: url(images/pic2.jpg) no-repeat;
background-size:70%;
position: absolute;
z-index:20;
display: block;
width: 1070px;
height: 665px;
margin: 0 auto;
}
<script>
$(document).ready(function(){
browserWindowheight = $(window).height();
alert(browserWindowheight);
browserWindowwidth = $(window).width();
alert(browserWindowwidth);
function Zoomer(content) {
this.content = content;
this.scrolled = 0;
this.levels = 4;
this.docHeight = document.documentElement.offsetHeight;
// bind Zoomer to scroll event
window.addEventListener('scroll', this, false);
}
Zoomer.prototype.handleEvent = function(event) {
if(this[event.type]) {
this[event.type](event);
}
};
Zoomer.prototype.scroll = function(event) {
this.scrolled = window.scrollY / (this.docHeight - window.innerHeight );
};
Zoomer.prototype.scroll = function(event) {
this.scrolled = window.scrollY / (this.docHeight - window.innerHeight );
var scale = Math.pow(3, this.scrolled * this.levels), transformValue = 'scale(' + scale + ')';
this.content.style.WebkitTransform = transformValue;
this.content.style.MozTransform = transformValue;
this.content.style.OTransform = transformValue;
this.content.style.transform = transformValue;
};
function init() {
var content = document.getElementById('content'),
// init Zoomer constructor
ZUI = new Zoomer(content);
}
window.addEventListener('DOMContentLoaded', init, false);
});
<script>
</html>
答案 0 :(得分:0)
我不知道如何回答你的问题,但我谷歌了,我发现了这个:http://www.javascripter.net/faq/browserw.htm
希望它有所帮助! =)
答案 1 :(得分:0)
使用JS:
screen.width;
screen.height;
这将检测*屏幕尺寸而不是浏览器尺寸
var winWidth = screen.width;
var winWidth = screen.height;