HTML5开发

HTML meta标签viewport属性缩放级别说明
shinyuu HTML5开发 7030 2 2021-01-06 15:43:12

什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。 Viewport 基础 一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：...

阅读全文

HTML 5 Web存储_localStorage和sessionStorage怎么用
shinyuu HTML5开发 3598 0 2018-08-10 13:41:48

HTML5 提供了两种在客户端存储数据的新方法，一个是localStorage - 没有时间限制的数据存储，另外一个是sessionStorage - 针对一个 session 的数据存储。 html5 web storage的浏览器支持判断，要判断浏览器是否支持localStorage可以使用下面的代码：if (window.localStorage) { alert("浏览支持localStorage");} else { alert("浏览暂不支持localStorage");}//或者if (typeof win...

阅读全文

SVG绘制图片_SVG JS path实现玫瑰花盛开动画
shinyuu HTML5开发 6383 1 2018-02-02 14:06:46

SVG现在很火，不过是 HTML 还是 Android 都推荐使用 SVG 图片，恰好最近也刚刚研究好怎么在 Android 上使用 SVG。下面呢给大家分享一个 HTML5 的 SVG 动画，一个 SVG 绘制玫瑰花盛开的动画特效，Demo一款 SVG 盛开的花朵动画特效，效果图如下。 html代码<defs> <radialGradient id="gradient-0" gradientUnits="userSpaceOnUse" cx="-107.308" cy="104.329" r="59.18...

阅读全文

JS弹幕滚动效果_HTML5跑马灯代码
shinyuu HTML5开发 10562 7 2017-08-08 13:24:36

分享一个简单实用 javascript 弹幕特效、一个很好用的实例、很适合放到项目里面使用、完全使用 javascript 编写完成、没有使用 jQuery 等插件、非常适合新手学习、效果图如下 插入functionfunction insert(){ var newli=document.createElement(´div´); var randomS=Math.floor(Math.random()*8); var r=Math.floor(Math.random()*266);...

阅读全文

HTML5 Web存储_HTML5的离线存储机制
shinyuu HTML5开发 4513 0 2017-06-27 13:24:02

在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前、这些都是由 cookie 完成的、但是 cookie 不适合大量数据的存储、因为它们由每个对服务器的请求来传递、这使得 cookie 速度很慢而且效率也不高 在 HTML5 中、数据不是由每个服务器请求传递的、而是只有在请求时使用数据、它使在不影响网站性能的情况下存储大量数据成为可能 对于不同的网站、数据存储于不同的区域、...

阅读全文

HTML5 echarts中国散点地图联动实例下载
shinyuu HTML5开发 6452 0 2017-03-30 13:42:08

分享一个html5 echarts地图分布动画的特效、Demo是一款带有炫光效果的html5 echarts图表插件、一般用于全国的节点分部等功能、如果大家有使用过百度云加速的话、不难看出、这一款插件是模仿百度云加速的地图节点分布的、效果非常不错 使用方法分为4个步骤 1、为ECharts准备一个具备大小（宽高）的Dom--><div id="mainMap" style="height:400px;width: 700px;padding:10px;background:#1B1B1B"></div...

阅读全文

HTML Form表单提交submit事件_Ajax Post提交Form表单
shinyuu HTML5开发 16115 3 2017-03-20 13:37:16

从事Web开的哥们对于form表单的提交应该都是非常熟悉的、这里总结一下、常用的有3种方法、有两种是要使用到js代码的、有一种是直接提交的、个人建议还是使用带js的、因为我们在提交表单之前一般会做很多验证 1、submit 按钮 提交<form action="MyDemand" method="post"> <span>关键字：</span> <input name="keywords" type="text" value="@keywords" /> <i...

阅读全文

HTML5 Web Socket和Web Worker的区别以及使用方法
shinyuu HTML5开发 9380 2 2017-01-22 13:39:31

做练习遇到了一个选择题、是关于Web Worker的、问Web Worker会不会影响页面性能？补习功课之后、答案是不会影响、查阅了相关资料学习Web Worker、又遇到了Web Socket、整理如下 Web Socket 和 worker 的作用、为构建高效能的web应用提供了新的参考方案、Web Socket提供更高效的传输协议、Web Worker提供多线程提高web应用计算效率 一、Web Socket 1、Web Socket是一种协议、本质上和http、tcp一样、协议是用来说明数据是如何传输的,写过一个小的在线聊...

阅读全文

html5仿微信手机摇一摇代码_摇一摇抽奖js代码实现
shinyuu HTML5开发 13370 19 2016-10-08 13:10:12

分享一个HTML5开发的手机端的摇一摇、整个Demo是仿微信的摇一摇功能的、当打开网页之后摇晃手机就会播放熟悉的声音、也就是会播放微信摇一摇的声音、2秒之后就会出来相应的广告信息、也就是摇动手机的结果、也是带有声音的哦、下面是整个Demo的gif效果 整个Demo主要是使用的JS代码来控制的、并包涵了一些html代码和两个mp3文件、然后就是js代码了、css样式直接写到html文件里面的、大家可以根据自己的需求更改 Html代码<div id="hand" class="hand"><img src="i...

阅读全文

html5 angularjs富文本编辑器_轻量redactor js网页在线编辑器
shinyuu HTML5开发 7724 4 2016-10-07 15:48:13

最近又萌生一个想法、那就是把写博文的在线富文本编辑器换掉、总感觉那里不好看、终于在昨天找到一个很满意的文本编辑器、叫redactor 编辑器、官网上下载好像需要购买、不过到github上下载好像是免费的、由于该插件是外国人开发的、所以默认预言是英文、但是可以通过安装插件包来将语言转换为中文、只需下载zh_cn.js文件并引用到页面中（这个在我的Demo中已经包含了）然后将 lang设置为”zh_cn”即可 上图就是我准备替换掉目前我正在博客中使用的控件、下面给出简单的使用方法、包括获取富文本编辑器里面的代码、和设置编辑器里面的...

阅读全文

html5手机端PC端自适应CSS3翻页效果
shinyuu HTML5开发 11775 12 2016-09-26 14:57:43

分享一个html5手机端网页电子书翻页特效、Demo是一款兼容PC跟手机端的电子书翻页效果、效果非常不错、自动适配手机端和PD端、都是带有翻页效果的、下面是效果图 引入资源文件<link rel="stylesheet" href="style/style.css" /><link rel="stylesheet" href="style/player.css" /><link rel="stylesheet" href="style/phoneTemplate.css" /><scr...

阅读全文

Html5 jQuery手机端购物车_Html5购物车模板代码
shinyuu HTML5开发 15014 23 2016-09-08 14:13:45

分享一个jQuery移动端购物车商品的代码、Demo中实现了删除的功能、Demo是一款兼容PC端跟手机端的自适应的、点击垃圾桶删除购物车里的对应物品特效、效果非常不错、下面是Demo的效果图 Html代码<div class="product"><div class="check_box"> <a href="#" class="jd_check_box" checked></a></div><div class="shop_info clearfix"&...

阅读全文

Html5手机移动端头像上传裁剪插件Demo实现
shinyuu HTML5开发 30362 101 2016-08-25 13:26:51

DD博客以前分享过PC端的图片剪裁和头像上传的功能、那么今天分享一个手机端Web App的Html5拍照上传头像裁剪代码、此场景是一款手机端经常使用的图片上传裁剪做头像特效、一般做Web App的都会使用、今天分享出来、希望对大家有用、效果图如下 Html代码<!--头部--><div id="user_head"> <a id="left_ico" href="javascript:history.go(-1);"> <i class="icon iconfont...

阅读全文

Html5 jQuery滑动动态加载更多数据功能实现Demo
shinyuu HTML5开发 8937 5 2016-08-11 14:04:27

分享一套HTML5手机端手指滑动上拉加载更多的代码、Demo是一款通过jquery实现tab切换和上拉加载更多的效果、适用于手机端页面开发、流畅性和动画效果都得到了保障、效果非常不错、下面是Demo的截图 Html5代码<body ontouchstart="" id="container"><header class="tabHead"> <span class="active">参与开户<small>（200）</small></span> ...

阅读全文

DD记账
top
+