H5 实现卡片3D滚动

2026-08-15

一个H5的3D滑动组件实现(兼容2D模式)

起由原始需求来源于一个项目的某个功能,要求实现3D图片轮播效果,而已有的组件大多是普通的2D图片轮播,于是重新造了一个轮子,实现了一个既支持2D,又支持3D的滑动.轮播组件. 实现思路刚一开始肯定是无法直接实现3D滑动组件的,所以将功能拆分,如下步骤实现一个双向循环链表,作为底层Item的数据结构基于链表,实现一个无限循环的2D滑动组件基于2D滑动组件做3D变化得到3D组件兼容性检查以及功能封装,简化使用,确保稳定双向循环链表的模拟以前看到的轮播组件大多是用数组来作为底层数据结构

Space.js – HTML 驱动的页面 3D 滚动效果

为了让我们的信息能够有效地沟通,我们需要创建用户和我们的媒体之间的强有力的联系.今天我们就来探讨在网络上呈现故事的新方法,并为此创造了一个开源和免费使用的 JavaScript 库称为 space.js.该库是 HTML 驱动的,这意味着你不需要在网站上写一行 JavaScript 代码就可以,仍然有很大的灵活性. 在线演示源码下载您可能感兴趣的相关文章网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示十分惊艳的8个 HTML5 &

html5和css3实现的3D滚动特效

今天给大家带来一款html5和css3实现的3D滚动特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="container"> <div class="cube"> <div class="side side1"> </div> <div class="side side2"> </div> <div c

打造H5里的“3D全景漫游”秘籍

近来风生水起的VR虚拟现实技术,抽空想起年初完成的“星球计划”项目,总结篇文章与各位分享一下制作基于Html5的3D全景漫游秘籍. QQ物联与深圳市天文台合作,在手Q“发现新设备”-“公共设备”里,连接QQ物联摄像头为用户提供2016年天体大事件的直播,大家可以通过手Q实时观看到世界各地最佳观测点的日食,流星等天体现象.承载整个“星球计划”活动的运营页面,经多方讨论,我们决定尝试3D全景漫游模式的H5运营页进行推广,今天就不详述活动的具体内容,先和大家聊一聊这H5里“3D全景漫游”的制作方法.

h5页面使用sessionStorage滚动到上次浏览器位置《原创》

前言: 因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求,对于原生APP来说轻而易举,毕竟自己的APP用户操作指哪打哪,但是H5该怎么做?H5就实现不了么?对于一个爱研究攻克这些前端棘手问题的我来说,我没尝试过,我是拒绝对提出需求者说实现不了,做不到之类的. 是什么需求呢?--需求方要求用户在一个列表页浏览时,点击一个列表进入详情页,返回要求记录用户刚刚浏览的位置,而不是重新刷新页面到了页面顶部.(ps:如果用户好不容易翻到了第几十.几百乃至几千条时,难道要用户再重头开始?可能这个时候跳

H5活动全屏滚动页面在安卓智能电视TV调试

前段时间公司做一个线上活动,在电视上商品促销.产品的要求是每个商品介绍刚好满一屏,按下遥控器向下键可以整屏切换.这种功能如果实在PC端,实现起来非常容易,引用jQuery插件就能实现.但是在安卓智能电视上就会有许多兼容性问题,因为各种厂家生产的电视机盒子.智能电视系统都不一样.下面主要介绍一下我的这个项目.下面是整个HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo

3D滚动下拉菜单-简直不要太任性

预览先看看最终效果简介由来最初看到这个是在14年5月,猛戳这里:妙味官网,觉得非常炫.想要做出来,所以就开始学习web. 那时候是做c/s的,也因为这个走上了b/s之路,(ﾟДﾟ≡ﾟДﾟ) 现在前后台都要写了. 前几天又来试试,发现自己能大概实现了( ﾟ∀ﾟ),好屌. 因为平时主要是实现功能,所以可能一些代码习惯,实现方式不太好,希望指出来. 前提需要了解的东西 1. css3基础我也是一个菜鸟,会的不多(￣∇￣),就不在这里show无知了,主要涉及到:transform,trans

排名前10的H5、Js 3D游戏引擎和框架

由于很多人都在用JavaScript.HTML5和WebGL技术创建基于浏览器的3D游戏,所有JavaScript 3D游戏引擎是一个人们主题.基于浏览器的游戏最棒的地方是平台独立,它们能在iOS.Android.Windows或其他任何平台上运行. <ignore_js_op> 有很多的JavaScript能够用于创建基于浏览器.使用HTML5和WebGL的3D游戏.然后,选择一个合适的游戏引擎是一个不小的挑战,它有时能帮你完成项目或突破项目瓶颈. 为了让你的选择变的容易,我们已经通过分析大

用CSS实现3D 滚动的立方体

用css3写3D立方体用到的属性不多,就那么几个:perspective,transform-style,以及transform. 目前来说能完美支持3D的浏览器有chrome.safari,火狐也支持.所以本文的css3代码都只加了webkit前缀,因为产生3D的关键属性perspective其他浏览器都不支持,所以其他浏览器是应该是看不了3D的,所以看本文的例子请用chrome或者safari来看哦. 代码: <!DOCTYPE html> <html lang="en&q

H5禁止页面滑动/滚动

禁止页面滚动--完美解决方案,滚动条显示与否,手持设备兼容与否禁止页面滚动有三种方法 1,依靠css 将页面 document.documentElement.style.overflow='hidden'; document.body.style.overflow='hidden';//手机版设置这个. 如果设置了如上,页面的滚动条将会消失,此时鼠标滚轮失效. 但是你用键盘的上下左右键,你会发现,页面仍然可以滚动. 别着急往下看 2,在 1 的基础上添加 js功能 va

基于 H5 WebGL 的 3D 室内定位及电子围栏

前言现代工业化的推进在极大加速现代化进程的同时也带来的相应的安全隐患,在传统的可视化监控领域,一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控,本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景,该 3D 场景从正面展示了一个现代化工厂的现实场景,室内定位包括工厂工人的实时位置.电子围栏的范围.现场的安全情况等等,帮助我们直观的了解当前工厂人员的安全状况. 本篇文章通过对工厂可视化场景的搭建和模型的加载,人物实时室内定位代码的实现.

基于 H5 + WebGL 实现 3D 可视化地铁系统

前言工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控,本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景,该 3D 场景从正面展示了一个地铁站的现实场景,包括地铁的实时运行情况,地铁上下行情况,视频监控,烟雾报警,电梯运行情况等等,帮助我们直观的了解当前的地铁站. 系统中

jquery+css3实现3d滚动旋转

最近有个漂亮妹子一直在向我推销潭州的视频,BUT我以前就看了一次觉得挺水的,就对那个妹子表示吾孤高.你们那玩意没意义的很弱.然后那个漂亮妹子锲而不舍的对我发链接,这个效果会吗,这个幻灯会写吗...我也是醉了...直到有一天那个漂亮妹子也不知道被我的孤高,独孤求败人生寂寞如雪的气质给怒了,拿出了她的必杀技 http://xiaobai.52nhw.com/image/pic.gif 好吧乍一看挺唬人的...好吧,我确实被她给唬住了!然后先是加群又是关注的...最后搞到一个包...

H5 仿ios select滚动选择器。框架。

官网上描述的很详细,并且开源,轻量. 有兴趣的可以去尝试官网上的demo写的也很好,并且每个参数也解释的很详细. http://zhoushengfe.com/iosselect/website/index.html#user-content-demos 效果图:

Unity3D问题之EnhanceScollView选择角色3D循环滚动效果实现

需求呈现3D效果(2D素材)选择角色效果滚动保证层级.缩放比例.间距正常尾随循环滚动这个界面需求一般也会有游戏会採用(貌似有挺多) 怎样实现实现技术关键点 (3D循环效果,依据数学函数和细致研究下详细效果非常easy通过计算方式直接实现,本文主要目的是介绍下AnimationCurve工具,通过这个工具可以帮助我们实现一些需求当然也包含实现酷炫的3D滚动效果) 怎样控制每一个Item之间的间隔(位置).缩放比例,差值平滑怎样实现item层级关系正确显示("离" 屏幕近的层级

腾讯网移动端H5页面设计实战分享

分享 <关于我> 分享 [中文纪录片]互联网时代 http://pan.baidu.com/s/1qWkJfcS 分享 <HTML开发MacOSApp教程> http://pan.baidu.com/s/1jG1Q58M 为什么要设计H5页面移动设备的普及给媒体和娱乐带来了一场革命.根据中国互联网信息中心(CNNIC)2014年7月的报告显示,中国网民中,手机使用率达83.4%,已经超过传统PC整体80.9%的使用率.其中,手机网络新

打造自己的3D全景漫游

three.js 示例: 打造H5里的"3D全景漫游"秘籍 - 腾讯ISUX QQ物联星球计划通过pano2vr直接将鱼眼全景图生成立体空间的六个面:也可通过Photoshop或其他的专业3D建模工具,将鱼眼图贴到3D球面上,再将球面转为立方面,获得立体空间的六个面. 使用到的JS库: three.min.js CSS3DRenderer.js GitHub地址:http://mrleo.github.io/3DPanorama 设置相机 //设置相机 camera = ne

近期H5项目开发小结

前言:2016差不多又过了半啦,最近参与了公司好几个h5项目(严格来说,也只能算是推广页面活动).主要是新品牌的推广需要,当然也有给公司以前老客户做的案例.今天主要总结下为新品牌开发的2个h5推广:就主要的运用技术,页面优化,以及存在的短板做总结. 一.主题与设计: 2个h5主题主要与4.1愚人节与5月的母亲节做对应:然后要比较婉转自然地为新品牌作铺垫,自然推广是主要的目的,但是又不能那么直白明显:所以2个h5分别选择了虚拟产品介绍与游戏参与为设计思路:主要设计图如下: 愚人节: 扫

H5填坑笔记--持续更新

最近一直在做移动端的页面,发现很多的坑,这里做一下总结,填填坑…… css常见的问题(一) 一.iOS键盘首字母自动大写 IOS的机子,默认英文输入法状态下,首字母是自动大写的,有时候挺烦人的. 在iOS中,默认情况下键盘是开启首字母大写的功能的,如果业务不想出现首字母大写,可以这样: <input type="text" autocapitalize="off" /> 二.iOS输入框默认内阴影和样式问题在iOS上,输入框默认有内部阴影,但无法使用

Android View 滚动边界的测量

最近一直在用Android TV的RecyclerView,实现视频搜索列表卡片的滚动显示,由于采用了双排滚动,打破了系统默认的单排滚动,且每一屏幕显示10个完整卡片5个半漏边卡片,每个完整卡片的左下角有个数字角标(1-10),通过语音说出数字角标后能够打开对应的卡片节目.RecyclerView的双排滚动着实麻烦,因为打破了原有的机制,连续滚动过程中经常会出现焦点乱跳或者丢失以及显示错位等等问题.由于滚动要严格保持对齐且要配合语音识别位置,这其中设计到很多关联细节.这里只记录view的边界测量

inobounce.js : 禁止IOS H5的滑动回弹

IOS的移动端/H5/webapp 页面如果滚动到底部或者在页面顶部再往上拉,都会出现一个回弹的效果. 想取消这个效果可以引入一个简单的库就行,不用再写繁琐的样式. github地址直接引入就行 <script src="inobounce.js"></script> 例子: 因为这个库是禁止了整个页面的滑动,所以如果页面中有其他元素需要滑动的,要给滑动元素设置一个height或max-height,还有overflow: auto; -webkit-over

H5 实现卡片3D滚动

热门专题