Animatron是国外一款在线HTML5动画制作工具，网址：www.animatron.com 当然，想使用的话，是需要FQ的。
用animatron制作好的动画是可以下载为代码和GIF的，这时候付费玩家自然又是充满优越感的，因为付费玩家可以下载普通玩家下不到的部分。
下载下来的文件夹[……]
在HTML中禁止文字的复制
很简单，只需在<body>中添加如下代码：
|
1 2 3 4 5 6 7 |
<body oncontextmenu='return false' ondragstart='return false' onselectstart='return false' onselect='document.selection.empty()' oncopy='document.selection.empty()' onbeforecopy='return false' onmouseup='document.selection.empty()'> |
JS返回上一页
<button onclick=”javascript:history.go(-1);”>返回上一页</button>
<button onclick=”javascript:history.back(-1);”>返回上一页</button>[……]
当一个页面出现多个checkbox全选时的处理
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
HTML： <input type="checkbox" onclick="boxOnclick(this,'some1')">全选一 <input type="checkbox" onclick="boxOnclick(this,'some2')">全选二 <input type="checkbox" onclick="boxOnclick(this,'some3')">全选三 <input type="checkbox" class="some1">全选一的子集 <input type="checkbox" class="some2">全选二的子集 <input type="checkbox" class="some3">全选三的子集 JS： function boxOnclick(obj, someNum) { if (obj.checked) { $("." + someNum).each(function () { this.checked = true; }); } else { $("." + someNum).each(function () { this.checked = false; }); } } |
JS获取浏览器高度 并赋值给类
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 如果你需要给某个div设置全屏的话，可以用下面的jQuery来获取设备高度，然后赋值给类。 $(window).load(function () { var maxHeight = 0; if (document.documentElement.clientHeight > maxHeight) { maxHeight = document.documentElement.clientHeight; } $('.you-class').css("height", maxHeight) }); |
点击按钮对两个div的隐藏与显示进行切换
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
HTML： <button type="button" id="showHidden">点击切换div的隐藏与显示</button> <div id="div1">请叫我第一层</div> <div id="div2">请叫我第二层</div> JS: <script type='text/javascript'> function show_hidden(obj) { if(obj.style.diaplay == 'block') { obj.style.display = 'none'; } else { obj.style.display = 'block'; } } var sh = document.getElementById("showHidden"); sh.click = function() { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); show_hidden(div1); show_hidden(div2); return false; } </script> 示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <button type="button" id="showHidden">点击切换div的隐藏与显示</button> <div id="div1" style="display:block">请叫我第一层</div> <div id="div2" style="display:none">请叫我第二层</div> <script type='text/javascript'> function show_hidden(obj) { if(obj.style.display == 'block') { obj.style.display = 'none'; } else { obj.style.display = 'block'; } } var sh = document.getElementById("showHidden"); sh.onclick = function() { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); show_hidden(div1); show_hidden(div2); return false; } </script> </body> </html> |
隐藏 < input type="file" > 实现点击div或图片打开文件选择路径
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<strong>HTML：</strong> <input type="file" style="display:none" id="addfile-btn"> <div onclick="addfile()">点击上传图片</div> <strong>JS:</strong> <script> function addfile() { document.getElementById("addfile-btn").click(); } </scrip> <strong>如果一个页面需要多个这种事件的话，显然用ID是不太好的，那么就可以通过jQuery的prev来实现同级class查找，以此实现上传控件的调用。</strong> <strong>HTML：</strong> <input type="file" style="display:none" class="addfile-btn"> <div class="upload">点击上传图片1</div> <div class="upload">点击上传图片2</div> <strong>JS:</strong> <script> $(".upload").bind('click', function() { $(this).prev(".addfile-btn").click(); }); </script> |
CSS3混合模式background-blend-mode
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<strong>注意：background属性中的背景图片和颜色混合，只能在一个background属性中。</strong> 属性值： background-blend-mode: normal; //正常 background-blend-mode: multiply; //正片叠底 background-blend-mode: screen; //滤色 background-blend-mode: overlay; //叠加 background-blend-mode: darken; //变暗 background-blend-mode: lighten; //变亮 background-blend-mode: color-dodge; //颜色减淡 background-blend-mode: color-burn; //颜色加深 background-blend-mode: hard-light; //强光 background-blend-mode: soft-light; //柔光 background-blend-mode: difference; //差值 background-blend-mode: exclusion; //排除 background-blend-mode: hue; //色相 background-blend-mode: saturation; //饱和度 background-blend-mode: color; //颜色 background-blend-mode: luminosity; //亮度 background-blend-mode: initial; //初始 background-blend-mode: inherit; //继承 background-blend-mode: unset; //复原 |
实现笛卡尔心形线的重复循环绘制
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
HTML部分: 1.<a onclick="logoClick()"></a> 2.<div id="canvasZone"> <canvas id="myCanvas"></canvas> </div> CSS部分： #canvasZone { width: 100%; height: 100%; text-align: center; padding-top: 20px; margin-left: -35px; } #myCanvas { height: 300px; width: auto; } JS部分： |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
var arr = [];//保存所有的XY坐标，只为验证。实际程序中可删除。 var r = 4; var radian;//弧度 var i; var radianDecrement;//弧度增量 var time = 15;//每个点之间的时间间隔 var intervalId; var num = 618;//分割为 618 个点 var startRadian = Math.PI; var ctx; function logoClick () { startAnimation(); window.setInterval("lisner()", 1);//监听事件，监听是否画所有的点 } function lisner () { if (i >= num) {//判断点是否画完 i = 0;//当所有的点画完即进行初始化 //清空画布("#canvasZone").empty(); // 清空画布("#canvasZone").append("<canvas id=\"myCanvas\"></canvas>"); // 重新建立画布并开始进行内容绘制 ("#canvasZone").empty(); startAnimation(); } } function startAnimation () { ctx = document.getElementById("myCanvas").getContext("2d"); //让画布撑满整个屏幕，-20是滚动条的位置，需留出。如滚动条出现则会挤压画布。 WINDOW_HEIGHT = document.documentElement.clientHeight - 20; WINDOW_WIDTH = document.documentElement.clientWidth - 20; ctx.width = WINDOW_WIDTH; ctx.heigh = WINDOW_HEIGHT; drawHeart(); } function drawHeart () { ctx.strokeStyle = "red"; ctx.lineWidth = 1;//设置线的宽度 radian = startRadian;//弧度设为初始弧度 radianDecrement = Math.PI / num * 2; ctx.moveTo(getX(radian), getY(radian));//移动到初始点 i = 0; intervalId = setInterval("printHeart()", time); } //x = 16 sin^3 t, y = (13 cos t - 5 cos 2t - 2 cos 3t - cos 4t) function printHeart () { radian += radianDecrement; ctx.lineTo(getX(radian), getY(radian));//在旧点和新点之间连线 //arr.push("X:" + getX(radian) + "<br/>Y:" + getY(radian) + "<br/>"); i++; ctx.stroke();//画线 if (i >= num) { clearInterval(intervalId); //document.getElementById("bs").innerHTML = arr.join("");//打印所有的XY坐标点。 } } function getX (t) {//由弧度得到 X 坐标 return 100 + r * (16 * Math.pow(Math.sin(t), 3)); } function getY (t) {//由弧度得到 Y 坐标 return 50 - r * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)); } |
代码实现导航栏分割线
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
无需背景图片就可以实现导航栏分割线，颜色自定，线段虚实自定。 .nav1{ width:auto; height:50px; text-align:center; margin:13px auto 0; } .nav1 a{ display: inline-block; text-decoration:none; } .nav1 a:hover{ color:#09109e; border:6px none #fff; font-weight:bold; } .nav1 li{ position:relative; } /*制作导航分隔线效果*/ .nav1 li::before, .nav1 li::after{ content:""; position:absolute; top:-5px; height: 40px; width: 1px; } .nav1 li::after{ right: 0; background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba(255,255,255,0)); background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba (255,255,255,0)); background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba (255,255,255,0)); background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,.2) 50%, rgba (255,255,255,0)); } .nav1 li::before{ left: 0; background: -moz-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9); background: -webkit-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9); background: -o-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9); background: -ms-linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9); background: linear-gradient(top, #2580d9, #c4dff5, #2580d9, #c4dff5, #2580d9,#c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9, #c4dff5,#2580d9); } /*删除导航第一个和最后一个分隔线*/ .nav1 li:first-child::before{ display: none; } .nav1 li:last-child::after{ display: none; } |