search

Home  >  Article  >  Web Front-end  >  DIV CSS JS implementation picture

Seamless scrolling code_html/css_WEB-ITnose

DIV CSS JS implementation picture
Seamless scrolling code_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:27:141060browse

（含上下左右滚动代码）<!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><title></title><style type="text/css"><!--UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; LIST-STYLE-POSITION: outside; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; overflow: hidden;}#S_LIST LI { width:154px; height:auto; float:left; padding: 0px; margin: 0px; list-style-image: none; list-style-type: none;}#S_LIST A { DISPLAY: block; MARGIN: 0px; WIDTH: 154px; HEIGHT: auto; TEXT-ALIGN: center; padding-top: 3px; padding-right: 0px; padding-bottom: 3px; padding-left: 0px;}#demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 930px; height:180px;}#demo img {border: 1px solid #F2F2F2;}#indemo {float: left;width: 800%;}#demo1 { float: left;}#demo2 {float: left;}--></style></head><body><div id="demo"><div id="indemo"><div id="demo1">    <ul id="S_LIST">          <li><a href="#"><img src="1.jpg" width="154" height="130" border="0" /></a>      <a href="#" >1</a></li>      <li><a href="#"><img src="2.jpg" width="154" height="130" border="0" /></a>      <a href="#" >2</a></li>      <li><a href="#"><img src="3.jpg" width="154" height="130" border="0" /></a>      <a href="#" >3</a></li>      <li><a href="#"><img src="4.jpg" width="154" height="130" border="0" /></a>      <a href="#" >4</a></li>      <li><a href="#"><img src="5.jpg" width="154" height="130" border="0" /></a>      <a href="#" >5</a></li>      <li><a href="#"><img src="6.jpg" width="154" height="130" border="0" /></a>      <a href="#" >6</a></li>      <li><a href="#"><img src="7.jpg" width="154" height="130" border="0" /></a>      <a href="#" >7</a></li>      <li><a href="#"><img src="8.jpg" width="154" height="130" border="0" /></a>      <a href="#" >8</a></li>      <li><a href="#"><img src="9.jpg" width="154" height="130" border="0" /></a>      <a href="#" >9</a></li></ul></div><div id="demo2"></div></div></div><script><!--var speed=10;var tab=document.getElementById("demo");var tab1=document.getElementById("demo1");var tab2=document.getElementById("demo2");tab2.innerHTML=tab1.innerHTML;function Marquee(){if(tab2.offsetWidth-tab.scrollLeft<=0)tab.scrollLeft-=tab1.offsetWidthelse{tab.scrollLeft++;}}var MyMar=setInterval(Marquee,speed);tab.onmouseover=function() {clearInterval(MyMar)};tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};--></script></body></html>+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 上下滚动代码：<div id="demo" style="overflow:hidden;height:500px;width:120px; border:1px solid #dde5bc; overflow:hidden;float:left"><div id=demo1> <img src="images/js01.gif" width="120" height="120"><img src="images/js02.gif" width="120" height="120"> <img src="images/js03.gif" width="120" height="120"><img src="images/js04.gif" width="120" height="120"><img src="images/js05.gif" width="120" height="120"><img src="images/js06.gif" width="120" height="120"><img src="images/js07.gif" width="120" height="120"><img src="images/js08.gif" width="120" height="120"><img src="images/js09.gif" width="120" height="120"></div><div id=demo2></div></div><script>var speed=40var demo=document.getElementById("demo");var demo2=document.getElementById("demo2");var demo1=document.getElementById("demo1");demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo2.offsetTop-demo.scrollTop<=0)demo.scrollTop-=demo1.offsetHeightelse{demo.scrollTop++}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>

 

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML DIV CSS_html/css_WEB-ITnoseNext article：HTML DIV CSS_html/css_WEB-ITnose

Related articles

See more