爱周末 » html5 http://zhoumo123.cn 知识分享，共同进步。zhoumo123.cn Thu, 07 Nov 2019 05:53:49 +0000 zh-CN hourly 1 http://wordpress.org/?v=4.0.1 html5使用DeviceMotionEvent实现摇一摇 http://zhoumo123.cn/web/html5/3394.html http://zhoumo123.cn/web/html5/3394.html#comments Tue, 01 Dec 2015 05:45:36 +0000 http://zhoumo123.cn/?p=3394 阅读全文 ]]> <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″>
<title> html5使用DeviceMotionEvent实现摇一摇 </title>
<style type=”text/css”>
.center{position:absolute; width:640px; height:480px; left:50%; top:50%; margin-left:-320px; margin-top:-240px; line-height:480px; text-align:center; font-size:100px; }
.normal{background:#000000;}
.normal .txt{color:#FFFFFF;}
.doing{background:#FF0000;}
.doing .txt{color:#FFFF00;}
</style>
</head>

<body id=”mybody” class=”normal”>
<div id=”txt” class=”txt center”>请执行摇一摇</div>
</body>

<script type=”text/javascript”>
var doing = 0; // 判断是否在动画显示中
var speed = 23; // 定义摇动的速度数值
var lastx = 0;
var lasty = 0;
var lastz = 0;

function handleMotionEvent(event) {
var x = event.accelerationIncludingGravity.x;
var y = event.accelerationIncludingGravity.y;
var z = event.accelerationIncludingGravity.z;

if(doing==0){
if(Math.abs(x-lastx)>speed || Math.abs(y-lasty)>speed){
doing = 1;
show();
}
}

lastx = x;
lasty = y;
lastz = z;
}

function show(){
document.getElementById(‘mybody’).className = ‘doing';
document.getElementById(‘txt’).innerHTML = ‘执行了摇一摇';
setTimeout(function(){
doing=0;
document.getElementById(‘mybody’).className=’normal';
document.getElementById(‘txt’).innerHTML = ‘请执行摇一摇';
},3000);
}

window.addEventListener(“devicemotion”, handleMotionEvent, true);
</script>

</html>

 

http://blog.csdn.net/fdipzone/article/details/50103027

]]> http://zhoumo123.cn/web/html5/3394.html/feed 0 手机图片视频自适应代码max-width:100%;实现图片视频自动缩放 http://zhoumo123.cn/web/html5/2445.html http://zhoumo123.cn/web/html5/2445.html#comments Thu, 29 Jan 2015 03:40:36 +0000 http://zhoumo123.cn/?p=2445 无论浏览器窗口的大小还是在手机屏幕上如何做到图片自适应自动缩放呢，只需要一行CSS代码：

img { max-width: 100%;} /*针对图片*/
object { max-width: 100%;} /*针对视频*/
img, object { max-width: 100%;} /*针对图片和视频*/

css-img-1

 

可以通过本站看一下图片缩放效果。如：http://zhoumo123.cn/category/web

]]> http://zhoumo123.cn/web/html5/2445.html/feed 0 手机访问页面字体变小，页面自适应屏幕的方法（meta中的viewport） http://zhoumo123.cn/web/html5/176.html http://zhoumo123.cn/web/html5/176.html#comments Thu, 24 Jul 2014 11:00:15 +0000 http://zhoumo123.cn/?p=176 手机访问页面字体变小，页面自适应屏幕的代码
页面中加入代码：

<meta name="viewport" content="width=device-width, initial-scale=1">

这样手机访问就自适应屏幕了。不支持IE8以及低于IE8的浏览器。

]]> http://zhoumo123.cn/web/html5/176.html/feed 0 8款最受欢迎的HTML5/CSS3应用及代码 http://zhoumo123.cn/web/html5/116.html http://zhoumo123.cn/web/html5/116.html#comments Mon, 16 Jun 2014 11:58:22 +0000 http://zhoumo123.cn/?p=116 阅读全文 ]]> 新的一周开始，小编也将继续为大家分享精彩的HTML5应用，还有CSS3和jQuery方面的东西。今天给大家带来的是8款最受欢迎的HTML5/CSS3应用及代码，一起来看看吧。
1、基于HTML5 Canvas的图表插件Chart.js

chart.js是一款基于HTML5 Canvas的图表插件，chart.js的功能非常强大，它不仅提供了常见的柱形图、折线图、饼状图，而且还提供了环形图、雷达图，样式外观多样，图表的色彩搭配也比较清新。chart.js还有一个特点就是图表在初始化的时候有弹性动画特效，这也是HTML5 Canvas的一大功劳。

1

 

2、HTML5 3D动画柱状图表

这次我们要分享一款很酷的HTML5 3D图表应用，它是一款柱状图表，呈3D的外观样式，并且我们可以改变图表的颜色主题，让其更加符合你的需求。这款HTML5图表可以切换需要查看的图表数据，在切换的时候有不错的动画效果，而且，我们还可以切换图表的大小，以适应不同大小的浏览窗口。

2

 

3、CSS3 3D环形进度条 带进度百分比

这是一款基于纯CSS3的环形进度条，而且，从外观上看，这款进度条很有3D立体的感觉，尤其是在进度条上有立体的投影，显得非常小巧迷人。

3

 

4、纯CSS3垂直Tab菜单 Tab样式可自定义

Tab菜单在网页上使用起来非常方便，也比较节省空间，所以很多门户网站很喜欢用Tab菜单。今天我们要来分享一款垂直方向的Tab菜单，它是用纯CSS3实现的，加载和切换特别灵活。另外，Tab菜单的样式你可以使用CSS重新定义，扩展很方便。

4

 

5、纯CSS3水平控制按钮开关

今天我们要来分享一款基于纯CSS3的水平控制开关按钮，它有3种不同的颜色风格，开关按钮的数量可以自己定义，鼠标点击按钮时背景色块将会缓慢移动到所在的按钮位置，表示用户已经选中这个选项。我们可以用它来控制用户的选择项。

5

 

6、HTML5/CSS3 3D焦点图 支持鼠标滚轮

记得以前给大家分享过一款很酷HTML5 3D相册，不知道你有没有研究过源码。今天我再向大家分享一款基于HTML5和CSS3的焦点图相册，在浏览图片时，没激活的图片并不是完全隐藏，而是以3D半透明的方式陈列在主图旁边。值得注意的是，这款HTML5 3D焦点图支持鼠标滚轮来切换图片。

6

 

7、jQuery仿iPhone解锁滑块焦点图

这是一款基于jQuery的仿iPhone解锁滑块焦点图，还记得早期iPhone解锁装置么，现在我们将这样的样式应用到这款jQuery焦点图上。你可以滑动鼠标，该解锁装置就会跟随鼠标一起滑动，同时，图片也就完成了切换的效果。

7

 

8、HTML5 DNA螺旋旋转动画效果

这是一款基于HTML5的螺旋动画特效，它就像DNA分子结构一样，可以绕着中心线不停地旋转。

8

 

以上就是8款最受欢迎的HTML5/CSS3应用及代码，欢迎收藏分享。

本文地址：http://zhoumo123.cn/web/html5/116.html
原文链接：http://www.html5tricks.com/8-pop-html5-css3-apps.html

]]> http://zhoumo123.cn/web/html5/116.html/feed 0 article元素 http://zhoumo123.cn/web/html5/18.html http://zhoumo123.cn/web/html5/18.html#comments Tue, 20 May 2014 01:03:30 +0000 http://zhoumo123.cn/?p=18 阅读全文 ]]> article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。

除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。

现在，让我们以博客为例来看一段关于article元素的代码示例，如代码清单3-1所示。

代码清单3-1   article元素示例


<article>
    <header>
        <h1>苹果</h1>
        <p>发表日期: <time pubdate="pubdate">2010/10/09</time></p>
    </header>
    <p><b>苹果</b> ，植物类水果，多次花果...（"苹果"文章正文）</p>
    <footer>
        <p><small>著作权归***公司所有。</small></p>
    </footer>
</article>

这个示例是一篇讲述苹果的博客文章，在header元素中嵌入了文章的标题部分，在这部分中，文章的标题“苹果”被镶嵌在h1元素中，文章的发表日期镶嵌在p元素中。在标题下部的p元素中，嵌入了一大段该博客文章的正文，在结尾处的footer元素中，嵌入了文章的著作权，作为脚注。整个示例的内容相对比较独立、完整，因此，对这部分内容使用了article元素。

article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式；用来呈现评论的article元素被包含在表示整体内容的article元素里面。

接着，让我们来看一个关于article元素嵌套的代码示例，如代码清单3-2所示。

代码清单3-2   article元素嵌套示例

    <article> 
        <header> 
            <h1>苹果</h1> 
            <p>发表日期:  
                   <time pubdate datetime="2010/10/09">2010/10/09</time> 
            </p> 
        </header> 
        <p><b>苹果</b> ，植物类水果，多次花果...（"苹果"文章正文）</p> 
        <section> 
            <h2>评论</h2> 
            <article> 
                <header> 
                   <h3>发表者：陆凌牛</h3> 
                   <p> 
                      <time pubdate datetime="2010-10-10T19:10-08:00"> 
                          1小时前  
                      </time> 
                   </p> 
                </header> 
                <p>我喜欢苹果，我最喜爱的品种是红富士。</p> 
            </article> 
            <article> 
                <header> 
                   <h3>发表者：张玉</h3> 
                   <p> 
                      <time pubdate datetime="2010-10-10T19:15-08:00"> 
                          1小时前  
                      </time> 
                   </p> 
                </header> 
                <p>苹果？我不喜欢，我喜欢吃橘子。</p> 
            </article> 
        </section> 
    </article>

这个示例中的内容比代码清单3-1中的内容更加完整了，它添加了文章读者的评论内容，示例的整体内容还是比较独立、完整的，因此对其使用article元素。具体来说，示例内容又分为几部分，文章标题放在了header元素中，文章正文放在了header元素后面的p元素中，然后section元素把正文与评论部分进行了区分（section元素马上就要讲到，是一个分块元素，用来把页面中的内容进行分块），在section元素中嵌入了评论的内容，评论中每一个人的评论相对来说又是比较独立、完整的，因此对它们都使用一个article元素，在评论的article元素中，又可以分为标题与评论内容部分，分别放在header元素与p元素中。

关于示例中提到的time元素与pubdate属性，请查看本节结尾处有关time元素与pubdate属性的说明。

另外，article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。代码清单3-3是它的一个示例。

代码清单3-3   用article元素表示插件

    <article> 
        <h1>My Fruit Spinner</h1> 
        <object> 
            <param name="allowFullScreen" value="true"> 
            <embed src="#" width="600" height="395"></embed> 
        </object> 
    </article>

 

参考资料：HTML5 与 CSS3 权威指南

]]> http://zhoumo123.cn/web/html5/18.html/feed 0 html5新增的结构元素 section元素 http://zhoumo123.cn/web/html5/8.html http://zhoumo123.cn/web/html5/8.html#comments Mon, 19 May 2014 06:23:00 +0000 http://zhoumo123.cn/?p=8 section元素

section元素表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分，它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，标示文档结构。

html5 中代码示例;

<section> … </section>

html4中代码示例;

<div> … </div>

 

 

]]> http://zhoumo123.cn/web/html5/8.html/feed 0