元素的横向滑动和纵向滑动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>元素的横向滑动和纵向滑动</title>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<style>
#div1{width:200px;height:200px; background-color:#FFC; overflow:hidden}
#div2{width:300px;height:20px; background-color:#6FF;overflow:hidden;white-space:nowrap}
#pic1{width:500px;height:100px;overflow:hidden;white-space:nowrap}
#pic1 img{width:100px;height:100px}
#myp2{width:100px;height:500px;overflow-y:hidden;}
#myp2 img{width:100px;height:100px}

</style>

</head>

<body>
<div style="color:#F03; font-size:28px">纵向文字</div>
<div id="div1">现在我已经有了很多作品，出版了一部部小说、戏剧和电影剧本。我越来越体会到我当初是多么幸运。我有个慈祥的母亲，她常常对我说：“巴迪，这是你写的吗？精彩极了。”我还有个严厉的父亲，他总是皱着眉头，说：“这个糟糕透了。”一个作家，应该说生活中的每一个人，都需要来自母亲的力量，这种爱的力量是灵感和创作的源泉。但是仅有这个是不全面的，它可能会把人引入歧途。所以还需要警告的力量来平衡，需要有人时常提醒你：“小心，注意，总结，提高。”这些年来，我少年时代听到的这两种声音一直交织在我的耳际：“精彩极了”，“糟糕透了”；“精彩极了”，“糟糕透了”……它们像两股风不断地向我吹来。我谨慎地把握住我生活的小船，使它不被哪一股风刮倒。我从心底里知道，“精彩极了”也好，“糟糕透了”也好，这两个极端的断言有一个共同的出发点——那就是爱。在爱的鼓舞下，我努力地向前驶去。</div><hr/><br/>
<div style="color:#F03; font-size:28px">横向文字</div>
<div id="div2">这些年来，我少年时代听到的这两种声音一直交织在我的耳际：“精彩极了”，“糟糕透了”；“精彩极了”，“糟糕透了”……它们像两股风不断地向我吹来。我谨慎地把握住我生活的小船，使它不被哪一股风刮倒。我从心底里知道，“精彩极了”也好，“糟糕透了”也好，这两个极端的断言有一个共同的出发点——那就是爱。在爱的鼓舞下，我努力地向前驶去。</div><hr/><br/>
<div style="color:#F03; font-size:28px">横向图片</div>
<hr/><br/>
<div id="pic1">

</div>
<hr/><br/>
<div style="color:#F03; font-size:28px">纵向图片</div>
<div id="myp2">

</div>
</body>
<script>
$(document).ready(function() {
//div1
var i;var div1=document.getElementById("div1");
var st=function(){

div1.scrollTop++;
if(div1.scrollTop==div1.scrollHeight-div1.clientHeight){//该div总高度包括超出设定（不可见）的高度-div设定的高度（改div窗的高度，可见高度）
div1.scrollTop=0;
}
}
setInterval(st,40);

//div2
var j;var div2=document.getElementById("div2");
var sl=function(){
j=div2.scrollLeft++;//获取scrollLeft未加1时的值赋值给j
if(j==div2.scrollLeft){//当scrollLeft++已经不生效，时也就是滚动条到头。
div2.scrollLeft=0;
}
}
setInterval(sl,40);

});

$(document).ready(function() {
//pic1
var myHtml="";
for(var i=101;i<=120;i++){//循环加入图片
myHtml=myHtml+"<img src='images/"+i+".jpg'/>";
}
$("#pic1").html(myHtml);
var x;var pic1=document.getElementById("pic1");
var sl=function(){
x=pic1.scrollLeft++;
if(x==pic1.scrollLeft)
{
pic1.scrollLeft=0;
}
}
setInterval(sl,40);
//myp2
$("#myp2").html(myHtml);
var y;var myp2=document.getElementById("myp2");
var st=function(){
y=myp2.scrollTop++;
if(y==myp2.scrollTop)
{
myp2.scrollTop=0;
}
}
setInterval(st,40);
});

</script>
</html>

元素的横向滑动和纵向滑动

猜你喜欢