符合Firefox的,以图片代替滚动条效果
- 作者:zerostudio 来源:蓝色理想 文章点击数:
<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(/Upfiles/BeyondPic/2008-07/20087145466151677.gif) top left no-repeat;
z-index: 2;
cursor:pointer;
}
#scrollerButtons #track {
position:absolute;
top: 20px;
width:15px;
height:131px;
background: url(/Upfiles/BeyondPic/2008-07/20087143104656521.gif) top left no-repeat;
z-index: 3;
}
#scrollerButtons #drag {
position: absolute;
top: 20px;
left: 0;
width: 15px;
height: 28px;
background: url(/Upfiles/BeyondPic/2008-07/20087149932950966.gif) top left no-repeat;
z-index: 4;
cursor:pointer;
}
#scrollerButtons #down {
position: absolute;
top: 156px;
left: 0;
width: 15px;
height: 15px;
background: url(/Upfiles/BeyondPic/2008-07/20087140165143559.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>
- 上一篇:模仿JQ的UI-TAB控件,兼容多浏览器
- 下一篇:仿windows选项卡效果拾零
- 相关文章
| ·仿windows选项卡效果拾零 | 07-15 |
| ·模仿JQ的UI-TAB控件,兼容多浏览器 | 07-12 |
| ·一个背景变暗的div可拖动提示窗口,兼容IE、Firefox、 | 07-11 |
| ·非常不错的一个DIV+CSS客齐集的导航特效 | 07-10 |
| ·分享是Wodig开源的精髓 | 07-10 |
| ·非常经典的不用图片实现圆角代码 | 07-09 |
| ·纯AS打字并自动添加滚动条效果的制作 | 07-08 |
| ·如何实现浏览器上的右键菜单 | 07-08 |
