Home >Web Front-end >JS Tutorial >JavaScript simulation scroll bar implementation code_javascript skills

JavaScript simulation scroll bar implementation code_javascript skills

WBOYOriginal: 2016-05-16 18:32:461010browse

In fact, this code creates some redundancy... It is better to write a separate Slider class and save it as the first version. If you have time, try to write a separate Slider class

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style type="text/css"> 
#container { 
height:200px;_height:198px;width:385px;border:1px solid #CCCCCC; 
} 
#container #content{ 
height:200px;width:370px;float:left;overflow:hidden; 
} 
#container #content div{ 
margin-top:4px;margin-left:4px;height:16px;font-size:14px;color:#666666;width:100%; 
} 
#container #scroll{ 
height:200px;width:15px;float:right; 
} 
.b1{width:600px; height:23px; background-image:url(/upload/2010-3/20100311163933339.gif)} 
/*=========================================================*/ 
#container1 { 
height:200px;width:400px;_width:398px;border:1px solid #999999; 
} 
#container1 #content1{ 
height:180px;width:400px;overflow:hidden; 
} 
#container1 #content1 td{ 
height:180px;width:200px; 
} 
#container1 #content1 td img{ 
height:180px;width:200px; 
} 
#container1 #scroll1{ 
height:20px;width:400px; 
} 
#container1 #scroll1 #block1{ 
width:20px;height:20px;background-color:#990000;position:absolute; 
} 
/*====================================================================*/ 
table div{height:20px; font-size:13px; margin-top:5px; color:#333333; font-weight:bold} 
table img{height:160px; width:200px;} 
/*====================================================================*/ 
.b2{background-image:url(/upload/2010-3/20100311163933545.gif); width:26px; height:34px;} 
.b2-1{background:transparent url(/upload/2010-3/20100311163934864.gif) no-repeat scroll center center; width:20px; height:161px; margin-left:4px;} 
.b2-2{background-image:url(/upload/2010-3/20100311163934603.gif); height:22px; width:20px; position:absolute} 
.b2-3{background-image:url(/upload/2010-3/20100311163934887.gif); width:26px; height:34px;} 
/*====================================================================*/ 
.b3{ width:840px; height:216px;border:2px solid #b50000;} 
.b3-1{width:740px; height:216px; margin:0 auto; } 
.b3-2{height:180px; width:100%; overflow:hidden;} 
.b3-l1{height:auto; width:660px;margin:0 auto;} 
.b3-l2{font-size:0px; background-image:url(/upload/2010-3/20100311163934223.gif); height:20px; width:30px; background-position:-182px 0px; float:left; } 
.b3-l3{font-size:0px; background-image:url(/upload/2010-3/20100311163934223.gif);height:20px; width:600px; background-position:0px -226px; float:left;} 
.b3-l4{background-image:url(/upload/2010-3/20100311163934223.gif); height:20px; width:162px; background-position:-14px 0px; position:absolute} 
.b3-l5{font-size:0px; background-image:url(/upload/2010-3/20100311163934223.gif); height:20px; width:30px; background-position:-216px 0px; float:left;} 
/*====================================================================*/ 
.b4-1{font-size:0px; height:17px; width:15px; background-image:url(/upload/2010-3/20100311163934575.gif); background-position:-15px 0; margin:0px;} 
.b4-2{font-size:0px; height:166px; width:15px; background-image:url(/upload/2010-3/20100311163934575.gif); background-position:-30px 0; } 
.b4-3{font-size:0px; background-image:url(/upload/2010-3/20100311163934575.gif); background-position:-45px 0; position:absolute; height:17px; width:15px; } 
.b4-4{font-size:0px; height:17px; width:15px; background-image:url(/upload/2010-3/20100311163934575.gif); background-position:0 0;margin:0px;} 
/*====================================================================*/ 
.b5-1{background:url(/upload/2010-3/20100311163934971.jpg) no-repeat; width:550px; height:520px; padding:1px;} 
.b5-2{height:350px; width:300px; margin-left:50px; margin-top:50px;} 
.b5-3{ margin-top:10px; margin-left:5px; height:330px; width:260px; font-size:14px;; color:#054c68; float:left; overflow:hidden} 
.b5-4{font-size:16px; font-weight:bold} 
.b5-5{float:right; margin-right:12px; margin-top:10px; height:330px; width:15px; } 
.b5-6{position:absolute; height:10px; line-height:10px; width:15px; background-color:#c6e7f4;} 
</style>

<div id="a1" class="b1">
<img  id="block1" src="/upload/2010-3/20100311163934505.gif"   style="max-width:90%" alt="JavaScript simulation scroll bar implementation code_javascript skills" >
</div>
<div id="info1">0%</div>

<div>
<div class="b2"></div>
<div id="a2" class="b2-1">
<div id="block2" class="b2-2"></div>
</div>
<div class="b2-3"></div>
</div>
<div id="info2">0%</div>
<div class="b3"> 
<div id="a3" class="b3-1"> 
<div class="b3-2"> 
<table width="1680" height="180" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="210" align="center"> 
<img  src="/upload/2010-3/20100311163955721.jpg" alt="JavaScript simulation scroll bar implementation code_javascript skills" > 
</td> 
<td width="210" align="center"> 
<img  src="http://files.jb51.net/upload/2010-3/20100311163956292.jpg" alt="JavaScript simulation scroll bar implementation code_javascript skills" > 
</td> 
<td width="210" align="center"> 
<img  src="http://files.jb51.net/upload/2010-3/20100311163956843.jpg" alt="JavaScript simulation scroll bar implementation code_javascript skills" > 
</td> 
<td width="210" align="center"> 
<img  src="http://files.jb51.net/upload/2010-3/20100311163956806.jpg" alt="JavaScript simulation scroll bar implementation code_javascript skills" > 
</td> 
<td width="210" align="center"> 
<img  src="http://files.jb51.net/upload/2010-3/20100311163956181.jpg" alt="JavaScript simulation scroll bar implementation code_javascript skills" > 
</td> 
<td width="210" align="center"> 
<img  src="http://comic.qq.com/images/comic/2008/10/13/gpt/5.jpg" alt="JavaScript simulation scroll bar implementation code_javascript skills" > 
</td> 
<td width="210" align="center"> 
<img  src="http://files.jb51.net/upload/2010-3/20100311163956254.jpg" alt="JavaScript simulation scroll bar implementation code_javascript skills" > 
</td> 
<td width="210" align="center"> 
<img  src="http://files.jb51.net/upload/2010-3/20100311163956721.jpg" alt="JavaScript simulation scroll bar implementation code_javascript skills" > 
</td> 
</tr> 
</table>
</div>
<div class="b3-l1">
<div id="la" class="b3-l2"></div>
<div id="scroll3" class="b3-l3">
<div id="block3" class="b3-l4"></div>
</div>
<div id="r" class="b3-l5"></div>
</div>
</div>
</div>

<div id="container">
<div id="content">
<div>Human Race</div>
<div>SKY flow--the famous stunt of the powerful Chinese player Renhuang Sky</div>
<div>KUA flow--many soldiers and MK, in the early stage it can be said that you are killed by Buddha's supernatural power</div>
<div>3 magic flow--it seems to be only good at fighting orcs, but you need to cooperate with small cannons to fight elves</div>
<div>Knight Gryphon Style--With the Paladin's level 3 aura, it fully protects against inner fire, absolutely bug</div>
<div>Elegant flow--3 Egg's famous stunt, the first Paladin, and the temper that beats the undead</div>
<div>Mechanical flow - airplanes and tanks, was once all the rage, and Moon also suffered a lot </div>
<div>Ten Thousand Essential Oils--3 rounds of muskets and small cannons, a constant and ever-changing style of play</div>
<div>Orcs</div>
<div>Running Wolf Cavalry--Wolf Cavalry's high-speed movement, city attack and netting, it is invincible when it comes to tearing down homes</div>
<div>Swift Dragon--a more speculative play style. Once the speculation is successful, the opponent can directly gg</div>
<div>Black and White Ox--cooperated with Shaman, high attack, high defense, high attack speed, high blood, unlimited resurrection</div>
<div>White Bull Sea--suitable for civil war, unlimited resurrection and 20% attack bonus on monsters</div>
<div>XXXX stream--headhunter, witch doctor, shaman, bugs from the orc era, it</div>
</div>
</div>

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：Jquery method to replace event that already exists on element_jqueryNext article：Jquery method to replace event that already exists on element_jquery

Related articles

See more