仓酷云
标题:
带来一篇HTML5代码实例:HTML5全屏API
[打印本页]
作者:
飘飘悠悠
时间:
2015-1-15 22:57
标题:
带来一篇HTML5代码实例:HTML5全屏API
历经多年来的停滞不前,如今全球信息网联盟(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)">
[attach]291994[/attach]
</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
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
作者:
若相依
时间:
2015-1-24 08:11
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
作者:
爱飞
时间:
2015-2-1 07:20
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
作者:
老尸
时间:
2015-2-7 03:07
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上
作者:
精灵巫婆
时间:
2015-2-20 13:11
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
作者:
第二个灵魂
时间:
2015-3-6 18:06
可以使用 CSS 检查工具进行设计。
作者:
小妖女
时间:
2015-3-13 06:11
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
作者:
若天明
时间:
2015-3-20 15:47
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
欢迎光临 仓酷云 (http://ckuyun.com/)
Powered by Discuz! X3.2