html5项目总结1

Css3毛玻璃效果

不过今天又仔细研究了一下css3中的blur方法，可以实现同样的效果。且配合JS可以实现模糊缩放的效果。

CSS代码

.blur {

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

-webkit-filter: blur(10px); /* Chrome, Opera */

-moz-filter: blur(10px);

-ms-filter: blur(10px);

filter: blur(10px);

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */

}

.blur {

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

-webkit-filter: blur(10px); /* Chrome, Opera */

-moz-filter: blur(10px);

-ms-filter: blur(10px);

filter: blur(10px);

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */

}

HTML部分

其中blur(10px)中的大小决定了模糊后的图片大小和模糊程度

jQuery 效果 – 出现/消失

fadeIn()/ fadeOut()/fadeToggle() （淡入淡出效果)

语法：

$(selector).fadeTo(speed,callback);//speed可取值："slow"、"fast" 或毫秒。 1

$(selector).fadeTo(speed,callback);//speed可取值："slow"、"fast" 或毫秒。

$(selector).fadeTo(speed,opacity,callback);//fadeToggle()有透明度属性（值介于 0 与 1 之间）

案例

$(document).ready(function(){

$("button").click(function(){

$("#div1").fadeIn();

$("#div2").fadeIn("slow");

$("#div3").fadeIn(3000);

});

$(document).ready(function(){

$("button").click(function(){

$("#div1").fadeIn();

$("#div2").fadeIn("slow");

$("#div3").fadeIn(3000);

});

fadeIn( ),fadeOut( )会让div块容积消失；

$(document).ready(function)(){ $("button").click(function(){

$("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); });

});

$(document).ready(function)(){ $("button").click(function(){

$("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); });

});

fadeToggl(）置透明度值后，块的容积依然存在，只是透明度改变。

hide()/show()

语法：

$(selector).toggle(speed,callback); 1

$(selector).toggle(speed,callback); 案例

$(document).ready(function(){ $("p").click(function(){ $("#hide").hide();

$("#show").show("fast"); $("#toggle").toggle(600) });

});

$(document).ready(function(){ $("p").click(function(){

$("#hide").hide();

$("#show").show("fast");

$("#toggle").toggle(600)

});

如果设置了速度是毫秒值，被事件激发的块：

块（有宽、高值且不是100%，没有定位）——默认从左上角开始出现/从右下角开始隐藏；

块（有宽、高值且不是100%，有定位）——定位的坐标点开始出现/从反向位置隐藏；

块（有高值，宽是100%）——默认从上开始出现/从下开始隐藏；

slideDown()/slideUp()/slideToggle() (滑动效果)

用法同上，但是只有上下的方向。

HTML5中使用js控制audio标签的方法

<audio>标签可以在HTML5浏览器中播放音频文件。

<audio>默认提供一个控制面板，但是有些时候我们只需要播放声音，控制面板由我们自己来定义其显示的状态。

这里我们可以使用JS来进行控制，代码如下：

var audio ;

window.onload = function(){

initAudio();

}

var initAudio = function(){

//audio = document.createElement("audio")

//audio.src='Never Say Good Bye.ogg'

audio = document.getElementById('audio');

}

function getCurrentTime(id){

alert(parseInt(audio.currentTime) + '：秒');

}

function playOrPaused(id,obj){

if(audio.paused){

audio.play();

obj.innerHTML='暂停';

return;

}

audio.pause();

obj.innerHTML='播放';

}

function hideOrShowControls(id,obj){ if(audio.controls){

audio.removeAttribute('controls'); obj.innerHTML = '显示控制框' return;

}

audio.controls = 'controls';

obj.innerHTML = '隐藏控制框' return;

}

function vol(id,type , obj){ if(type == 'up'){

var volume = audio.volume + 0.1; if(volume >=1 ){

volume = 1 ;

}

audio.volume = volume; }else if(type == 'down'){

var volume = audio.volume - 0.1; if(volume <=0 ){

volume = 0 ;

}

audio.volume = volume;

}

document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume);

}

function muted(id,obj){

if(audio.muted){

audio.muted = false;

obj.innerHTML = '开启静音';

}else{

audio.muted = true;

obj.innerHTML = '关闭静音';

}

//保留一位小数点

function returnFloat1(value) {

value = Math.round(parseFloat(value) * 10) / 10;

if (value.toString().indexOf(".") < 0){

value = value.toString() + ".0";

}

return value;

}

调用方式如下：

<a href="javascript:void(0);" onclick="getCurrentTime('firefox');">获取播放时间</a>

<a href="javascript:void(0);"

onclick="hideOrShowControls('firefox',this);">隐藏控制框</a>

当前音量：<span id = "nowVol"> - </span>

javascript判断图片是否加载完成方法整理

有时候我们在前端开发工作中为了获取图片的信息，需要在图片加载完成后才可以正确的获取到图片的大小尺寸，并且执行相应的回调函数使图片产生某种显示效果。本文主要整理了几种常见的javascipt判断图片加载完成时的方法，并通过代码与实际应用相结合进行解释与说明。

onload方法

通过向img标签添加onload属性，并填入相应的函数来执行后续的javascipt代码。如下代码例子中img元素默认是不显示的，通过onload判断加载完成后再将图片显示出来。

function get(ts){

ts.style.display = 'block'; //显示图片

}

</script>

优点：可以将javascript代码部分放置于页面的任何部分加载，并且可以用于多数任意图片上。使用比较简单，易理解。

缺点：必须在每个标签上都贴上onlaod属性，在某些无法直接操作HTML代码，或者需要代码精简的情况下不适用

javascipt原生方法

选取指定ID的图片，通过onload指定回调方法，在图片加载完成后弹出“图片加载已完成”字样提示。

document.getElementById("pic1").onload = function () {

alert("图片加载已完成");

}

</script>

优点：简单易用，不影响HTML代码。

缺点：只能指定一个元素，javascipt代码必须置于图片元素的下方

jquery方法

为每个class为pic1的图片元素绑定事件，通过jquery的load方法，将元素渐现出来。

注意，不要在$(document).ready()里绑定load事件。

$(function(){

$('.pic1').each(function() {

$(this).load(function(){

$(this).fadeIn();

}); });

})

</script>

优点：可以批量绑定元素事件，并且不影响HTML代码内容

缺点：需要jquery库的支持，代码需要放置到需要操作元素的下方。一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10

在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题百度源代码如下

<!Doctype html>

<html >;

<head>

可以打开百度，右键查看源码看下！我们可以看下文件头是否存在这样一行代码！这句话的意思是强制使用IE7模式来解析网页代码！

在这里送上几种IE使用模式！

2. Google Chrome Frame也可以让IE用上Chrome的引擎:

3.强制IE8使用IE7模式来解析

//或者

4.强制IE8使用IE6或IE5模式来解析

5.如果一个特定版本的IE支持所要求的兼容性模式多于一种，如：

二.设定网站服务器以指定预设兼容性模式

如果服务器是自己的话，可以在服务器上定义一个自订标头来为它们的网站预设一个特定的文件兼容性模式。这个特定的方法取决于你的网站服务器。

录入，下列的 web.config文件使Microsoft Internet Information Services (IIS)能定义一个自订标头以自动使用IE7 mode来编译所有网页。

另外还有一起其他的解决方案，例如google的

ie7 – js中是一个JavaScript库（解决IE与W3C标准的冲突的JS库），使微软的Internet Explorer的行为像一个Web标准兼容的浏览器，支持更多的W3C标准，支持CSS2、CSS3选择器。它修复了许多的HTML和CSS问题，并使得透明PNG在IE5、IE6下正确显示。

使IE5,IE6兼容到IE7模式（推荐）

<!–[if lt IE 7]>

使IE5,IE6,IE7兼容到IE8模式

<!–[if lt IE 8]>

<![endif]–>

使IE5,IE6,IE7,IE8兼容到IE9模式

<!–[if lt IE 9]>

<![endif]–>

解决PNG显示问题

只需将透明png图片命名为*-trans.png

需要注意的是：此方法对背景平铺(background-repeat)和背景(background-position)无法起到任何作用,默认会占满整个容器。

三、<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />

创建html5时发现这么一句话，不知其什么意思，百度如下：

这样写可以达到的效果是如果安装了GCF，则使用GCF来渲染页面，如果没安装GCF，则使用最高版本的IE内核进行渲染。Google Chrome Frame（谷歌内嵌浏览器框架GCF）。这个插件可以让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核，而且支持IE6、7、8等多个版本的IE浏览器。

相关推荐

html5项目总结1

专栏推荐