展开菜单

使用JS和canvas实现gif动图的停止和播放

使用JS和canvas实现gif动图的停止和播放

HTML5 canvas可以读取图片信息,绘制当前图片。于是可以实现图片马赛克,模糊,色值过滤等很多图片特效。我们这里不用那么复杂,只要读取我们的图片,重绘下就可以。 HTML代码: <img id="testImg" src="xxx.gif" width="224" height="126"> <p><input type="button" id="testBtn" value="停止"></p> JS代码: if ('getContext' in document.createEl...

通过HTML5 Canvas实现360度全景图

很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样 对购买者来说是一个很好的消费体验,用HTML5 Canvas也可以实现类似的功能。 360度全景图的原理: 首先需要对实物拍照,间隔是每张照片旋转15度,所以需要23张照片。 照片准备好了以后,尽量选择JPG格式,裁剪到适当大小。 JAVASCRIPT中预加载所有照片,可以配合进度条显示加载精度 创建/获取Canvas对象,加上鼠标监听事件,当鼠标左右移动时候,适度的绘制不 同帧。大致的原理就是这样,比较简...

HTML5实现网页图片鼠标悬停黑白变换效果

使用HTML5画布,图像可以被巧妙的转换为灰色,而不必使用图像编辑软件。下面的示例将展示如何使用HTML5和jQuery动态的将彩色图像转换为灰色。 贡献者:感谢达西·克拉克 贡献jQuery和Javascript代码。 效果演示:http://webdesignerwall.com/demo/html5-grayscale/ 目的 这个示例的目的是向你展示如何使用HTML5和jQuery创建一个灰度/彩色图像的鼠标悬浮效果。在HTML5出现前,实现这个效果需要两幅图像,彩色的和灰度的版本。现在HTML5让创建这个效果更加容易和高效,因为灰...

响应式HTML5模板制作教程

响应式HTML5模板制作教程

HTML5目前发展势头良好,已经逐渐得到大部分浏览器不同程度的支持。许多web开发者也已经学习到了不少关于HTML 5的基础知识并开始试图使用HTML 5制作网页。与此同时,目前基于响应式的网页设计理念也得到了广泛的认同,开发者在开发基于HTML 5的网页时,如果能创建响应式的页面,则会增色不少,特别是能适配各类移动终端。在本文中,读者将学习到如何创建一个简单的响应式HTML 5模版。本文的读者需要有一点HTML 5的基础知识。 创建良好的HTML 5模版的特征有: 新的特性应该只是基于HTML、CSS、DOM和Javscript ...

jquery+HTML5响应式导航菜单设计教程

jquery+HTML5响应式导航菜单设计教程

通过jquery+html5实现,当浏览器窗口缩小或者手机访问的时候,导航菜单变成按钮下拉式菜单。效果图: HTML代码: <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </nav> jQuery代码: ...

HTML5响应式导航菜单下载 不支持IE8

HTML5响应式导航菜单下载 不支持IE8

适用浏览器:FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。 正常显示状态: 窗口缩小显示状态 点击显示状态 下载地址: http://pan.baidu.com/s/1dDtG7y5 

HTML5+CSS3实现响应式导航菜单

HTML5+CSS3实现响应式导航菜单

不使用JavaScript来实现响应式菜单。它完全使用整洁和语义化的HTML5标记,而且菜单可以居左、居中和居右对齐,它也包含一个指示器来显示当前激活的菜单项。菜单可以在hover时展开,触屏手机如果点击的话会变成链接跳转,需要用手拨动才是正常的,关闭的话即点击其它地方。 演示地址:http://webdesignerwall.com/demo/responsive-menu/ HTML代码 <nav class="nav"> <ul> <li class="current"><a hre...

HTML响应式导航菜单适应小屏幕设备

HTML <nav> <ul> <li><a href="/">首页</a></li> <li><a href="/server.html">服务</a></li> <li><a href="/case.html">案例</a></li> <li><a href="/about.html">关于</a>&l...

调用html5.js实现IE(包括IE6)支持HTML5元素

微软的最新浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。 让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement_x声明,利用条件注释针对IE来调用这个js文件。Opera,FireFox等其他非IE浏览器就会忽视这段代码,也不会存在http请求。 <!–[if IE]> <script src=”http://html5shiv.googlecode.com/svn/tru...