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

用图片代替滚动条特效

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

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

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

相关资料更多>

从百度世界大会看大数据

估值增长9.8% 阿里IPO前市值达2450亿美元

孙正义入股阿里往事还原：阿里巴巴并非软银首选

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

同样的背景，罗永浩和雷军到底有什么不同？

虚拟运营商温度有多高？降温OR升温内外有别

支付宝曝平安破绽：转账信息被谷歌抓取

银联布局二维码支付，“擦边球”生态不能自救

据消息传百度将要控股携程整合去哪儿

香港云服务器免备案云主机VPS 国内独立IP 独享15M 月付SSD

推荐阅读更多>