带来一篇HTML5代码实例:HTML5全屏API

只看该作者 · 发表于 2015-1-15 22:57:54

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

历经多年来的停滞不前，如今全球信息网联盟(WorldWideWebConsortium，W3C)重拾HTML标准化。破洛洛文章简介：HTML5全屏API，全屏扫瞄图片。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>html5-fullscreen-api</title>

<style>

*{margin:0;padding:0}

img{display:block;margin:0auto}

.imgContainer:-webkit-full-screen{
width:100%;height:100%;background:#060;overflow:hidden;background:#000;text-align:center;

position:fixed;

left:0;top:0;

display:table-cell;

bottom:0;right:0;

}

.imgContainer:-moz-full-screen{
width:100%;height:100%;background:#060;overflow:hidden;background:#000;text-align:center;

position:fixed;

left:0;top:0;

bottom:0;right:0;

display:table-cell;

vertical-align:middle

}

.imgContainer:-webkit-full-screenimg{max-width:100%;display:inline-block;vertical-align:middle;cursor:url("http://a.xnimg.cn/n/apps/photo/modules/photo-view/CSSimg/zoomOut.cur"),auto;
}
.imgContainer:-moz-full-screenimg{max-width:100%;display:inline-block;vertical-align:middle;cursor:url("http://a.xnimg.cn/n/apps/photo/modules/photo-view/cssimg/zoomOut.cur"),auto;
}

</style>

<scripttype="text/javascript">

(function(){

varfullScreenApi={

supportsFullScren:false,

isFullScreen:function(){returnfalse;},
requestFullScreen:function(){},
cancelFullScreen:function(){},

prefix:

}

browserPrefixes=webkitmozomskhtml.split();

if(typeofdocument.cancelFullScreen!=undefined){

fullScreenApi.supportsFullScren=true

}

else{

for(vari=0,il=browserPrefixes.length;i<il;i++){

fullScreenApi.prefix=browserPrefixes[i];

if(typeofdocument[fullScreenApi.prefix+CancelFullScreen]!=undefined){

fullScreenApi.supportsFullScreen=true;

break;

}

}

}

//假如扫瞄撑持全屏

if(fullScreenApi.supportsFullScreen){

fullScreenApi.fullScreenEventName=fullScreenApi.prefix+fullscreenchange;

fullScreenApi.isFullScreen=function(){

switch(this.prefix){

case:

returndocument.fullScreen

casewebkit:

returndocument.webkitIsFullScreen

default:

returndocument[this.prefix+FullScreen]

}

}

fullScreenApi.requestFullScreen=function(el){

return(this.prefix===)?el.requestFullScreen():el[this.prefix+RequestFullScreen]();

}

fullScreenApi.cancelFullScreen=function(el){

return(this.prefix===)?el.cancelFullScreen():el[this.prefix+CancelFullScreen]();

}

}

window.fullScreenApi=fullScreenApi;

})()

</script>

</head>
<body>

<h1align="center"></h1>

<divclass="imgContainer">

<ahref="javascript:void(0)">

</a></div>

<scripttype="text/javascript">

window.onload=function(){

if(window.fullScreenApi.supportsFullScreen){
varimgContainer=document.getElementsByTagName(div);

varimgsLen=imgContainer.length;

for(vari=0;i<imgsLen;i++){

imgContainer[i].addEventListener(click,function(){

if(!fullScreenApi.isFullScreen()){

this.style.lineHeight=window.screen.height+px;

window.fullScreenApi.requestFullScreen(this)
}

else{

window.fullScreenApi.cancelFullScreen(document)
}

},true)

}

}

}

</script>

</body>

</html>
用chrome大概firefox间接运转便可。。。
</p>
Resig在2008年在其博客中介绍过HTML5的data-属性，现如今HTML5在如火如荼地推广，似乎国内的技术有些延迟，这篇博文可以在这里找到。

只看该作者 · 发表于 2015-1-17 19:54:03

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

只看该作者 · 发表于 2015-1-24 08:11:04

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

只看该作者 · 发表于 2015-2-1 07:20:40

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

只看该作者 · 发表于 2015-2-7 03:07:02

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

只看该作者 · 发表于 2015-2-20 13:11:06

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

只看该作者 · 发表于 2015-3-6 18:06:43

可以使用 CSS 检查工具进行设计。

只看该作者 · 发表于 2015-3-13 06:11:36

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

只看该作者 · 发表于 2015-3-20 15:47:54

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

		自动登录	找回密码
密码			立即注册

[HTML5] 带来一篇HTML5代码实例:HTML5全屏API

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子