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

用图片代替滚动条特效

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

用图片代替滚动条特效.
以下是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>

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

相关资料更多>

谷歌新技术进入iOS平台：将叫板苹果Siri

阿里巴巴上市后雅虎将面临更大的业绩压力

猎豹移动上市押海外市场与小米有合作空间

英特尔涉嫌垄断欧盟或开出史上最高罚单

史玉柱谈创业：5大建议失败的教训最真实

OPPO创始人陈明永：我们是怎么做营销的

CSS控制字符长度和显示长度

诺基亚再缩阵线封锁上海旗舰店全力蜕变

联通丹东公司一高管造假套出手机变卖被判刑7年

香港全能空间香港高速云虚拟主机PHP/ASP/NET送MSSQL和MYSQL

推荐阅读更多>