苹果官网Demo展示HTML5网页特效-快科技-科技改变生活

苹果官网Demo展示HTML5网页特效

Skyangeles
2010年06月04日 14:50
0

或许可以算是与Adobe之间“开放”平台之争的新回合，苹果今天在官方网站上专门开辟了一个栏目，展示基于HTML5标准的网页动态应用效果。

苹果展示的动态网页效果综合应用了HTML5、CSS以及JavaScript技术，包括7款Demo，分别是网页视频、文字特效、画面变换、图片浏览、音频、360度全景图片以及VR虚拟现实。所有Demo都可以在iPhone、iPod touch、iPad或Mac/Windows版的Safari浏览器上运行，其他浏览器打开该网页会被要求下载Safari。其中最特别的VR虚拟现实Demo由于需要CSS 3D变换技术支持，因此只支持苹果移动设备或Mac机上的Safari浏览器，Windows平台用户需要下载WebKit引擎每日更新版浏览器才能运行。

网页视频可随意改变视频尺寸

自定义文字特效

类似幻灯片播放的画面切换效果

网页动态相册

网页音频非常有趣的一款迷你音乐游戏

360度全景图

展示苹果专卖店全景的VR虚拟现实Demo Windows版Safari无法运行

好文点赞
水文反对

此文章为快科技原创文章，快科技网站保留文章图片及文字内容版权，如需转载此文章请注明出处：快科技

观点发布网站评论、账号管理说明

热门评论

{for c in All}
         <div class="pluninfo"> 
      
      <div class="pluninfo_head" style="height:auto;">
        <div class="pface">
              {if (c.UserName=="") ||(c.UserName=="guest")} 
              <a href="javascript:;"><img src="//11.mydrivers.com/m/images/v1/qianshui.jpg"></a> 
             {else}
              <a href="javascript:;" onclick="userCommentInfo(${c.UserID});"><img src="//passport.mydrivers.com/comments/getusertouxiang.aspx?uid=${c.UserID}&size=medium"></a> 
              {if (c.UserID== 0)} <span class="zuozhe">作者</span>{else}
            <span class="jibie">${c.userlevel}</span> {/if}
          {/if}
       </div>
        <div class="plcenter">
          <div class="pluninfo_top1"> <span class="username {if (c.usersex == 2)} girl{else} boy{/if}">  {if (c.UserName=="")||(c.UserName=="guest")} ${c.AUserName}{else}${c.UserName}{/if}</span> 
                 {if (c.Cfrom!="" && c.Cfrom != "mobile")}<span onclick="downapp_float();" title="下载驱家新闻客户端，展示小尾巴" class="span_from dev ${c.Cfrom}">${c.model}</span>{else}<span class="span_from dev {if (c.model!= "手机用户" && c.model!="")} browser{else} ${c.Cfrom}{/if}">{if (c.model!= "手机用户" && c.model!="")}<img src="${c.bwimg}">{/if}${c.model}</span>{/if}   
                </div>
          <div class="pluninfo_top2"><span>${c.IPAdd}</span><span>${c.PostDate}</span></div>
        </div>
        <div class="plright"><img src="//11.mydrivers.com/m/images/v1/plun_moreinfo.svg" alt=""/> 
          <div class="pedite_img" style="display: none;"><img src="//11.mydrivers.com/m/images/v1/triangle-up.svg" alt=""/></div>
          <div class="pedite" style="display: none;">
            <ul>
              <li><a href="javascript:;" onclick="ShowMyReply(${c.ID})" class="huifu">回复</a></li>
              <li> <a href="javascript:;" onclick="userReport(${c.ID},${c.TitleID})" class="jubao">举报</a></li>
              <li><a href="javascript:;" class="taoyan">讨厌</a></li>
              <li> <a href="javascript:;" class="dels">删除</a></li>
            </ul>
          </div> 
        </div>
      </div>
      <div style="clear:both"></div>
       
      
      <div class="pluninfo_center">${c.Content}
           {if (c.RevertContent!="")}
          	  <div class="yinyong">
        <div class=" plunxx_center1">
        <span class="username {if (c.usersex == 2)} girl{else} boy{/if}">{if (c.RevertUserName=="")} ${c.RevertAUserName}{else}${c.RevertUserName}{/if}的原贴：</span>
             ${c.RevertContent}
        </div> 
		  </div>
           {/if}
      </div>
       
      
      <div class="pluninfo_bottom">
        <div class="fayan">
          <ul>
            <li><a href="javascript:;" id="s_${c.ID}"  onclick="sndReq(${c.TitleID},${c.ID},'support',${c.Support})" class="zhichi">支持[${c.Support}]</a></li>
            <li><a href="javascript:;" id="o_${c.ID}"  onclick="sndReq(${c.TitleID},${c.ID},'oppose',${c.Oppose})" class="fandui">反对[${c.Oppose}]</a></li>
            <li onclick="ShowMyReply(${c.ID})">回复</li>
          </ul>
        </div>
      </div>
       
      
      
      <div class="div_huifu" id="div_reply_${c.ID}"></div>
      <div style="clear:both"></div>
       
    </div>
   {/for}

查看全部评论

相关报道

最热文章排行查看排行详情

邮件订阅

0 | 0| 0 | 0