html5
全力付出
https://zyongjava.github.io
展开
-
html5之绘图板
canvas简单画板 $(function(){ var canvas = $('#myCanvas')[0]; var myCanvas=canvas.getContext("2d"); myCanvas.strokeStyle="red"; myCanvas.lineWidth=2; var flag = false; //鼠标按下事件,准备绘原创 2013-04-09 21:45:49 · 1580 阅读 · 0 评论 -
html5绘图铺满整个屏幕
绘图示列 $(function(){ var canvas = $('#myCanvas'); canvas.attr("width",$(window).get(0).innerWidth) canvas.attr("height",$(window).get(0).innerHeight) var context = canvas.get(0).get原创 2013-04-17 22:52:04 · 2911 阅读 · 0 评论 -
canvas像素化video
解释:这个项目要在服务器上运行才能成功。 视频像素化 $(document).ready(function(){ var video = $('#video'); var canvas = $('#mycanvas'); var context = canvas.get(0).getContext("2d"); $("#play").click(function(原创 2013-04-22 18:09:53 · 1529 阅读 · 0 评论 -
Html5 之 Google地图
显示地图 获取地图信息 var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x原创 2013-04-11 18:41:49 · 1028 阅读 · 0 评论 -
HTML5 之 notifications
<head HTML5 之 notifications const miao = 5; function init() { if (window.webkitNotifications) { window.webkitNotifications.requestPermissio转载 2013-04-11 19:38:20 · 946 阅读 · 0 评论 -
CSS3 动画之animation
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式, 就能创建由当前样式逐渐改为新样式的动画效果。 实例:把 "myfirst" 动画捆绑到 div 元素,时长:5 秒: div { width:100px; height:100px; background:red; animation:myfirst 5s; -moz-animation:myfirst原创 2013-04-10 19:00:18 · 1054 阅读 · 0 评论 -
CSS3 过渡之transition
通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点,必须规定两项内容: 1.规定您希望把效果添加到哪个 CSS 属性上 2.规定效果的时长 div { width:100px; height:100px; backgroun原创 2013-04-10 18:39:23 · 855 阅读 · 0 评论 -
CSS3 3D 转换
rotateX() 方法 通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。 div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari 和 Chrome */ -moz-transform: rotateX(120deg); /* Firefox */ } 解析:该方放法原创 2013-04-10 18:29:36 · 838 阅读 · 0 评论 -
CSS3 box-shadow 属性
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */ box-shadow: 10px 10px 5px #888888 ; 第一个参数:阴影向右偏离距离 第二个参数:阴影向下偏移距离 第三个参数:模糊程度 第四个参数:阴影的颜色 标准格式如下: box-shadow: h-shadow v-shadow blur spread c原创 2013-04-10 16:21:41 · 946 阅读 · 0 评论 -
CSS3 2D 转换
CSS3 2D 转换 Internet Explorer 9 需要前缀 -ms-。 Firefox 需要前缀 -moz-。 Chrome 和 Safari 需要前缀 -webkit-。 Opera 需要前缀 -o-。 ----------------------------------------------------------------------- 2D 转换方法: rotate()转载 2013-04-10 18:02:15 · 895 阅读 · 0 评论 -
CSS3 border-radius 属性
border-radius的含义是:圆角。border-radius是一种缩写方法。 如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。 设置圆角全部为5像素 border-radius: 5px 5px 3px 3px; border-radius: [左上] [右上] [右下] [左下]; ------------------------------原创 2013-04-10 14:39:32 · 1137 阅读 · 0 评论 -
CSS3 border-image 属性
-moz-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* 老版本的 Firefox */ -webkit-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* Safari */ -o-border-image: url(/i/b原创 2013-04-10 15:56:06 · 1273 阅读 · 0 评论 -
html5视频播放
html5播放器 $(function(){ var video = $("#myVideo"); $('#play').click(function(){video[0].play();}); $('#pause').click(function(){video[0].pause();}); $('#go10').click(function(){video[0].currentTime+=原创 2013-04-09 20:25:43 · 1022 阅读 · 0 评论 -
html5中canvas基本应用
canvas var c=document.getElementById("php100"); var p100=c.getContext("2d"); p100.fillStyle="#FF0000"; //定义颜色 p100.fillRect(0,0,300,300); //定义矩形的大小 p100.fillStyle="rgba(0,0,255,0.5)"; //定义颜色,支持透原创 2013-04-09 17:40:57 · 1068 阅读 · 0 评论 -
html5之canvas动画
canvas简单动画 script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">script> var index = 20; var x = 1; $(function(){ start(); var stop = setInterval("start()",5); $('#stop').cl原创 2013-04-09 18:18:09 · 1054 阅读 · 0 评论 -
日志
2014.07.14 今天是培训第五天,今天主要接触的课程是:研发管理体系、海康职业素养、海康行业地位与市场竞争格局。经过今天的学习,我基本知道了海康在行业领域的主要地位。 关于海康行业地位,我想说的是我之所以选择加入海康,我就是看好海康的发展,海康作为国内最大的DVR供应商和最大的网络摄像机供应商,我感到非常自豪。海康能够拥有今天的荣誉,我感觉都是海康人拼搏换来的,我们要保持这个良好势头,争原创 2014-07-19 20:17:39 · 1244 阅读 · 0 评论