정보 스크롤 기능을 완성하기 위한 JS의 코드 예제-JS 튜토리얼-php.cn

정보 스크롤 기능을 완성하기 위한 JS의 코드 예제

Y2J

풀어 주다： 2017-05-20 13:15:54

원래의

1324명이 탐색했습니다.

이 글에서는 주로 정보 스크롤 효과를 달성하기 위한 Javascript를 소개하며, 이는 특정 참조 가치가 있습니다. 관심 있는 친구들은 이를 참고할 수 있습니다.

이 글의 예는 js 정보 스크롤 효과를 여러분과 공유합니다. 코드는 참고용입니다.

끊김없는 위쪽 스크롤:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>向上无缝滚动</title>
<style>
body {
 font-size: 12px;
 line-height: 24px;
 text-algin: center;  /* 页面内容居中 */
}
* {
 margin: 0px;
 padding: 0px;   /* 去掉所有标签的marign和padding的值 */
}
ul {
 list-style: none;   /* 去掉ul标签默认的点样式 */
}
a img {
 border: none;  /* 超链接下，图片的边框 */
}
a {
 color: #333;
 text-decoration: none;  /* 超链接样式 */
}
a:hover {
 color: #ff0000;
}
#mooc {
 width: 399px;
 border: 5px solid #ababab;
 -moz-border-radius: 15px;  /* Gecko browsers */
 -webkit-border-radius: 15px; /* Webkit browsers */
 border-radius: 15px;
 box-shadow: 2px 2px 10px #ababab;
 margin: 50px auto 0;
 text-align: left;    /* 让新闻内容靠左 */
}
/* 头部样式 */ 
#moocTitle {
 height: 62px;
 overflow: hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */
 font-size: 26px;
 line-height: 62px;
 padding-left: 30px;
 background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#8fa1ff&#39;, endColorstr=&#39;#f05e6f&#39;, GradientType=&#39;0&#39;); /* IE*/
 border: 1px solid ##f05e6f;
 -moz-border-radius: 8px 8px 0 0;  /* Gecko browsers */
 -webkit-border-radius: 8px 8px 0 0; /* Webkit browsers */
 border-radius: 8px 8px 0 0;
 color: #fff;
 position: relative;
}
#moocTitle a {
 position: absolute;
 right: 10px;
 bottom: 10px;
 display: inline;
 color: #fff;
 font-size: 12px;
 line-height: 24px;
}
/* 底部样式 */
#moocBot {
 width: 399px;
 height: 10px;
 overflow: hidden;  /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */
}
/* 中间样式 */
#moocBox {
 height: 144px;
 width: 335px;
 margin-left: 25px;
 margin-top: 10px;
 overflow: hidden; /* 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
}
#mooc ul li {
 height: 24px;
}
#mooc ul li a {
 width: 180px;
 float: left;
 display: block;
 overflow: hidden;
 text-indent: 15px;
 height: 24px;
}
#mooc ul li span {
 float: right;
 color: #999;
}
</style>
</head>

<body>
<!-- 慕课网课程公告开始 -->
<p id="mooc"> 
<!-- 头部 -->
<h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a> </h3>
<!-- 头部结束 --> 
<!-- 中间 -->
<p id="moocBox">
 <ul id="con1">
  <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>
  <li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
  <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
  <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
  <li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
  <li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
  <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
  <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
  <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
 </ul>
 <ul id="con2">
 </ul>
</p>
<!-- 中间结束 --> 
</p>
<!-- 慕课网课程公告结束 --> 

<script type="text/javascript">
 var area = document.getElementById(&#39;moocBox&#39;);
 var con1 = document.getElementById(&#39;con1&#39;);
 var con2 = document.getElementById(&#39;con2&#39;);
 var speed = 50;
 area.scrollTop = 0;
 con2.innerHTML = con1.innerHTML;
 function scrollUp(){
  if(area.scrollTop >= con1.scrollHeight) {
   area.scrollTop = 0;
   }else{
   area.scrollTop ++; 
   } 
}
var myScroll = setInterval("scrollUp()",speed);
area.onmouseover = function(){
  clearInterval(myScroll);
 }
area.onmouseout = function(){
  myScroll = setInterval("scrollUp()",speed);
 }
 </script>
</body>
</html>

로그인 후 복사

간헐적 스크롤:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻无缝向上无缝滚动</title>
<style>
body {
 font-size: 12px;
 line-height: 24px;
 text-algin: center;  /* 页面内容居中 */
}
* {
 margin: 0px;
 padding: 0px;   /* 去掉所有标签的marign和padding的值 */
}
ul {
 list-style: none;   /* 去掉ul标签默认的点样式 */
}
a img {
 border: none;  /* 超链接下，图片的边框 */
}
a {
 color: #333;
 text-decoration: none;  /* 超链接样式 */
}
a:hover {
 color: #ff0000;
}
#mooc {
 width: 399px;
 border: 5px solid #ababab;
 -moz-border-radius: 15px;  /* Gecko browsers */
 -webkit-border-radius: 15px; /* Webkit browsers */
 border-radius: 15px;
 box-shadow: 2px 2px 10px #ababab;
 margin: 50px auto 0;
 text-align: left;    /* 让新闻内容靠左 */
}
/* 头部样式 */ 
#moocTitle {
 height: 62px;
 overflow: hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */
 font-size: 26px;
 line-height: 62px;
 padding-left: 30px;
 background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */
 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#8fa1ff&#39;, endColorstr=&#39;#f05e6f&#39;, GradientType=&#39;0&#39;); /* IE*/
 border: 1px solid ##f05e6f;
 -moz-border-radius: 8px 8px 0 0;  /* Gecko browsers */
 -webkit-border-radius: 8px 8px 0 0; /* Webkit browsers */
 border-radius: 8px 8px 0 0;
 color: #fff;
 position: relative;
}
#moocTitle a {
 position: absolute;
 right: 10px;
 bottom: 10px;
 display: inline;
 color: #fff;
 font-size: 12px;
 line-height: 24px;
}
/* 底部样式 */
#moocBot {
 width: 399px;
 height: 10px;
 overflow: hidden;  /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */
}
/* 中间样式 */
#moocBox {
 height: 144px;
 width: 335px;
 margin-left: 25px;
 margin-top: 10px;
 overflow: hidden; /* 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
}
#mooc ul li {
 height: 24px;
}
#mooc ul li a {
 width: 180px;
 float: left;
 display: block;
 overflow: hidden;
 text-indent: 15px;
 height: 24px;
}
#mooc ul li span {
 float: right;
 color: #999;
}
</style>
</head>

<body>
<!-- 慕课网课程公告开始 -->
<p id="mooc"> 
<!-- 头部 -->
<p id="moocTitle">慕课网最新课程<a href="#" target="_self">更多>></a> </p>
<!-- 头部结束 --> 
<!-- 中间 -->
<p id="moocBox">
 <ul>
  <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>
  <li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
  <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
  <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
  <li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
  <li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
  <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
  <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
  <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
 </ul>
</p>
<!-- 中间结束 --> 
<!-- 底部 -->
<p id ="moocBot"> </p>
<!-- 底部结束 --> 
</p>
<!-- 慕课网课程公告结束 --> 

<script type="text/javascript">
 var area = document.getElementById(&#39;moocBox&#39;);
 var iliHeight = 24;//单行滚动的高度
 var speed = 50;//滚动的速度
 var time;
 var delay= 2000;
 area.scrollTop=0;
 area.innerHTML+=area.innerHTML;//克隆一份一样的内容
 function startScroll(){
  time=setInterval("scrollUp()",speed);
  area.scrollTop++;
  }
 function scrollUp(){
  if(area.scrollTop % iliHeight==0){
   clearInterval(time);
   setTimeout(startScroll,delay);
   }else{
    area.scrollTop++;
    if(area.scrollTop >= area.scrollHeight/2){
     area.scrollTop =0;
     }
    }
  }
  setTimeout(startScroll,delay)
 </script>
</body>
</html>

로그인 후 복사

[관련] 추천】

1. Javascript 무료 동영상 튜토리얼

2. JS에서 배열 요소를 재귀적으로 삭제하는 방법에 대한 자세한 설명

3. JS의 별점 기능 완성 예시에 대한 자세한 설명

4. JS는 텍스트가 전각인지 반각인지 어떻게 결정하나요

5. nodejs+websocket으로 채팅 시스템 기능 완성

위 내용은 정보 스크롤 기능을 완성하기 위한 JS의 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!