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

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

写一个js向左滑动删除交互特效的插件——Html5 touchmove

需求描述需要实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现使用了h5的touchmove等事件,以及用js动态改变css3的translate属性来达到动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp…

HT for Web列表和3D拓扑组件的拖拽应用

很多可视化编辑器都或多或少有一些拖拽功能,比如从一个List列表中拖拽一个节点到拓扑组件上进行建模,并且在拖拽的过程中鼠标位置下会附带一个被拖拽节点的缩略图,那么今天我们就来实现这样的拖拽效果. 首先我们需要创建一个List列表,在列表中加入图片信息,让List列表不那么单调,先来看看效果图. 接下来我们一步一步来是想这个List列表,先来解决下数据,在这里我就列举一两个: var products = [ { ProductId : 1, ProductName : "Chai",…

iSlider手机平台JS滑动组件

iSlider手机平台JS滑动组件,无任何插件依赖.它能够处理任何元素,例如图片或者DOM元素.它有如下特性:能够自定义动画,自带的动画包括default, rotate, flip 和 depth你能够简易地添加回调函数(onslidestart, onslide, onslideend, onslidechange)我们还支持滑动衰减效果,循环效果,自动滑动效果,水平/垂直滑动.兼容主流浏览器,懒人图库推荐下载! 使用方法: 1.你需要为iSlider先新建好数据: var data = […

wpf做的3d滑动gallery

原文:wpf做的3d滑动gallery wpf做的3d滑动gallery 随着iphone\ipad的流行及热捧,现在做移动产品不管是什么平台的,领导总想做成像ios系统的样子.自从微软发布了window8预览版之后,领导就想着把公司的移动产品移殖到window8上去了.公司的移动产品的主界面是做成3d gallery的立体画册效果的,如下图: window8是不带这样的控件的,究竟有没有实现如此效果的控件我就不清楚了,我认为是没有的,因为我在vs上找不到,也不符合window8风格,我找遍了互…

移动端H5页面惯性滑动监听

移动端H5页面惯性滑动监听在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑动整个过程.在网上并没有找到相应的监听事件,于是就自己写了一个监听方法. 惯性滚动开始时调用的方法是listenSlidingA,结束时调用的方法是listenSlidingEndA. <!DOCTYPE html> <html> <head> <title>滚…

编写第一个H5页面

<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>第一个H5页面</title></head><body> 2018年4月3日 </body> </html > H5的语法结构(与以前版本的比较): ◆ 标题不区分大小写: ◆ 元素可以省略结束标签(体现H5的宽容性): ◆ 允许省略属性的属性值: 如…

Net dll组件版本兼容问题

dll组件版本兼容问题,是生产开发中经常遇到的问题,常见组件兼容问题如:Newtonsoft.Json,log4net等为了节约大家时间,想直接看解决方法的,可直接点击目录3.4 目录 1.版本兼容问题的原因 2.解决版本兼容前提 3.指定特定版本bindingRedirect** 4.指定某文件夹中的特定版本codeBase** 版本兼容问题的原因首先让我们简单了解下程序引用的原理: 当运行库试图解析对另一个程序集的引用时,就开始进行定位并绑定到程序集的进程.详细见:运行库如何定位程序集…

Vue + element从零打造一个H5页面可视化编辑器——pl-drag-template

pl-drag-template Github地址:https://github.com/livelyPeng/pl-drag-template 前言想必你一定使用过易企秀或百度H5等微场景生成工具制作过炫酷的h5页面,除了感叹其神奇之处有没有想过其实现方式呢?本文从零开始实现一个H5编辑器项目完整设计思路和主要实现步骤,并开源前后端代码.有需要的小伙伴可以按照该教程从零实现自己的H5编辑器.(实现起来并不复杂,该教程只是提供思路,并非最佳实践) 一个h5可视化编辑器种子, 高仿凡科建站模板.…

H5打造3d场景不完全攻略（一）: H5 3d表现形式

前言日前,taobao造物节H5放肆地火了一把.相信接下来将3d嵌入网站的这种营销方式会被越来越多的人留意到.工作之余体验了若干个3d H5页面,感觉这类的H5互动体验性明显要比普通的要强,把二维的物体转化成三维,能给人一种置身其中的感觉.所以,一个好的idea加上低成本的技术实现--将3d融入H5今后也许还会爆发出更大的能量. 3D在H5中的表现形式话不多说,直接贴几个链接大家体验一下. 全景 1.场景全景这里选了三个比较有代表性的全景H5. 淘宝造物节作为近来最HIT的一个H5,其实从…

extjs5 一个容器中有几个组件公用一个控制器和一个模型

Ext.define('TestViewModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.test', // connects to viewModel/type below constructor: function(config){ //这里可以看出实例化了几次的 model console.log(config); this.callParent(config); }, data: { firstName: 'John', l…

Unity3D 中3D刚体组件的力

一般一个物体除了手动添加刚体受到重力作用外,还可以给该刚体添加一个其他的力. 这里就要涉及到一个恒定力(Constant Force)组件首先要去掉物体的重力(因为重力是刚体组件中默认的一个向下的力)影响.然后在力组件中添加一些力去控制该物体.…

Vue一个案例引发的递归组件的使用

今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的<Vue一个案例引发的动态组件与全局事件绑定总结> 之后,今天来聊一聊我们如何在项目中使用递归组件. 信息的分类展示列表这次我们主要是实现一个信息的分类展示列表存在二级/三级的分类,如下如所示: 看到这个很多人会想到这个实现起来很简单啊,来个嵌套循环不就完事了. 对,你说的没错,事实就是这样简单.那么就先来看看这么简单的列表怎么实现的,然后这个方案的劣势在哪里. 首先看看我们的数据格式…

C# Winform 按回车键查找下一个可设置焦点的组件

private void frmLogin_KeyPress(object sender, KeyPressEventArgs e) { //按回车键查找下一个可设置焦点的组件. if (e.KeyChar == (Char)Keys.Enter) { this.SelectNextControl(this.ActiveControl, true, true, true, true); e.Handled = true; } } 第二种方法:可特殊控制 Control current = thi…

使用Vue cli3搭建一个用Fetch Api的组件

系列参考 ,英文原文参考我的git代码: https://github.com/chentianwei411/Typeahead 目标: 建立一个输入关键字得到相关列表的组件,用Vuejs2和Fetch API 思路: 把一个json数据,fetch到本地.然后用户模糊搜索title, 得到相关的结果列表. [ { "userId": 1, "id": 1, "title": "sunt aut facere repellat pro…

报错：此版本的SQL Server Data Tools与此计算机中安装的数据库运行时组件不兼容

在Visual Studio 2012中使用Entity Framework,根据模型生成数据库时,报如下错误: 无法在自定义编辑器中打开Transact-SQL文件此版本的SQL Server Data Tools与此计算机中安装的数据库运行时组件不兼容解决办法:下载"Server Data Tools for Visual Studio 2012" ,并安装,重新启动Visual Studio 2012.…

使用electron开发一个h5的客户端应用创建http服务模拟后台接口mock

使用electron开发一个h5的客户端应用创建http服务模拟后端接口mock 在上一篇<electron快速开始>里讲述了如何快速的开始一个electron的应用程序,既然electron是可以直接使用node环境编写程序的,那么我们就可以有很多可以处理的事,比如我们可以做个可视化的前端构建工具,或者我们可以建一个后台的管理系统.基于这两天,我简单的做了一个模拟后端接口的http服务. 它可以完成如下功能: 它可以创建http本地服务它可以模拟后端的多种请求方式,如get.post.pu…

ZeroMQ——一个轻量级的消息通信组件

ZeroMQ是一个轻量级的消息通信组件,尽管名字中包含了"MQ",严格上来讲ZeroMQ并不是"消息队列/消息中间件".ZeroMQ是一个传输层API库, 更关注消息的传输.与消息队列相比,ZeroMQ有以下一些特点: 点对点无中间节点传统的消息队列都需要一个消息服务器来存储转发消息.而ZeroMQ则放弃了这个模式,把侧重点放在了点对点的消息传输上,并且(试图)做到极致.以为消息服务器最终还是转化为服务器对其他节点的点对点消息传输上.ZeroMQ能缓存消息,但是是…

同学帮帮 h5 刮刮卡组件：Txbb.Scratch

同学帮帮 h5 刮刮卡组件,简洁.无依赖,支持 globals 和 amd 两种调用方式. 暂时只能用在移动端使用方法 <div id="J-Scratch"></div> var scratchInstance = Txbb.Scratch.attach(element, options); element 需要初始化的容器元素,canvas 元素会被添加进去. var scratchInstance = Txbb.Scratch.attach(docu…

手把手教你用Vue2+webpack+node开发一个H5 app

手把手教你用Vue2+webpack+node开发一个H5 app 前一篇vue2 + webpack + node 开发一个小demo说到了用vue的一些基本用法,这一篇就讲一个复杂一点的更完整的例子,仿制一个H5 APP,这个APP就叫[one.一个],在百度搜索 one 就能找到啦[为什么仿这个呢,因为这是我用了很久的一个app呀…

Android 设计一个菱形形状的Imageview组件.

网上没有资料,特来请教下大神 Android 设计一个菱形形状的Imageview组件. >> android这个答案描述的挺清楚的:http://www.goodpm.net/postreply/android/1010000007107851/Android设计一个菱形形状的Imageview组件.html…

ZeroMQ——一个轻量级的消息通信组件 C#

ZeroMQ——一个轻量级的消息通信组件 ZeroMQ是一个轻量级的消息通信组件,尽管名字中包含了"MQ",严格上来讲ZeroMQ并不是"消息队列/消息中间件".ZeroMQ是一个传输层API库, 更关注消息的传输.与消息队列相比,ZeroMQ有以下一些特点: 点对点无中间节点传统的消息队列都需要一个消息服务器来存储转发消息.而ZeroMQ则放弃了这个模式,把侧重点放在了点对点的消息传输上,并且(试图)做到极致.以为消息服务器最终还是转化为服务器对其他节点的点对点…

Vue一个案例引发的动态组件与全局事件绑定总结

最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握的知识点,然后发现问题解决问题,我们的能力才能得以提升,要不然就有点眼高手低了. 基于这个想法于是就开始自己去撸了一个旅游网站,旅游网站嘛避免不了城市的选择,所以在实现城市选择列表的时候碰到的一些问题,以及解决办法今天就记录下来做一个总结. 城市列表选择组件首先说说我们要实现一个什么样的城市选择组…

一个基于swoole的作业调度组件，已经实现了redis和rabitmq队列消息存储。

https://github.com/kcloze/swoole-jobs 一个基于swoole的作业调度组件,已经实现了redis和rabitmq队列消息存储.参考资料:swoole https://wiki.swoole.com/wiki/page/1.html rabitmq https://www.kancloud.cn/yunxifd/rabbitmq/96997 RabbitMQ与Redis队列对比: http://www.cnblogs.com/chinaboard/p/38195…

查看Spark与Hadoop等其他组件的兼容版本

安装与Spark相关的其他组件的时候,例如JDK,Hadoop,Yarn,Hive,Kafka等,要考虑到这些组件和Spark的版本兼容关系.这个对应关系可以在Spark源代码的pom.xml文件中查看. 一. 下载Spark源代码打开网址https://github.com/apache/spark,例如选择v2.4.0-rc5版本,再点击“Clone or download”按钮,点击下方的“Download ZIP”进行下载. 二.查看pom.xml文件将下载的源代码压缩包解压后,打开里…

webview的简单介绍和手写一个H5套壳的webview

1.webview是什么?作用是什么?和浏览器有什么关系? Webview 是一个基于webkit引擎,可以解析DOM 元素,展示html页面的控件,它和浏览器展示页面的原理是相同的,所以可以把它当做浏览器看待.(chrome浏览器也是基于webkit引擎开发的,Mozilla浏览器是基于Gecko引擎开发的) Android的Webview在低版本和高版本采用了不同的webkit版本内核,4.4后直接使用了Chrome. 2.webview主要用于什么地方?或者说什么需求下会使用到webvie…