HTML5+JS瀑布及海浪一些特效

liujieheng 2013-12-06

来源:flash,as,js兴趣爱好者HTML5+JS瀑布及海浪一些特效     <!doctype html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Canvas Cycle: True 8-bit Color Cycling with HTML5</title>
    <meta name="generator" content="TextMate http://macromates.com/">
    <meta name="author" content="Joseph Huckaby">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <link rel="stylesheet" type="text/css" href="style.css" >
    <script type="text/javascript" src="oop.js"></script>
    <script type="text/javascript" src="tools.js"></script>
    <script type="text/javascript" src="cookie.js"></script>
    <script type="text/javascript" src="palette.js"></script>
    <script type="text/javascript" src="bitmap.js"></script>
    <script type="text/javascript" src="scenes.js"></script>
    <script type="text/javascript" src="tween.js"></script>
    <script type="text/javascript" src="framecount.js"></script>
    <script type="text/javascript" src="main.js"></script>
    </head>
    <body>
    <div id='aaa'></div>
    <div id="container">
    <div id="d_header">
    <div id="d_scene_selector"></div>
    <div id="d_scene_btns">
    <div class="button left" onClick="CC.jumpScene(-1)">&lt; Prev</div><div class="button right" onClick="CC.jumpScene(1)">Next &gt;</div>
    </div>
    <div id="d_options_control">
    <div id="btn_options_toggle" class="button left right" onClick="CC.toggleOptions()">Show Options &#x00BB;</div>
    </div>
    <div class="clear"></div>
    </div>
    <div id="d_loading"></div>
    <canvas id="mycanvas" width="640" height="480" style=""></canvas>
    <div id="d_options">
    <div class="label">SOUND:</div>
    <div class="section">
    <div id="btn_sound_off" class="button left" onClick="CC.setSound(false)">Off</div><div id="btn_sound_on" class="button right selected" onClick="CC.setSound(true)">On</div>
    </div>
    <div class="label">ZOOM:</div>
    <div class="section">
    <div id="btn_zoom_actual" class="button left selected" onClick="CC.setZoom(false)">Actual</div><div id="btn_zoom_max" class="button right" onClick="CC.setZoom(true)">Max</div>
    </div>
    <div class="label">CYCLE SPEED:</div>
    <div class="section">
    <div id="btn_speed_025" class="button thin left" onClick="CC.setSpeed(0.25)">&frac14;</div><div id="btn_speed_05" class="button thin" onClick="CC.setSpeed(0.5)">&frac12;</div><div id="btn_speed_1" class="button thin selected" onClick="CC.setSpeed(1)">1</div><div id="btn_speed_2" class="button thin" onClick="CC.setSpeed(2)">2</div><div id="btn_speed_4" class="button thin right" onClick="CC.setSpeed(4)">4</div>
    </div>
    <div class="label">CYCLE MODE:</div>
    <div class="section">
    <div id="btn_blendshift_off" class="button left" onClick="CC.setBlendShift(false)">Standard</div><div id="btn_blendshift_on" class="button right selected" onClick="CC.setBlendShift(true)">Blend</div>
    </div>
    <div class="label">PALETTE:</div>
    <div id="palette_display"></div>
    
    <div id="d_debug"></div>
    </div>
    
    <div class="clear"></div>
    </div>
    <div id="d_footer">
    <span><a href="http://www.effectgames.com/effect/article.psp.html/joe/Old_School_Color_Cycling_with_HTML5" target="_blank">Canvas Cycle: True 8-bit Color Cycling with HTML5</a></span>
    <span>Art by <a href="http://www.markferrari.com" target="_blank">Mark Ferrari</a></span>
    <span>Code by Joseph Huckaby</span>
    </div>
    <script language="JavaScript">
    if (document.addEventListener) {
    document.addEventListener( "DOMContentLoaded", function() {
    document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
    CC.init();
    }, false );
    window.addEventListener( "load", function() {
    window.removeEventListener( "load", arguments.callee, false );
    CC.init();
    }, false );
    
    window.addEventListener( "resize", function() {
    CC.handleResize();
    }, false );
    }
    else if (window.attachEvent) {
    }
    </script>
    image.php?file=VDBAM&callback=CanvasCycle.processImage
    <script type="text/javascript"> var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-5875241-1']);_gaq.push(['_trackPageview']); (function() {var ga = document.createElement('script');ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';ga.setAttribute('async', 'true');document.documentElement.firstChild.appendChild(ga);})(); </script>
    </body>
    </html>

<script type="text/javascript">// <![CDATA[ var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-5875241-1']);_gaq.push(['_trackPageview']); (function() {var ga = document.createElement('script');ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';ga.setAttribute('async', 'true');document.documentElement.firstChild.appendChild(ga);})(); // ]]></script>
argel_lj 2014-01-04
u013680195 2014-04-02
CSS基础教程17篇

此教程共17篇,由浅到深、循序渐进的讲述CSS知识。
对初学者有很大的学习价值,对已入门的朋友也有重要的参考价值。

1、CSS的应用
http://www.weby.com.cn/view.asp?id=13

2、CSS Selectors,Properties,and Values 选择器 、属性、值
http://www.weby.com.cn/view.asp?id=14

3、CSS的color颜色
http://www.weby.com.cn/view.asp?id=15

4、CSS的Text 文本
http://www.weby.com.cn/view.asp?id=16

5、Margin和Padding
http://www.weby.com.cn/view.asp?id=17

补充:CSS盒模型(Box Model)问题详解
http://www.weby.com.cn/view.asp?id=18

6、CSS的Border边框
http://www.weby.com.cn/view.asp?id=19

7、CSS属性结合起来使用
http://www.weby.com.cn/view.asp?id=20

8、CSS的Class以及ID选择器
http://www.weby.com.cn/view.asp?id=21

9、CSS的Grouping and Nesting分组和嵌套
http://www.weby.com.cn/view.asp?id=22

10、CSS的Pseudo Classes 伪类
http://www.weby.com.cn/view.asp?id=23
11、CSS的属性缩写
http://www.weby.com.cn/view.asp?id=24

12、CSS的Background Images 背景图片
http://www.weby.com.cn/view.asp?id=25

13、CSS的display属性
http://www.weby.com.cn/view.asp?id=26

14、CSS网页布局Page Layout
http://www.weby.com.cn/view.asp?id=27

15、CSS的At-Rules@规则
http://www.weby.com.cn/view.asp?id=28

16、CSS的伪元素Pseudo Elements
http://www.weby.com.cn/view.asp?id=29

17、CSS的优先级特性Specificity 
http://www.weby.com.cn/view.asp?id=30
Global site tag (gtag.js) - Google Analytics