用图片代替滚动条特效-JS特效-爱易网页

用图片代替滚动条特效

日期：2014-05-18　浏览次数：20439 次

用图片代替滚动条特效.
以下是HTML网页特效代码，点击运行按钮可查看效果：

以下是程序代码

<script src="http://www.zstar.cc/demo/scroll/scroll.js" type="text/javascript"></script>
<style type="text/css">
html body {
 overflow:hidden;
 margin:0;
 padding:0;
 font: 11px Arial, Helvetica, sans-serif;
 color: #FFF;
 background-color: #000000;
 }
#content1 {
 position: absolute;
 margin:0; padding:0;
 top: 90px;
 left: 221px;
 width: 485px;
 height: 355px;
 font-size: 11px;
 line-height: 24px;
 color: #FFF;
 }
/* scroller */
#scrollerContainer {
position:absolute; width:375px; height:290px; clip:rect(0,375px,290px,0); overflow:hidden; z-index:6;
}
#scrollerContent {
position:absolute; left:0; top:0; width:375px;
}
#scrollerButtons {
 position: absolute;
 top: 37px;
 left: 410px;
 width: 30px;
 height: 300px;
 }
#scrollerButtons #up {
 position: absolute;
 top: 0px;
 left: 0;
 width: 15px;
 height: 15px;
 background: url(http://www.zstar.cc/demo/scroll/arrowup.gif) top left no-repeat;
 z-index: 2;
 cursor:pointer;
 }
#scrollerButtons #track {
 position:absolute;
 top: 20px;
 width:15px;
 height:131px;
 background: url(http://www.zstar.cc/demo/scroll/scrollbar_bg.gif) top left no-repeat;
 z-index: 3;
 }
#scrollerButtons #drag {
 position: absolute;
 top: 20px;
 left: 0;
 width: 15px;
 height: 28px;
 background: url(http://www.zstar.cc/demo/scroll/scrollbar.gif) top left no-repeat;
 z-index: 4;
 cursor:pointer;
 }
#scrollerButtons #down {
 position: absolute;
 top: 156px;
 left: 0;
 width: 15px;
 height: 15px;
 background: url(http://www.zstar.cc/demo/scroll/arrowdown.gif) top left no-repeat;
 z-index: 5;
 cursor:pointer;
 }
</style>
<div id="content1">
<div id="scrollerContainer">
        <div id="scrollerContent"> <b>Natalia Mager Sacasa - Senior Director</b>   <br />
          <b>Vanessa Critchell - Director (West Coast)</b>   <br />
          <b>Alix Rice - Associate Director</b>   <br />
          <b>Kristen Becker - Associate Director</b>    <br />
          <b>Lisa Varghese - Associate Director</b>   <br />
  <b>Caroline Burghardt- Director of Publications, Archives<br>
          and Reproductions Rights</b>   <br />
          <b>Alice Bauza - Bookkeeper - Accounts Payable</b>   <br />
  <b>Gabriella Artinian - Bookkeeper - Accounts<br>
          Receivable</b>   <br />
          <b>Sophie Aschauer - Gallery Manager</b>   <br />
          <b>Josh Brown - Registrar</b>   <br />
          <b>Karen Gilbert - Associate Registrar</b>   <br />
          <b>Donovan Barrow - Senior Preparator</b>   <br />
          <b>Junpei Murao - Assistant Registrar</b>   <br />
          <b>Tiffany Edwards - Assistant Archivist</b>   <br />
          <b>Sarah Bock - Gallery Assistant and Book Sales</b>   <br />
          <b>Monica Schwerin - Gallery Assistant</b>   <br />
 
</div></div>
<div id="scrollerButtons">
<div id="up"></div>
<div id="track"></div>
<div id="drag" style="top:20px; z-index: 4;"></div>
<div id="down"></div>
</div>
</div></font>
<a href="http://js.aiyiweb.com/">欢迎访问爱易网网页特效代码站，js.aiyiweb.com</a>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

相关资料更多>

英特尔承认，联想最新K系列智能手机放弃英特尔处理器

互联网情色众多 Facebook与9158态度大不同

小米年度发布会遭围剿！多款新品难阻品牌危机

搜房网遭遇做空利益保送成“猎杀”焦点

苹果MacBook Air劣势渐显或推新产品改变命运

科技巨匠体验谷歌眼镜：戴上了就不想摘上去

清点：罗永浩推锤子ROM 小米打法遭模拟

迅雷高管解读财报：收购快盘可快速融入小米

解读苹果收购Beats背后动机：库克在想什么？

网站建设一条龙做网站网站制作网站定制企业网站设计特价

推荐阅读更多>