jQuery:书籍展示效果（水平滚动）

最新推荐文章于 2022-10-14 11:26:04 发布

dsfas3432

最新推荐文章于 2022-10-14 11:26:04 发布

阅读量787

点赞数

分类专栏：前台技术文章标签： jquery class function html float books

本文链接：https://blog.csdn.net/dsfas3432/article/details/6975409

版权

本文介绍了如何使用jQuery创建一个书籍展示效果，通过水平滚动展示HTML结构中的书籍信息。涉及HTML、CSS、XML以及jQuery代码的详细实现，特别地，为确保IE6兼容性，在HTML中添加了特定代码。要查看完整XML代码，需参考外部链接。

摘要由CSDN通过智能技术生成

具体代码实现如下：（源代码下载）

1.html代码:

<div id="books">
  <div class="overclear buttons"> 
    <a href="#" class="prev"><img src="images/books_prev.gif" alt="Previous" /></a>
    <div class="showing"><!-- showing --></div>
    <a href="#" class="next"><img src="images/books_next.gif" alt="Next" /></a> 
  </div>
  <div class="overclear top">
    <img src="images/books_left_top.gif" alt="" class="float_left" />
    <img src="images/books_right_top.gif" alt="" class="float_right" />
  </div>
  <div class="inner">
    <ul class="overclear">
      <li class="loader"><!-- loader --></li>
    </ul>
  </div>
  <div class="overclear btm">
    <img src="images/books_left_btm.gif" alt="" class="float_left" />
    <img src="images/books_right_btm.gif" alt="" class="float_right" />
  </div>
</div>

2.CSS代码：

* {
         margin:0; padding:0;}
body {
         font:12px/16px Verdana, Geneva, sans-serif; color:#000;}
 
img {
         border:0;}
a {
         text-decoration:none; outline:none; hide-focus:expression(this.hideFocus=true);}
ul {
         list-style:none;}
 
#books {
         width:500px;}
.prev img, .next img {
         width:40px; height:30px;}
.top img, .btm img {
         width:20px; height:20px;}
.overclear {
         overflow:hidden; height:1%;}
.float_left {
         float:left;}
.float_right {
         float:right;}
.top {
         background:url(images/books_top.gif) repeat-x;}
.btm {
         background:url(images/books_btm.gif) repeat-x;}
 
.buttons {
         position:relative; height:32px; margin-bottom:5px;}
.prev {
         position: