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="width: 800px;height:230px;float:left; overflow: hidden;">
        <div style="width: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>    

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

 

时间: 2024-10-01 08:28:27

HTML5商城开发四 多图或多商品的水平滚动展示的相关文章

HTML5商城开发一 楼层滚动加载数据

对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度(假设为100),设置productlist的高度为列表信息的实际高度(假设为300) <div id="subCategoryScroll" style="overflow: hidden; overflow-y: scroll;"> <ul clas

HTML5商城开发五 实现返回页面顶部

本文内容主要是网上参考收集,介绍四种简单的返回页面顶部代码,可以使用简单的HTML锚标记,也可使用Javascript Scroll函数动态返回等等. 一.使用锚标记返回页面顶部 使用HTML锚标记最简单,点击后会在地址栏显示这个锚标记. 需要标记id特麻烦,尤其是每个页面都要使用,顶部展示又不一样. 页面顶部放置: <a name="top" id="top"></a> 放置位置在<body>标签之后随便找个地方放都可以,只要靠

HTML5商城开发三 jquery 星星评分插件

展示:   实现方法: 1.html引用star-grade.js <script type="text/javascript" src="Scripts/star-grade.js"></script> <script type="text/javascript"> $(document).ready(function () { $(".sstar").BindStars();//使用属性

HTML5商城开发二 通过位移实现拖动效果

1.效果 在该区域内,手按住拖动,该模块可上下滑动,至最顶或最底部,滑动出现空白区域将自动缩回 2.代码 <!DOCTYPE html> <html> <head> <title>首页</title> <style type="text/css"> .area-item { height: 100px; line-height:100px; border-bottom: 1px solid #333; font-s

jsp网站开发四“酷”全书:新闻、论坛、电子商城、博客_源码源代码下来谁能运行呀

问题描述 jsp网站开发四"酷"全书:新闻.论坛.电子商城.博客_源码源代码下来谁能运行呀 jsp网站开发四"酷"全书:新闻.论坛.电子商城.博客_源码源代码下下来与偶人能运行的吗?求帮助啊 解决方案 木有服务器运行个毛线,,,jsp得有服务器才能运行啊...兄弟... 解决方案二: 木有服务器运行个毛线,,,jsp得有服务器才能运行啊...兄弟... 解决方案三: 找个开发器,装里面,然后发布- 解决方案四: 有环境只是运行不出页面

《HTML5 2D游戏编程核心技术》——第1章,第1.2节HTML5游戏开发最佳实践

本节书摘来自华章出版社<HTML5 2D游戏编程核心技术>一书中的第1章,第1.2节HTML5游戏开发最佳实践,作者[美] 戴维·吉尔里,更多章节内容可以访问"华章计算机"公众号查看. 1.2 HTML5游戏开发最佳实践 我们将在本书中持续地讨论一些关于游戏开发的最佳实践,首先介绍7个与HTML5有关的实践. 1)窗口失去焦点时暂停游戏. 2)窗口重新获得焦点时实现倒计时. 3)使用CSS实现UI特效. 4)对于运行缓慢的游戏做出检测和处理. 5)添加社交功能. 6)把所有

html5能开发游戏,不需要其它语言吗?

问题描述 html5能开发游戏,不需要其它语言吗? 权html5就能开发游戏吗?不需要其它语言?不需要js等其它辅助语言就能开发游戏? 解决方案 广义的html5包括css3和js.怎么能不用js呢?另外,如果游戏要实现一些复杂的功能,还是需要服务器端的. 解决方案二: jChartFX,Html5,Css3,SVG 解决方案三: HTML和css是连体的般一起用,再加上js就可以实现一些很炫酷的功能,无论你用他们来开发网页还是干其他的.光用HTML就像盖楼房光用砖不用钢筋一样 解决方案四: j

HTML5游戏开发5条建议及开发工具分享

幸运的是,有关HTML5游戏开发的指南现在已经有很多了.而这篇文章则是要告诉开发者在开发HTML5游戏以前应该具备的一些全局概念.你能从这 篇 文章中学到什么?这里会介绍HTML5游戏开发的一些框架,你将知道如何使你设计的游戏能够在更多的平台上运行,了解如何管理在线游戏的状态,如何处理性 能问题. 话不多说,现在就开始介绍HTML5游戏开发的几条实用建议. 建议1:使用框架 如果只是用HTML5编写一些小程序其实非常简单,但如果想往你的游戏中加入更丰富的功能,那么就有许多其他的事情需要处理了.

html5 app开发重大消息-腾讯在技术端推进Html5生态发展

    日前,腾讯正式发布腾讯浏览服务(Tencent Browser Service,以下简称TBS),宣布为合作伙伴提供整合腾讯底层技术.内容框架.广告体系以及大数据等多方面能力的升级浏览解决方案.腾讯公司副总裁钟翔平表示,TBS带来了浏览能力的升级,为Html5开发者提供更强的技术能力,将真正在技术端推进Html5生态的发展.     尽管目前Html5所带来的移动互联网营销异常火爆,但据很多html5 app开发者反映,由于开发Html5页面后需要反复测试,导致开发适配成本很高,同时为了