zoukankan      html  css  js  c++  java
  • HTML5商城开发四 多图或多商品的水平滚动展示

    一、效果图

    二、实现

    样式:

    .horz_scroll { 
        float: left;
        width: 20px;
        height: 130px;
        padding-top: 100px;
        padding-left: 15px;
        padding-right: 15px;
        cursor: pointer;
    }
    
        .horz_scroll:hover {
            background-color: #e9e9e9;
        } 

    事件

    <script type="text/javascript">
        $(function () {
            //---- 设置标签图片滚动 ----//
            var scrollWidth = 170;//单个商品模块的宽度,包括外边距
            var scrollPos = 0;
            var scrollCurPos = 0;
            $("#horz_left").click(function () { 
                scrollCurPos = scrollPos;
                if (scrollPos >= scrollWidth) {
                    scrollPos -= scrollWidth;
                }
                if (scrollPos < scrollWidth && scrollCurPos < scrollWidth) scrollPos = 0;
                $("#srcollTag").scrollLeft(scrollPos);
            });
            $("#horz_right").click(function () {
                var totalWidth = $("#srcollTag .product").length * scrollWidth - 800;//srcollTag的宽度800
                if (scrollPos < totalWidth) {
                    scrollPos += scrollWidth;
                    if (scrollPos > totalWidth) scrollPos = totalWidth + 20;//移动到最右再加右边距20
                }
                $("#srcollTag").scrollLeft(scrollPos);
            });
        });
    </script>

    HTML

    <div class="active_dd active_dd_lg btop btm bg-white">
        <div class="horz_scroll" id="horz_left">
            <img src="Content/images/horz_left.png" alt="left" />
        </div>
        <div id="srcollTag" style=" 800px;height:230px;float:left; overflow: hidden;">
            <div style="99999px;">
                <div class="product">
                    <!-- 商品信息 -->
                </div> 
            </div>
        </div>
        <div class="horz_scroll" id="horz_right"><img src="Content/images/horz_right.png" alt="right" /> </div>
    </div>    


    如需自动滚动,自己添加定时事件就好了

  • 相关阅读:
    Eclipse添加注释简介
    git config配置文件
    ndk开发教程以及问题解决方案
    PATH路径出错导致任何命令都找不到解决方法
    git详细教程
    ssh相关操作
    ORM SQLAlchemy 表于表的关系
    SQLAlchemy 使用
    ORM SQLAlchemy 简介
    LUA基础
  • 原文地址:https://www.cnblogs.com/xcsn/p/5216274.html
Copyright © 2011-2022 走看看