那一抹温暖的阳光,是我们永恒的向往。
www.webbar.cn

跨浏览器兼容的HTML5视频音频播放器Browse:3317

用html5 js实现浏览器全屏

HTML5的video和audio标签是用来在网页中加入视频和音频的标签,在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。 使用html5media.js可以在所有浏览器上观看html5视频和音频文件,它弥补了低版本IE浏览器不支持<video> 和<audio>标签,只需要载入html5media.js使用<video>和<audio>标签就能跨浏览器 播放视频和音频。 如何使用? 想让html5的video和audio标签能在所有浏览器上工作,必须在页面的head内部加入以下一行代码: <script src="//a...

时间:2015-12-25
标签: ,
评论:0

css3新增加的选择器Browse:4215

css3新增加的选择器

一、属性选择器: E[attr] 只要有属性名 E[attr=value] 属性名=属性值 E[attr~=blue] 包含这个blue整个单词就可以 E[attr^=c] 以这个字母c开头的 E[attr$=b] 以这个字母b结尾的 E[attr*=a] 只要包含a这个字母就行 E[attr|=z] 只要以字母z-开头的或者就是字母z的 二、结构性伪类选择器: E:nth-child(n) 第n个子节点 div:nth-child(odd) 奇数行 div:nth-child(even) 偶数行 div:nth-child(2n) 2的倍数 E:nth-last-child(n) 倒数第n个 三、其他: E:empty 空元素 E:first-child 第一个子节点、和 E:nth-child(1)等价 E:last-child 倒数第一个、和 E:nth-last-child(1)等价 ...

时间:2015-09-04
分类:CSS , 前端开发
标签:
评论:0

love 玫瑰花Browse:7731

玫瑰花

< !doctype html> <html> <head> <title>Love</title> <meta charset="utf-8" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> < ![endif]--> </head> <body> <canvas id="c"></canvas> <script> var b = document.body; var c = document.getElementsByTagName('canvas')[0]; var a = c.getContext('2d'); document.body.clientWidth; </script> <script> // start of submission // with (m = Math) C = cos, S = sin, ...

时间:2015-08-19
标签: , , , ,
评论:0

position:fixed兼容性 IE6震动 解决方案Browse:10389

position:fixed兼容性 IE6震动

众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天我做自 己的博客模板的时候,遇到了这个问题。当时就简单的无视了IE6——尽管有几个使用IE6的朋友,一起BS我……但是对于大项目或商业网站,如果有用到这 个属性的时候,是不可能直接无视的。   你是如何让position:fixed在IE6中工作的? 本文所使用的技巧是用了一条Internet Explorer的CSS表达式(expression)。你不可以直接使用该表达式,因为它可能会因为缓存而不更新。解决这一点的最简单的方式是使用eval包裹你的语句。 如何解决“振动”的问题? 显然IE有一个多步的渲染进程。当你滚...

时间:2014-06-08
分类:CSS , HTML , 前端开发
标签: ,
评论:0

7件你不知道但可以用CSS做的事Browse:5025

7件你不知道但可以用CSS做的事

不管你信不信,CSS和JavaScript开始重叠,就像CSS增加了更多功能一新。在我写“你可能不知道的CSS和JavaScript互相影响的5种方式”一文时,人们对于JavaScript和CSS是如何重叠的感到惊讶。今天,我将重点强调你能用CSS完成的7种工作——不需要通过JavaScript或图片。   CSS@supports 在使用一些浏览器可能没有的特性时,每一个优秀的前端开发者都需要进行特性测试。特性测试一直以来都是由JavaScript来做的,许多人使用Modernizr,一个由许多测试良好的案例构成的优秀实用工具,来做特性测试。一个新API:@supports,不管怎样,已经出现在开发人员面前,它能让你用CSS来做特性测试。以下是一些@suppo...

时间:2014-05-12
分类:CSS , 前端开发
标签:
评论:0

纯CSS3实现的图片滑块程序 效果非常酷Browse:5256

纯CSS3实现的图片滑块程序 效果非常酷

之前我们经常会看到很多利用jQuery实现的焦点图插件,种类太多了,今天我想给大家分享一款利用纯CSS3实现的图片滑块应用,完全是利用CSS3的相关特性,没有使用JS,个人觉得还是挺不错的,先来看看效果图: 看上去挺不错的吧,简洁、清新、大气。 当然我们也可以在这里查看DEMO演示。 接下来我们一起来分析一下源码,首先是HTML代码,非常简单: <div id="gal"> <nav class="galnav"> <ul> <li><input type="radio" name="btn" value="one" checked="checked" /> <label for="btn"></label> <figure> <img src="images/01_Fabio_Ba...

时间:2014-04-17
分类:CSS , 前端开发
标签:
评论:0

Web 开发中 9 个有用的提示和技巧Browse:8270

Web 开发中 9 个有用的提示和技巧

1. 使用 html5 的 placeholder 属性 以前我们经常要写不少JavaScript 的代码来实现现在HTML5 的 placeholder 属性的功能,一个输入框在没获取焦点时显示某个提示信息,当获得输入焦点就自动清除提示信息,目前支持该属性的浏览器有:Opera 11+, Firefox 9+, Safari 5+, IE 10+,不过下面提供的代码对于不支持 placeholder 的浏览器也适用:         // jQuery code var i = document.createElement("input"); // Only bind if placeholder isn't natively supported by the browser if (!("placeholder" in i)) { $("input[placeholder]").each(function () { var self = $(this); self....

时间:2014-04-15
分类:CSS , HTML , 前端开发
标签: , ,
评论:0
Search