您的位置：首页 > Web前端 > JavaScript
javaScript滚动新闻之上下左右平滑滚动

2016-02-24 20:45 671 查看
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>平滑滚动</title>
</head>
<style>
<!--
#picture_div1{
width:300px;
height:100px;
float:left;
overflow:hidden;
position:relative;
left:0px;
top:0px;
}
#picture_div4{
width:300px;
height:100px;
float:left;
overflow:hidden;
position:relative;
left:50%;
top:0px;
}
#picture_in1,#picture_in2{
float:left;
width:800%;
}
#picture_div2,#picture_div3,#picture_div5,#picture_div6,img{
float:left;
}

#wenzi_div1{
position:relative;
left:0px;
top:20%;
width:170px;
height:105px;
overflow:hidden;
}
#wenzi_div2{
position:relative;
left:50%;
top:20%;
width:170px;
height:105px;
overflow:hidden;
}
#wenzi_in1,#wenzi_in2{
float:left;
height:800%;
}
-->
</style>
<body>
<br /><h1 style="text-align:center">图片</h1><hr />
<div id="picture_div1">
<div id="picture_in1">
<div id="picture_div2">
<img src="imgs/11.png"/>
<img src="imgs/22.png"/>
<img src="imgs/33.png"/>
</div>
<div id="picture_div3"></div>
</div>
</div>
<div id="picture_div4" style="position:relative; left:400px; top:0px;">
<div id="picture_in2">
<div id="picture_div5"></div>
<div id="picture_div6">
<img src="imgs/11.png"/>
<img src="imgs/22.png"/>
<img src="imgs/33.png"/>
</div>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><h1 style="text-align:center">文字</h1><hr />
<div id="wenzi_div1">
<div id="wenzi_in1">
<ul id="wenzi_ul1">
<li>这里是第1条新闻</li>
<li>这里是第2条新闻</li>
<li>这里是第3条新闻</li>
<li>这里是第4条新闻</li>
<li>这里是第5条新闻</li>
<li>这里是第6条新闻</li>
<li>这里是第7条新闻</li>
<li>这里是第8条新闻</li>
<li>这里是第9条新闻</li>
<li>这里是第10条新闻</li>
</ul>
<ul id="wenzi_ul2"></ul>
</div>
</div>
<div id="wenzi_div2">
<div id="wenzi_in2">
<ul id="wenzi_ul3"></ul>
<ul id="wenzi_ul4">
<li>这里是第1条新闻</li>
<li>这里是第2条新闻</li>
<li>这里是第3条新闻</li>
<li>这里是第4条新闻</li>
<li>这里是第5条新闻</li>
<li>这里是第6条新闻</li>
<li>这里是第7条新闻</li>
<li>这里是第8条新闻</li>
<li>这里是第9条新闻</li>
<li>这里是第10条新闻</li>
</ul>
</div>
</div>
</body>
<script language="javascript" type="text/javascript">
//图片控制
//向左側
var picture_div1 =  document.getElementById('picture_div1');
var picture_div2 =  document.getElementById('picture_div2');
var picture_div3 =  document.getElementById('picture_div3');
picture_div3.innerHTML = picture_div2.innerHTML;
var speed = 10;
function pictureMarquee1(){
if(picture_div3.offsetWidth - picture_div1.scrollLeft <= 0){
picture_div1.scrollLeft -= picture_div2.offsetWidth;
}else{
picture_div1.scrollLeft++;
}
}
var picture_id1 = setInterval(pictureMarquee1,speed);
picture_div1.onmouseover = function(){
clearTimeout(picture_id1);
}
picture_div1.onmouseout = function(){
picture_id1 = setInterval(pictureMarquee1,speed);
}
//向右側
var picture_div4 =  document.getElementById('picture_div4');
var picture_div5 =  document.getElementById('picture_div5');
var picture_div6 =  document.getElementById('picture_div6');
picture_div5.innerHTML = picture_div6.innerHTML;
function pictureMarquee2(){
if(picture_div4.scrollLeft <= 0){
picture_div4.scrollLeft += picture_div5.offsetWidth;
}else{
picture_div4.scrollLeft--;
}
}
var picture_id2 = setInterval(pictureMarquee2,speed);
picture_div4.onmouseover = function(){
clearTimeout(picture_id2);
}
picture_div4.onmouseout = function(){
picture_id2 = setInterval(pictureMarquee2,speed);
}

//文字控制
//向左側
var wenzi_div1 = document.getElementById('wenzi_div1');
var wenzi_ul1 = document.getElementById('wenzi_ul1');
var wenzi_ul2 = document.getElementById('wenzi_ul2');
var speed1 = 100;
wenzi_ul2.innerHTML = wenzi_ul1.innerHTML;
function wenziMarquee1(){
if(wenzi_ul2.offsetHeight - wenzi_div1.scrollTop <= 0){
wenzi_div1.scrollTop -= wenzi_ul1.offsetHeight;
}else{
wenzi_div1.scrollTop++;
}
}
var wenzi_id1 = setInterval(wenziMarquee1,speed1);
wenzi_div1.onmouseover = function(){
clearTimeout(wenzi_id1);
}
wenzi_div1.onmouseout = function(){
wenzi_id1 = setInterval(wenziMarquee1,speed1);
}
//向右側
var wenzi_div2 = document.getElementById('wenzi_div2');
var wenzi_ul3 = document.getElementById('wenzi_ul3');
var wenzi_ul4 = document.getElementById('wenzi_ul4');
wenzi_ul3.innerHTML = wenzi_ul4.innerHTML;
function wenziMarquee2(){
if(wenzi_div2.scrollTop <= 0){
wenzi_div2.scrollTop += wenzi_ul3.offsetHeight;
}else{
wenzi_div2.scrollTop--;
}
}
var wenzi_id2 = setInterval(wenziMarquee2,speed1);
wenzi_div2.onmouseover = function(){
clearTimeout(wenzi_id2);
}
wenzi_div1.onmouseout = function(){
wenzi_id2 = setInterval(wenziMarquee2,speed1);
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航