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

简介: 一、效果图   二、实现 样式: .horz_scroll { float: left; width: 20px; height: 130px; padding-top: 100px; padding-left: 15px; ...

一、效果图

 

二、实现

样式:

.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>    


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

 

相关文章
|
1月前
|
开发框架 前端开发 JavaScript
前端框架演进史:从HTML到现代化开发
前端框架演进史:从HTML到现代化开发
50 0
|
17天前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
52 4
|
1月前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
7天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
19 2
|
29天前
|
存储 移动开发 编解码
基于HTML5开发的Markdown在线编辑器
Markdown是一种轻量级标记语言,以其简洁易读的格式而备受程序员和作者们的青睐。随着互联网的发展,越来越多的在线Markdown编辑器应运而生,为用户提供了更加便捷、高效的写作和编辑环境。本文将探讨基于HTML5开发的Markdown在线编辑器的设计原理、功能特点以及技术优势。
33 1
基于HTML5开发的Markdown在线编辑器
|
10天前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
30 2
|
1月前
超帅的主页命令滚动HTML源码
超帅的主页命令滚动HTML源码,超级好看的!作为网站跳转页还是挺不错的! 仅KB大小,喜欢的老铁可以下载收藏!
20 1
超帅的主页命令滚动HTML源码
|
1月前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
39 1
|
1月前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
|
1月前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。