选择座位html,影厅座位预览效果(css3)_html/css_WEB-ITnose

5268f80b9b1e01f982625ef6fac83ca1.png

查看 demo 下载源码

你可能对那些购买时需要选择座位的订票系统比较熟悉。通常在比赛,电影,搏击或者演唱会售票的时候需要这样做。如果能有一种座位的预览效果该有多酷啊,比如能够从你选择的位置的角度去预览舞台或者屏幕。这个问题引出了今天我们将要分享给大家的一个新尝试。

注意:我们使用到的某些技术还是非常实验性质的,不是所有浏览器都支持。这个demo需要浏览器支持 transform-style: preserve-3d。

我们的想法是显示一个可以从 座次表 选择座位的影厅。当选择一个座位,我们将移动到房间的相应位置,让用户可以看到所选位置的真实视野。在页面的中央有一个可以解锁旋转 视角 的按钮(默认是不能随鼠标旋转视角的),考虑到真实情况下用户会旋转的自己的头,所以这点也是很重要的。

这个demo中用到的预告片来自 The Blender Foundation 的动画片 Sintel 。

开始,我们显示一个带预告片信息和选择座位选项的预告屏幕:

然后我们点击 select the seats,我们将把视野移到影厅的后面,并显示座次表:

一旦点击了一个座位,视野将移动到座位相应的位置:

屏幕中央的图标可以让我们解锁视野,比如可以让观察者环顾四周。这类似于脑袋的自由扭动,对于模拟真实视野是很重要的。

我们可以在任意点播放预告片,并感受到从那个特定位置屏幕是如何呈现的。

不幸的是,某些版本的IE不支持 transform-style: preserve-3d ,所以这个demo是不能在这些版本运行的。

在Github上找到这个项目 。

原文: http://tympanus.net/codrops/2016/01/12/cinema-seat-preview-experiment/ 。

1428d0e076c3959ab11d28a39bc84fab.png

5268f80b9b1e01f982625ef6fac83ca1.png

本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源:php中文网

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/559284.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html 使用百度搜索,百度搜索uzer,进入主页

windows7的uzer.me怎么 安全上网百度搜索uzer,进入主页下载完成以后,点击,快捷方式,运行。登陆后,首先出现的是文档库,点击文档库。UZER上的软件和文件都打不开,网络没问题。因为安装的软件版本…

php广告任务网源码_THINKPHP仿我爱广告任务网|任务网站源码下载

Thinkphp仿我爱广告任务网网站源码下载,基于PHPMYSQL开发制作的在线广告打码任务网站源码,底层内核为THINKPHP,大体完整!有需要的朋友可下载尝试下!安装环境:php5.3以上 mysql5.6安装方法:1、导入根目录下…

2021曲靖高考成绩查询时间,2021年曲靖高考成绩排名及成绩公布时间什么时候出来...

曲靖高考结束后,每年都有很多家长和考试不知道曲靖高考成绩排名如何查询、曲靖高考成绩什么时候公布以及查询方式,本文小编整理了曲靖高考成绩查询排名的相关知识。一、曲靖高考成绩公布时间及查询方式根据往年曲靖高考成绩公布时间预测,2021…

lisp 读取样条曲线座标点_如何在lisp中求一条直线和一条曲线的交点

★快捷命令的命名规律 1、 快捷命令通常是该命令英文单词的第一个或前面两个字母,有的是前三个字母。比如,直线(Line)的快捷命令是“L”;复制(COpy)的快捷命令是“CO”;线型比例(LTScale)的快捷命令是“LTS”。 在使用过程中&…

uniapp打包成html5包个ios壳,HBuilder之uni-app打包App方法

HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。该软件既可以支持web代码编写,也可以将已经编写好的项目代码打包为手机APP。HBuilder提供的打包有云端打包和本地打包两种,云端打包的特点是DCloud官方配置好了原生的打包环境,可…

笔记本超频会烧吗_笔记本电脑cpu超频是什么意思?超频会怎样啊?

展开全部CPU超频的意思是人为提高CPU的外频或倍频,32313133353236313431303231363533e78988e69d8331333431373933使之运行频率得到大幅提升。超频后CPU的运算速度会提高。超频的主要后果是会导致系统不稳定、系统温度升高甚至损毁硬件,即使超频后能稳定地…

计算机专业能评电子工程师吗,计算机工程师职称 评定条件

专业技术人员计算机应用能力认证简章职称计算机模块,计算机职称报名,职称评审计算机考试。“专业技术人员计算机应用能力”是由中华人民共和国人事部统一组考和颁发注册的计算机应用能力认证。职称计算机模块,计算机职称报名,职称…

adpater里写toast_如何在Android中显示Toast?

要在您的应用程序中显示Toast,请尝试以下操作:Toast.makeText(getActivity(), (String)data.result,Toast.LENGTH_LONG).show();另一个例子:Toast.makeText(getActivity(), "This is my Toast message!",Toast.LENGTH_LONG).show()…

html编译圣诞情缘,H5+JS+CSS3 实现圣诞情缘

绘制形状在svg中绘制多边形的标签是polygon,这是SVG中定义的基本形状,可以通过polygon的points绘制出多边形组成的坐标点,points 属性定义多边形每个角的 x 和 y 坐标。多边形至少要有3个边,所以points至少要定义3组坐标才能创建一…

a标签跳转后返回原页面 layui_layui页面操作,点击一个添加页面,跳转有确定,然后点击确定后将选择的几个数据返回前一个页面获取值,然后ajax请求后台...

custUserIndex.html [添加页面代码]受试者用户邮箱完成时间批量上传开始考试生成报告查看报告编辑删除layui.config({base: /layuiadmin/ //静态资源所在路径}).extend({index: lib/index //主入口模块}).use([index,laydate, table], function(){var $ layui.$,form layui.f…

html标签info,HtmlTrInfo 元素

HtmlTrInfo 元素HtmlTrInfo element3/9/2015本文内容适用于: SharePoint 2016 |SharePoint Foundation 2013 |SharePoint Online |SharePoint Server 2013Applies to: SharePoint 2016 | SharePoint Foundation 2013 | SharePoint Online | SharePoint Server 2013在…

ssm项目集成ftp_ssm开发旅游信息管理系统,包括前台和后台

项目描述这是一个旅游管理系统。系统主要有2个角色,分别是普通用户和管理员。普通用户可以进行登录注册,查看或修改个人信息,检索和浏览旅游产品信息,产品下单,订单详情查看、定制出行、咨询客服等操作,而网…

计算机网络职业生涯规划书模板前言,计算机网络技术专业个人职业生涯规划书(参考模板).doc...

计算机网络技术专业个人职业生涯规划书(参考模板)一、前 言——及时规划职业,做自己人生之舟的船长亚里士多德曾说过:“人是一种寻找目标的动物,他生活的意义仅仅在于是否正在寻找和追求自己的目标。”而这目标有大有小,有短期的也…

mac 黑窗口连接mysql_mac上终端起动MySQL的方法

我下载了5.6.11的dmg然后安装,安装完成之后..如果要用终端去玩SQL.那么一开始要输入很长的:/usr/local/mysql/bin/mysql这不方便啊,好想像windows下的cmd里面一样输入mysql -uroot -p1这样...上网查了下..可以实现滴.打开终端,输入:1)alias mysql/usr/local/mysql/bin/mysql2)a…

在微型计算机中1 mb准确等于几个字,2010安徽省计算机等级考试二级试题及答案...

1、计算机最主要的工作特点是( A )A、程序存储与自动控制 B、高速度与高精度C、可靠性与可用性 D、有记忆能力2、表示字符的连续两个字节为31H,41H,则( D )A、一定是1个汉字的国标码B、一定是两个西文的ASCII码C、一定不是1个汉字的国标码D、可能是两个西…

uds帧格式_如何看懂UDS诊断报文

UDS介绍UDS(Unified Diagnostic Services,统一的诊断服务)诊断协议是ISO 15765 和ISO 14229 定义的一种汽车通用诊断协议,位于OSI模型中的应用层,它可在不同的汽车总线(例如CAN, LIN, Flexray, Ethernet 和 K-line)上实现。UDS协议的应用层定…

彭山计算机培训,彭山2021年初中生学计算机

建校以来,我校一直秉承“让每一个学生具备生存发展的能力,让更多学生体验成功”的办学理念,坚持“诚信、务实、精技、立业”和“先做人、后做事”为校训,多年来优秀的办学质量和成绩屡获***、教育主管部门、专家、家长等社会各界的…

function函数嵌套 matlab_Matlab函数进阶:使用匿名函数和内嵌函数处理多变量传递问题...

Matlab函数进阶:使用匿名函数(Anonymous Function)和内嵌函数(Nested Function)处理多变量传递问题(Matlab 7.0以上)问题:有一个多变量函数f(abcx),现需要分别在aa0bb0cc0和aa1bb1cc1的条件下对f(abcx)进行某一操作。此类问题常在数值积分时出现。解决方…

计算机应知应会培训班,应知应会培训、测试方案(报省里)

2015年度宜昌市专业技术人员外语、计算机应知应会知识培训、测试实施方案根据鄂职改办[2005]82号文件要求及宜市职改办[2015]1号文件安排,现就2015年度外语、计算机应知应会知识培训、测试工作提出如下实施方案:一、指导思想认真贯彻落实党的十八届三中全…

python怎么切换中文键盘_python模拟键盘输入 切换键盘布局过程解析

PostMessage()def keyHwnd(hwndEx, char):"""向指定控件输入值:param hwndEx: 控件句柄:param char: 字符串:return: True or Flase"""try:for _ in char:print(key:%s ascii:%d % (_, ord(_)))win32api.PostMessage(hwndEx, win32con.WM_CHAR, …