HTML5触摸界面的程序设计

HTML5移动触摸交互技术实战指南 本文还有配套的精品资源,点击获取 简介:HTML5、CSS3和JavaScript技术联合使用,为现代移动设备提供了创建丰富交互体验的能力。HTML5引入新特性增强移动网页功能,CSS3提供视觉效果增强和响应式布局,JavaScript处理触摸事件,创建动态交互。本指南旨在通过案例代码教授如何实现触摸事件和手势,以及如何优化移动应用体验。 1. HTML5移动触摸... 阅读详情

在移动端屏幕中,我们需要做的不只是和处理PC端网页那样,处理简单的点击事件或者其他桌面事件。我们需要更多的了解一下移动端的触摸事件和手势。——整理自《HTML5触摸界面设计与开发》

基于webkit 引擎的浏览器

webkit 是一个非常强大的引擎,也是第一代iphone获得成功的一个原因。webkit 起源于名为Konqueror的开源浏览器引擎,苹果将它开发为webkit,作为safari背后的浏览器引擎。现在的 ios ,android平台上的浏览器都是基于webkit引擎来实现的

windows版的浏览器

作为windows phone手机的浏览器引擎肯定是IE了,与webkit功能相近,但IE10有着不同的触摸事件API,但是实现的功能都是相同的。现在IE几乎都兼容了当前的

轻触 和 单击 的不同

在pc端机基于鼠标的界面互动是单击,那么在触摸界面上的基本交互方式就是轻触,最初,轻触和单击相仿,但是轻触与单击完全不同。在触屏设备的浏览器中,仍然可以触发鼠标事件。当一个用户轻触一个元素,但不降手指留在屏幕上,轻触300ms之后将触发click事件。同时触发的还有mouseup和mousedown事件,我们不考虑这些桌面事件,我们只说一下触屏事件。

总的来说在移动端有四种类型的触摸事件

  • 触摸开始 (手势放在屏幕上的时候)
  • 接触点移动 (手指在屏幕上移动且手指不离开屏幕)
  • 触摸结束 (用户手指离开屏幕)
  • 触摸被取消 (触摸被中断了,比如突然短息或电话来了)
webkit内的触摸事件
  • touchstart 触摸开始 包含touches数组
  • touchmove 触摸点移动 包含touches数组
  • touchend 触摸结束 包含touches数组
  • touchcancel 触摸取消 不包含touches数组

备注:touches数组是一组触摸事件所产生的触摸对象,代表着触摸屏幕的手指

触摸对象的属性

  • identifier 是这个触摸的唯一表示符,用户的手指保持在屏幕上,这个值不会改变
  • screenX 触摸的X的位置,相对移动设备屏幕左侧,无论是否滚动
  • screenY 触摸Y的位置,相对于屏幕顶部
  • clientX 触摸相对于浏览器窗口左侧的X位置,一般和screenX一样
  • clientY 触摸相对浏览器窗口的顶部位置;相当于screenY减去卷去的上部
  • pageX 触摸相对所呈现的页面左侧的X的位置
  • pageY 触摸相对所呈现顶部的Y的位置
  • target 触摸开始时接触点下的元素对象,如果触摸移动到其他位置,值不变,还是原来的
  • radius[X/Y] 接触点的半径(与屏幕接触的区域大小的估计值)
  • rotationAngle 半径中所述的椭圆被旋转到与接触区域最匹配需要旋转的角度
  • force 施加在表面上的力度
  • 备注: radius、rotationAngle和farce在android上的chrome浏览器需要前缀(如:webkitForce) 这三个属性在IOS6中不被支持
IE10和指针事件
  • 在IE10上有个单独的,被称为指针的事件,一般由鼠标单击,电子笔轻触,手指触摸着三种形式触发
  • IE10的指针事件
    • MSPointerDown 触摸开始
    • MSPointerMove 触摸移动
    • MSPointerUp 触摸结束
    • MSPointerOver 触摸点移动到元素之上
    • MSPoinerOut 触摸点离开元素
    • 事件对象(MSPointerEvent)继承于MouseEvent,并且包含page[X|Y]、client[X|Y]和device[X|Y]属性。同时也包含额外的指针属性

MSPointerEvent属性

  • hwTimestamp 创建事件的时间
  • isPrimary 指示该指针是否为主指针
  • pointerId 指针唯一ID(类似触摸事件的标识符)
  • pointerType 一个整数,标识了改事件来自鼠标、手写或者是手指
  • pressure 笔的压力,从0 - 255
  • rotation 从0 - 359 光标的旋转度,如果支持的话
  • tilt[X|Y] 手写笔的倾斜度
简单看一下touch事件

首先,准备好运行环境,我们用浏览器的开发者工具来模拟,这里我们用到的是chrome的模拟环境,目前只要是非IE,FF的浏览器默认都是以ctrl+shift+i 的方式就打开了开发者工具调试环境,点击小手机的图标,我们进入了手机模拟环境,我们可以选择进一步设置或者不设置其他的模拟方案,一般我们选择iphone 4,因为这个尺寸不管在中等显示器还是笔记本都很好 。

我们在这里写一个公共需要用到的代码,就是header里面的内容,以后举例就不必重写了:

<head>
	<meta charset='UTF-8'>
	<meta http-equiv='X-UA-Comatible' content='IE=edge,chrome=1'>
	<meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0'>
	<title>触屏事件</title>
</head>

好的,下面我们来简单看一下这几个针对webkit引擎的触屏事件:

  • css 结构:

    *{margin:0;padding:0;}
    .square{width: 100px;height: 100px;background-color: pink;}
    .square.start{background-color: purple;}
    .square.move{background-color: green;}
    .square.end{background-color: red;}
    
    
  • html 结构

    <div class='square'>touch me</div>
    
    
  • javascript 结构:

    var square = document.querySelector('.square');
    // 开始触摸
    square.addEventListener('touchstart',function(e){
        e.preventDefault(); // 阻止默认事件
        this.className = 'square start';
    },false);
    // 手指滑动
    square.addEventListener('touchmove',function(e){
        e.preventDefault();
        this.className = 'square move';
    },false);
    // 手指离开
    square.addEventListener('touchend',function(e){
        e.preventDefault();
        this.className = 'square end';
    },false);
    
    

上面简单的模拟了touchstart touchmove touchend 这三个事件,而touchcancel事件我们不去模拟它,不是很经常能用到。当手指从触摸到滑动到离开屏幕,你会看到屏幕上的那个div的颜色块会随着不同事件的触发而改变颜色。由此我们就可以用它来写一些案例了,比如移动端的轮播图,但是这样编程起来会比较麻烦,我们可以基于这几个事件来封装一下手势,至于手势的封装,我们以后再来说。

touch事件和click事件的比较

onclick事件会比touch事件慢300ms,在网上找到一篇文章说的比较清楚:
http://www.xiaomeiti.com/note/3585

自定义tap事件 (tap:轻击的意思)

—— 有时间再来补充,并且完善案例

HTML5触摸界面设计与开发  《HTML5触摸界面设计与开发》专注于触摸界面的开发,内容的结构和优化网站的思路大概一致。上半部分涵盖了能使各类网站,特别是移动网站变快的基本概念。第2章和第3章告诉你如何创建一个简单的网站,并能快速加载。第4章可以帮助你使用缓存来提高用户再次访问时的速度。第5章是关于要摒弃一次性的页面加载方式和重构应用程序以使实际上和感觉到的性能都达到最优的。书的后半部分是专门讲触摸界面的,特别是尽可能地让它们更平稳和快速。   《HTML5触摸界面设计与开发》适合具有一定经验的Web开发者阅读参考。 目录 第1章 移动设备概述 0 1.1 触摸设备和桌面设备之间的差异 2 1.2 广泛使用的设备 3 1.3 HTML 56 1.4 神秘谷,是什么让触摸界面反应灵敏? 7 1.5 总结 9 第2章 创建一个简单的内容型网站 10 2.1 选择一个观念:移动优先或置后 12 2.2 创建标记 13 2.3 奠定基础的标签 15 2.4 理解 Viewport 15 2.5 响应式的CSS 19 2.6 总结 24 第3章 提高第一次加载的速度 25 3.1 浏览器是如何加载页面的 27 3.2 为什么页面加载缓慢? 27 3.3 用YSlow和PageSpeed提升速度 30 3.4 解决常见的问题 33 3.5 将它们全部放在一起 41 3.6 总结 41 第4章 加快下一次访问的速度 42 4.1 在HTTP中缓存 44 4.2 为移动优化45 4.3 使用网络存储(Web Storage) 46 4.4 应用缓存(Application Cache) 53 4.5 总结 57 第5章 使用PJAX提升触摸体验 58 5.1 页面加载的代价 60 5.2 浏览器历史API 62 5.3 添加PJAX 69 5.4 总结 77 第6章 轻触VS单击:基本的事件处理 78 6.1 是什么让轻触不同? 80 6.2 触摸事件简介 80 6.3 处理轻触 83 6.4 总结 89 6.5 项目 89 第7章 CSS过渡、动画和变换 90 7.1 动画元素 92 7.2 CSS变换 105 7.3 总结 112 7.4 项目 112 第8章 JavaScript性能最优化 113 8.1 性能测试和调试 115 8.2 只写入DOM 116 8.3 给用户反馈的优先级是最高的 117 8.4 将它们一起使用:无限滚动 118 8.5 总结 127 8.6 项目 127 第9章 手势的基本内容 128 9.1 为什么用手势呢? 130 9.2 创建一个循序渐进增强的触摸控制 131 9.3 创建一个触摸控制的灯箱(lightbox) 136 9.4 总结 150 9.5 项目 150 第10章 滚动与滑动 151 10.1 滚动 153 10.2 布局失效 159 10.3 让鸟类浏览工具可滑动 161 10.4 总结 176 10.5 项目 177 第11章 双指缩放和其他复杂的手势 178 11.1 了解多点触摸的限制和支持情况 180 11.2 处理多点触摸 180 11.3 处理双指缩放 185 11.4 总结 195 11.5 项目 195 立即下载

相关推荐

HTML5触摸界面设计与开发 源码

《HTML5触摸界面设计与开发》专注于触摸界面的开发,内容的结构和优化网站的思路大概一致。上半部分涵盖了能使各类网站,特别是移动网站变快的基本概念。第2章和第3章告诉你如何创建一个简单的网站,并能快速加载。第4章可以帮助你使用缓存来提高用户再次访问时的速度。第5章是关于要摒弃一次性的页面加载方式和重构应用程序以使实际上和感觉到的性能都达到最优的。书的后半部分是专门讲触摸界面的,特别是尽可能地让它们更平稳和快速。   《HTML5触摸界面设计与开发》适合具有一定经验的Web开发者阅读参考。

HTML5触屏界面设计与开发

1提高第一次加载的速度 加载页面的顺序 解析域名 发起请求 下载相应 渲染页面 导致页面加载缓慢的几个原因 1HTTP连接数太多 2总的字节数太大 3等待时的渲染阻塞 4网络延迟 5缓存能力差 怎么解决这些常见的问题 1请求数太多 我们可以把需要的css混合成一个文件,使用css每题查询的方法来带图link元素上使用media属性 转换成 @me

zyz0728的博客 3080

HTML5触摸界面设计与开发 最新完整版

《HTML5触摸界面设计与开发》专注于触摸界面的开发,内容的结构和优化网站的思路大概一致。上半部分涵盖了能使各类网站,特别是移动网站变快的基本概念。第2章和第3章告诉你如何创建一个简单的网站,并能快速加载。第4章可以帮助你使用缓存来提高用户再次访问时的速度。第5章是关于要摒弃一次性的页面加载方式和重构应用程序以使实际上和感觉到的性能都达到最优的。书的后半部分是专门讲触摸界面的,特别是尽可能地让它们更平稳和快速。

Html实现通用触屏滑动功能

touch-scroll.js文件如下所示。原理:使用鼠标模拟手指触屏滑动。

weixin_62221344的博客 368

WinCC ActiveX控件“许可证缺失”故障排查:从注册表修复到系统兼容性全解析

本文深入解析WinCC ActiveX控件报错“未找到许可证信息”的根本原因与解决方案。核心在于系统注册表中控件的设计时许可证密钥丢失或损坏。文章提供了从手动修复注册表、排查64位系统兼容性,到预防性环境部署的全流程专业指南,帮助工程师彻底解决这一常见故障。

oil88的博客 647

Llama模型结构拆解:为什么MLP模块要这样设计?从参数配置到计算流程全解析

本文深入解析了Llama模型MLP模块的设计精髓。通过拆解其三线性层结构、门控机制与SwiGLU激活函数,揭示了并行计算如何提升效率,并详细阐述了intermediate_size参数配置背后的经验权衡与计算考量,帮助读者透彻理解这一核心组件的设计逻辑与工程实现。

mac99的博客 530

《HTML5触摸界面设计与开发》——1.3 HTML5

本节书摘来自异步社区《HTML5触摸界面设计与开发》一书中的第1章,第1.3节,作者: 【美】Stephen Woods 更多章节内容可以访问云栖社区“异步社区”公众号查看。 1.3 HTML5 所有移动浏览器所共有的,为支持先进浏览器而存在的功能,被统称为HTML5。那究竟什么是HTML5? 严格地说,HTML5是指网页超文本技术工作小组(WHATWG...

weixin_34290096的博客 156

第076篇:大涡模拟进阶

大涡模拟(Large Eddy Simulation, LES)是介于直接数值模拟(DNS)和雷诺平均方法(RANS)之间的重要湍流模拟方法。本文深入介绍动态Smagorinsky模型、尺度相似模型、WALE模型和隐式LES等高级亚格子模型。通过Python实现槽道湍流和圆柱绕流的LES求解器,详细展示近壁面处理、动态系数计算和亚格子应力建模技术。大涡模拟,亚格子模型,动态模型,Smagorinsky,WALE模型,尺度相似模型,近壁面处理,槽道湍流LES的核心思想是对Navier-Stokes方程进行空间

2401_87715305的博客 740

《HTML5触摸界面设计与开发》——2.4 理解 Viewport

本节书摘来自异步社区《HTML5触摸界面设计与开发》一书中的第2章,第2.4节,作者: 【美】Stephen Woods 更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.4 理解 Viewport 在iPhone诞生之前,手机浏览器尝试通过调整内容来适应网页,取得了不同程度的成功。iPhone上的Safari没有做丝毫的尝试,取而代之的是在各种...

weixin_33953384的博客 97

多智能体系统在军事仿真中的应用:AI人工智能战略推演

本文旨在全面解析多智能体系统在军事仿真领域的应用技术,重点探讨AI驱动的战略推演系统的设计原理和实现方法。研究范围涵盖从基础理论到实际应用的完整技术栈。本文采用从理论到实践的递进结构,首先介绍核心概念,然后深入算法实现,最后展示实际应用案例和未来展望。多智能体系统(MAS):由多个相互作用的智能体组成的分布式系统军事仿真(Military Simulation):通过计算机模拟军事行动和战争场景战略推演(Strategic Wargaming):通过模拟推演评估军事战略的有效性更高保真度的仿真。

AI天才研究院 1779

华为OD技术面真题 - Python开发 - 1

汇总华为OD技术面八股Python八股,高频技术真题并提供详细解答。

qq_45776114的博客 1719

html5开发桌面界面设计,HTML5触摸界面设计与开发

HTML5触摸界面设计与开发编辑锁定讨论上传视频《HTML5触摸界面设计与开发》是人民邮电出版社于2014年出版的一本图书,作者是伍兹 (Stephen Woods)。[1]中文名HTML5触摸界面设计与开发外文名Building Touch Interfaces with HTML5作者伍兹 (Stephen Woods)类型计算机与互联网出版日期2014年4月1日语种简...

weixin_39943992的博客 280

基于STM32设计的温室大棚种植监测系统(onenet+GPRS通信)

当前所设计的温室大棚种植监测系统基于STM32单片机开发,它能够对温室大棚内的温度、湿度、光照强度、土壤湿度、二氧化碳含量等环境参数进行实时监测,并将数据传输至OneNET云平台,实现了远程监测和管理。该系统具有体积小、功耗低、可靠性高等特点,适合在温室大棚等场合使用。

7873

HTML5触摸事件

取材自: html5手机触屏touch事件介绍 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别 HTML5触摸事件详解 HTML5触摸事件包含: touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。 touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调...

好女绪的博客 1678

TOGAF架构内容—TOGAF 内容框架和企业元模型

TOGAF架构内容—TOGAF 内容框架和企业元模型

深圳市多克创新科技有限公司 1664

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

html5得交互原理,基于HTML5的界面交互及展示系统、方法与流程

本发明涉及一种界面交互及展示系统、方法,具体地,涉及一种基于HTML5的界面交互及展示系统、方法。背景技术:随着互联网的飞速发展,浏览器不再仅仅用来表示Web内容,随着HTML5的技术问世,Web进入了一个成熟的应用平台,在HTML5平台上,视频、音频、图像、动画以及交互都被标准化。HTML5可以让你摆脱对平台的依赖,用户打开浏览器,直接就可以访问你的应用,HTML5可以做到跨平台,多数核心代码不...

weixin_32248781的博客 923

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

html5 触摸 滚动,html5的触摸事件

1.触摸事件有哪些touchstart,touchmove,touchend2.分别什么时候触发touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。touchend事件:当手指从屏幕上离开的时候触发。3.每个事件中的touch对象...

weixin_30986517的博客 447

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

HTML5触摸事件(touchstart、touchmove和touchend)

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件:touchstart、touchmove和touchend。 一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信...

极客神殿 4379

html 触摸屏页面,HTML5触摸屏touch事件使用实例1

1.源码:.divFixed {width: 100px;height: 100px;font-size: 15px;text-align: center;border: 2px solid red;position: fixed;}var divOne = document.getElementById('divOne');var isMove = false;var oldX = oldY =...

weixin_39851048的博客 1532

html jquery手机触摸事件,HTML5的触摸事件

本文主要介绍HTML5实战与剖析之触摸事件,介绍的比较详细,需要的朋友可以参考下。HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件:touchstart、touchmove和touchend。一开始触摸事件touchstart、touc...

weixin_42510805的博客 689

html5控制,html5 触摸控制

Touch TestYour browser does not support canvas element.Log:document.body.onload=startup;//文档加载完毕触发varongoingTouches= newArray();//用来保存跟踪正在发送的触摸事件//设置事件处理程序functionstartup() {varel=document.getElements...

weixin_35097945的博客 242

html 页面跟随触摸滑动,html5触摸事件判断滑动方向的实现

这篇文章主要介绍了html5触摸事件判断滑动方向的实现的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。为了给触摸界面提供有力支持, 触摸事件提供了响应用户对触摸屏或者触摸板上操作的能力.接口TouchEventTouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等。每 个...

weixin_35607472的博客 493

《HTML5触摸界面设计与开发》——1.5 总结

本节书摘来自异步社区《HTML5触摸界面设计与开发》一书中的第1章,第1.5节,作者: 【美】Stephen Woods 更多章节内容可以访问云栖社区“异步社区”公众号查看。 1.5 总结 触摸设备总体上在不断变化,大部分Web浏览器之间的差异是很小的。虽然在性能上的差异较大,但只用HTML5就足以在触摸设备上做出优秀的用户界面。 鉴于触摸设备的性质,速...

weixin_33881140的博客 154
上一篇: Angular构建简单应用的步骤分解
下一篇: 在优快云的安卓版本的App中找到了的一个BUG
Wang's Blog
博客等级 码龄12年 7438粉丝 2421原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wang's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值