首页 >web前端 >js教程 >javascript模拟滚动条实现代码_javascript技巧

javascript模拟滚动条实现代码_javascript技巧

WBOY原创: 2016-05-16 18:32:461031浏览

其实这样代码产生些了冗余.......不如单独写个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

上一篇：Jquery替换已存在于element上的event的方法_jquery下一篇：Javascript 入门基础学习_基础知识

相关文章

查看更多