JS는 고정된 영역에 매우 간결한 링크 목록 스크롤 효과 코드를 구현합니다.-JS 튜토리얼-php.cn

JS는 고정된 영역에 매우 간결한 링크 목록 스크롤 효과 코드를 구현합니다.

PHPz

풀어 주다： 2018-09-28 16:12:01

앞으로

1261명이 탐색했습니다.

이 기사에서는 주로 JS를 소개하여 고정 영역에 매우 간결한 링크 목록 스크롤 효과 코드를 구현하고, 매우 일반적인 페이지 요소 속성 변환 제어를 통해 스크롤 효과를 달성하고, 간단하고 실용적이며, 도움이 필요한 친구들이 참조할 수 있습니다.

이 초경량 버전의 링크 목록 텍스트 스크롤 코드는 지정된 영역 내에서 스크롤할 수 있습니다. 물론 영역 크기를 직접 설정할 수도 있습니다.

실행 중인 효과의 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http: //demo.jb51.net/ js/2015/js-link-list-scroll-style-codes/

구체 코드는 다음과 같습니다.

<html>
<HEAD>
<TITLE>文字链接列表滚动</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>
#demo a {
 width:100%;
 overflow:hidden;
 font:12px/16px tahoma;
 display:block;
 text-decoration:none;
 margin:2px;
 color:#4a551c;
 padding-left:2px;
 text-align:left;
}
#demo a:hover {
 color:#ff6600;
}
</STYLE>
</HEAD>
<body>
<p id="demo" style="overflow:hidden;height:132px;width:350px; border:1px solid #dde5bc;">
 <p id="demo1"> 
  <a href="#">多彩的电脑机箱图标，很多颜色和风格……</a>
  <a href="#">地方税务局网站建设方案 ……</a>
  <a href="#">获得系统内存，并以圆饼图表现百分比……</a>
  <a href="#">多彩的电脑机箱图标，很多颜色和风格……</a>
  <a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
  <a href="#">地方税务局网站建设方案 ……</a>
  <a href="#">多彩的电脑机箱图标，很多颜色和风格……</a>
  <a href="#">地方税务局网站建设方案 ……</a>
  <a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
  <a href="#">获得系统内存，并以圆饼图表现百分比……</a>
  <a href="#">完全兼容IE, FF, Opera, 其它的还未经测试……</a>
  <a href="#">获得系统内存，并以圆饼图表现百分比……</a>
 </p>
 <p id="demo2"></p>
</p>
<script>
var speed=40
var demo=document.getElementById("demo");
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
 if(demo2.offsetTop-demo.scrollTop<=0)
  demo.scrollTop-=demo1.offsetHeight
 else{
  demo.scrollTop++
 }
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>

로그인 후 복사

위의 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요.