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

[练习3]js学习之图片的竖直滚动

2016-04-04 21:45 615 查看

<!DOCTYPE <!DOCTYPE html>

<html>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<head>

<title></title>

<style type="text/css">

  body{

   font-size: 12px;

   font-family: 'Mirosoft YaHei','微软雅黑','SimSun','宋体';

   background: #FFFFFF;

   margin: 0px;

   padding: 0px;

   text-align: center;

   color: #000000;

  }

  img{

   display: block;

   width: 220px;

   height: 70px;

   margin: 5px 0px;

  }

  div.news_root{

   width: 255px;

   height: 134px;

   text-align: left;

   margin: 0 auto;

   background: url(images/bg_news.gif);

   background-repeat: no-repeat;

  }

  div.news_header{

   width: 243px;

   height: 16px;

   vertical-align: top;

   text-align: left;

   font-size: 14px;

   padding: 6px;

  }

  #scrollContainer{

   width: 245px;

   margin: 2px 5px;

   overflow: hidden;/*这里是滚动的关键，将超出边框的部分隐藏，造成了滚动的效果*/

   text-align: left;

  }

</style>

</head>

<body>

<div class="news_root">

  <div class="news_header">Headliner</div>

  <div id="scrollContainer">

   <div id="scrollContent">

    <img src="http://blog.csdn.net/beiyuxinke/article/details/img/1.jpg" alt="企鹅">

    <img src="http://blog.csdn.net/beiyuxinke/article/details/img/2.jpg">

    <img src="http://blog.csdn.net/beiyuxinke/article/details/img/3.jpg">

    <img src="http://blog.csdn.net/beiyuxinke/article/details/img/4.jpg">

    <img src="http://blog.csdn.net/beiyuxinke/article/details/img/5.jpg">

    <img src="http://blog.csdn.net/beiyuxinke/article/details/img/6.jpg">

    <img src="http://blog.csdn.net/beiyuxinke/article/details/img/7.jpg">

    <img src="http://blog.csdn.net/beiyuxinke/article/details/img/8.jpg">

   </div>

  </div>

</div>

<script type="text/javascript">
var stopscroll = false; //设置是否滚动的开关

var scrollContHeight = 200;

var scrollContWidth = 230;

var scrollSpeed = 25;

var scrollContainer = document.getElementById("scrollContainer");

var scrollContent = document.getElementById("scrollContent");

do{

  scrollContainer.appendChild(scrollContent.cloneNode(true));

}while(scrollContainer.offsetHeight < scrollContHeight);//强制运行一次，复制一次内容到容器中，使滚动看起来更连贯
scrollContainer.style.width = scrollContWidth + "px";

scrollContainer.style.height = scrollContHeight + "px";

scrollContainer.noWrap = true;
scrollContainer.onmouseover = new Function("stopscroll=true");

scrollContainer.onmouseout = new Function("stopscroll=false");

function init () {

  // body...

  scrollContainer.scrollTop = 0;

  setInterval("scrollUp()",scrollSpeed);

}

init();

var currTop = 0;

function scrollUp(){

  if (stopscroll == true) return;

  currTop = scrollContainer.scrollTop;

  scrollContainer.scrollTop +=1;

  if (currTop == scrollContainer.scrollTop) {

   console.log(currTop + "&&" + scrollContainer.scrollTop)

   scrollContainer.scrollTop = 0;

   scrollContainer.scrollTop += 1;

  }

}

</script>

</body>

</html>

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

标签： js DHTML

相关文章推荐

新的分享

章节导航