ホームページ > 記事 > ウェブフロントエンド > JavaScript シミュレーションスクロールバーの実装コード_JavaScript スキル

JavaScript シミュレーションスクロールバーの実装コード_JavaScript スキル

WBOYオリジナル: 2016-05-16 18:32:46948ブラウズ

実際、このコードには冗長性がいくつかあります... 別の Slider クラスを作成して最初のバージョンとして保存することをお勧めします。時間があれば、別の Slider クラス

を作成してみてください。

<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 シミュレーション スクロール バーの実装コード_JavaScript スキル" >
</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 シミュレーション スクロール バーの実装コード_JavaScript スキル" > 
</td> 
<td width="210" align="center"> 
<img  src="http://files.jb51.net/upload/2010-3/20100311163956292.jpg" alt="JavaScript シミュレーション スクロール バーの実装コード_JavaScript スキル" > 
</td> 
<td width="210" align="center"> 
<img  src="http://files.jb51.net/upload/2010-3/20100311163956843.jpg" alt="JavaScript シミュレーション スクロール バーの実装コード_JavaScript スキル" > 
</td> 
<td width="210" align="center"> 
<img  src="http://files.jb51.net/upload/2010-3/20100311163956806.jpg" alt="JavaScript シミュレーション スクロール バーの実装コード_JavaScript スキル" > 
</td> 
<td width="210" align="center"> 
<img  src="http://files.jb51.net/upload/2010-3/20100311163956181.jpg" alt="JavaScript シミュレーション スクロール バーの実装コード_JavaScript スキル" > 
</td> 
<td width="210" align="center"> 
<img  src="http://comic.qq.com/images/comic/2008/10/13/gpt/5.jpg" alt="JavaScript シミュレーション スクロール バーの実装コード_JavaScript スキル" > 
</td> 
<td width="210" align="center"> 
<img  src="http://files.jb51.net/upload/2010-3/20100311163956254.jpg" alt="JavaScript シミュレーション スクロール バーの実装コード_JavaScript スキル" > 
</td> 
<td width="210" align="center"> 
<img  src="http://files.jb51.net/upload/2010-3/20100311163956721.jpg" alt="JavaScript シミュレーション スクロール バーの実装コード_JavaScript スキル" > 
</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>浜洪</div>
</div>
</div>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：element_jquery にすでに存在するイベントを置き換える Jquery メソッド次の記事：element_jquery にすでに存在するイベントを置き換える Jquery メソッド

関連記事

続きを見る