您的位置：首页 > Web前端 > JavaScript

js获取各种浏览器宽度

2015-08-13 16:21 525 查看

重视基础知识，一步一个脚印

这是网上的一篇文章，自己写出来加深下印象。

屏幕的有效宽度

这个我发现在每个桌面浏览器上，不管窗口大小都是1366x728，就是桌面分辨率再减去桌面底部的任务栏。而手机没有任务栏，因此就是手机实际的宽度，这里手机我添加了视口约束，

window.screen.availHeight
window.screen.availWidth

实战练习

学习地址感谢分享

看到scrollTop 、scrollLeft、scrollHeight、scrollWidth的时候反复测试发现好像一直都是0，偶然发现了文字滚动效果，好像就是使用的这个，扒了下教程，大致理解了，这几个的用法。

效果就是实现文字无间隔地向上滚，鼠标经过时，停止滚动。很常见的一类效果。大致实现原理是这样的：

设置一个父盒子，里面是内容，设置你要滚动区域的高宽，基础搭好后，开始滚了，先获取父盒子id，然后设置scrollTop的值，不断加就行了，可以使用循环，人家代码是使用setInterval(函数名，间隔)，意思多长时间执行一次，然后写滚动函数，scrollTop+=1，就一直滚了。

var o=document.getElementById("scrollbox");//取父盒子
o.scrollTop=0;
t=setInterval(scrolling,50); //设置间隔
function scrolling(){
o.scrollTop+=1;
}

遇到第一个问题，我滚完了怎么办，如何能循环滚动？我们的代码是让父盒子的scrollTop一直增加，如果滚完了，把scrollTop设置为0，不就又重新开始了。那解决两个问题，一：判断什么时候滚完了，二，解决回滚时的视觉突变问题。

第一个：

这里用到scrollHeight,其实它指的就是整个盒子内容的高度，那滚一轮的高度scrollTop是多少，其实是scrollHeight-height(滚动区域高度）;也就是说当scrollTop>=scrollHeight-height;表示滚完一圈了。设置scrollTop=0，就可以重新滚动了，运行就发现不对劲了，会有视觉突变，不自然。那怎么办呢？

第二个：

为什么会产生视觉突变，是因为两次看到的画面不一样，为什么gif动图看着像视频，因为眼睛有视觉停留效应，如果我们回滚时的页面和回滚后的页面一样，眼睛就可以欺骗我们了。那就行了，设置回滚时的页面和scrollTop为0时候的页面一样，怎么一样？这里使用代码o.innerHTML+=o.innerHTML,把内容复制一遍，这样就可以滚完完整的一圈了。就是滚完复制前的内容完整的高度。这时设置scrollTop为0，欺骗成功。

var o=document.getElementById("scrollbox");
o.innerHTML+=o.innerHTML;
o.scrollTop=0;
t=setInterval(scrolling,50);
function scrolling(){
o.scrollTop+=1;
if(o.scrollTop>=o.scrollHeight/2)
{o.scrollTop = 0; }
}
//clearInterval(t);取消滚动

但是我想让效果更好，滚完一行，暂停一会，鼠标经过，停止滚动。

第一个

判断每滚完一行，取消滚动，延时一定时间，开启滚动。

if(o.scrollTop%lh!=0){//每一行，那就是line-height的倍数
o.scrollTop+=1;
if(o.scrollTop>=o.scrollHeight/2)
{o.scrollTop = 0; }
}
else{
clearInterval(t);//先停下来，延迟一定时间，再开始
setTimeout(start,delay);
}

但是这里有二个问题，那就是，最开始的时候0也是lh的倍数，还有，延时函数，scrolling(),已经设置间隔执行了，因此需要再绑定一个函数。start(),这样，代码如下

function start(){
t=setInterval(scrolling,speed); //设置间隔，没50毫秒执行一次scrolling()函数
o.scrollTop+=1;//考虑到初始值为0，要加1
}
function scrolling(){
if(o.scrollTop%lh!=0){
o.scrollTop+=1;
if(o.scrollTop>=o.scrollHeight/2)
{o.scrollTop = 0; }
}
else{//当为60倍数时，停止。延时一定时间delay后，重启start(),值自动加1，重复循环
clearInterval(t);
setTimeout(start,delay);
}
}

第二个鼠标经过暂停。js中的鼠标滑过事件

o.onmouseover=function(){p=true;}
o.onmouseout=function(){p=false;}//鼠标离开，!p为真

function start(){//加不了1，自然停止，
t=setInterval(scrolling,speed);
if(!p){o.scrollTop+=1;}
}

实战代码整理

<style>
*{margin:0;padding:0;}
h1,p{text-align: center;}
.scrollbox{height:120px;line-height: 60px;margin:30px auto;text-align: center;font-size:40px;overflow: hidden;}
.scrollbox ul{list-style: none;}
</style>

<body>
<h1>晓出静慈寺送林子方</h1>
<p>杨万里</p>
<div class="scrollbox" id="scrollbox1">
<ul>
<li>毕竟西湖六月中，风光不与四时同。</li>
<li>接天莲叶无穷碧，映日荷花别样红。</li>
</ul>
</div>
</body>
<script>
window.onload=function(){
function scrolljs(lh,speed,delay,index){//行高，速度，停留时间，父盒子id索引。
var t,p=false;
var o=document.getElementById("scrollbox"+index);
o.innerHTML+=o.innerHTML;
o.onmouseover=function(){p=true;}
o.onmouseout=function(){p=false;}
o.scrollTop=0;
function start(){
t=setInterval(scrolling,speed); //设置间隔
if(!p){o.scrollTop+=1;}
}
function scrolling(){
if(o.scrollTop%lh!=0){
o.scrollTop+=1;
if(o.scrollTop>=o.scrollHeight/2)
{o.scrollTop = 0; }
}
else{
clearInterval(t);
setTimeout(start,delay);
}
}
start();//这里我看人家的是setTimeout(start,delay)，想到scrolling()50秒执行一次，再转到else的setTimeout(),也一样了
}
scrolljs(60,30,300,1);//使用时记得父盒子命名为scrollbox+索引值即可
}
</script>

总结

本来想再添加一个参数的，就是方向参数，然后if判断，但是获取id值时一直出错，比如父盒子id是scrollbox,scrolljs();里index,传的也是这个，但是getElementById时，一直获取不到，我试了转义字符也不行，而且传递方向参数时，scrollTop也得不到。偷懒的我就没再想了，想出来了，虽然调用简单，但其实代码更复杂了，就没搞了

"\""+index+"\""
"scroll"+dir

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航