html5实现的一些效果

一、网页换肤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页换肤</title>
		<script type="text/javascript">

		    //检查浏览器是否支持localStorage

			if(typeof localStorage===‘undefined‘){
				window.alert("not support localStorage");
			}else{
				window.alert("support localStorage");
				var storage = localStorage;
				//设置DIV背景颜色为红色,并保存localStorage
				function redSet(){
					var value = "red";
					document.getElementById("divblock").style.backgroundColor = value;
					window.localStorage.setItem("DivBackGroundColor",value);
				}

				function greenSet(){
					var value = "green";
					document.getElementById("divblock").style.backgroundColor = value;
					window.localStorage.setItem("DivBackGroundColor",value);
				}

				function blueSet(){
					var value = "blue";
					document.getElementById("divblock").style.backgroundColor = value;
					window.localStorage.setItem("DivBackGroundColor",value);
				}

				function colorload(){
					document.getElementById("divblock").style.backgroundColor = window.localStorage.getItem("DivBackGroundColor");
				}
			}
		</script>
	</head>
	<body >
		<section id="main">
			<button id="redbutton" onclick="redSet()">红色</button>
			<button id="greenbutton" onclick="greenSet()">绿色</button>
			<button id="bluebutton" onclick="blueSet()">蓝色</button>
			<div id="divblock" style="width: 500px; height: 500px;"></div>
		</section>
	</body>
</html>
时间: 2024-08-30 13:31:16

html5实现的一些效果的相关文章

HTML5实现刮奖效果

原文:HTML5实现刮奖效果 要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperation,这个属性有多个值,而实现刮奖效果要用到的值就是destination-out.意思就是:在已有内容和新图形不重叠的地方,已有内容保留,所有其他内容成为透明.这样可能不好理解,后面实现的时候会解释.有了globalCompositeOperation这个属性,实现过程就很简单了. 我们需要有两个

jQuery+HTML5图片瀑布流效果

JavaScript与HTML5实现美女瀑布流布局,本方法是把图片的路径写在了JS的数组里,不过重点好像不是在这里,而是在图片如何自动排列的问题,你可以运行本实例后,点击“加载瀑布流布局”按钮,即可看到图片的瀑布流排列效果,现在很流行这个,希望您从本代码中能找到一些灵感. <!DOCTYPE HTML> <html> <head> <title>jQuery+HTML5图片瀑布流效果丨河北电动叉车|石家庄苗木</title> <style

HTML5大数据可视化效果(一)彩虹爆炸图

前言 25年过去了,Brooks博士著名的“没有银弹”的论断依旧没有被打破.HTML5也是一样.但这并不妨碍HTML5是一个越来越有威力的“炸蛋”:发展迅速.势不可挡.随着HTML5技术的普及,用HTML5做可视化呈现的项目越来越多了.HTML5的优势明显:网页上直接运行无需插件.手机平板方便兼容.代码开发和维护相对容易,等等.一大波一大波的做Java..NET甚至C++桌面的程序老手们都纷纷开始研究javascript了,而初出茅庐的新一代程序猿更是义无反顾的直奔HTML5这个技术大热点而来.

HTML5 模拟现实物理效果

Ball Pool 是一个基于 HTML5 技术的实验,模拟现实物理效果,让你在 Web 中感受自然物体的运动.玩法介绍:可以随意拖动圆球.点击页面背景.晃动浏览器.双击页面背景或者按住鼠标左键,有不同的效果,赶紧来体验一下. 源码下载     在线演示

基于HTML5 Canvas生成粒子效果的人物头像

前面我们分享过一个HTML5 Canvas实现的图像马赛克模糊效果,HTML5处理图片真的非常简单.今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像,你可以任意选择一张头像图片,接下来该图片会被打散成许多粒子,然后慢慢的重组成图片,鼠标滑过图片时粒子还会出现浮动的动画特效,看上去非常酷. 在线预览   源码下载 HTML代码如下 <p class="center">Change pixel resolution <input type="r

html5各种页面切换效果和模态对话框

页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:<a href="index.html" data-transition="pop">I'll pop</a>data-transition 参数表:参数说明slide 从右侧向左滑入页面slideup 从底部向上滑入slidedown 从上向下滑入pop 从中心渐显展开fade 渐显flip 翻转备注:如果想要在目标页面中显示后退按钮,可以在链接中加入 dat

HTML5模仿刮奖效果-页面涂抹消失插件wScratch

前言 HTML5的canvas有很多应用点,如绘画板.图形绘制.游戏交互.彩票刮刮乐等,除了这些,还有个比较好的点就是主页涂抹一部分之后,页面消失进入主要内容. wScratch是一个模拟刮刮卡的jQuery插件,可以设置刮开纯色或者图像. 演示 显示刮卡百分比 到达一定百分比清空 属性设置 可用的属性,以下是默认值 1 2 3 4 5 6 7 8 9 10 $('#elem').wScratchPad({ size        : 5,          // The size of the

HTML5常用格式化标签效果的使用

代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hhh</title> </head> <body> 普通字体 <br> <b>定义加粗字体</b> <br> <big>定义大号字体</big> &

html5实现GIF图效果

代码如下: <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <style type="text/css">            *{                margin: 0;                padding: 0;