- 博客(18)
- 收藏
- 关注
RSS订阅翻译 仿百度智能提示搜索框
演示效果：代码： Document #main{ margin: 50px auto; width: 640px; font-size: 0; } #logo img{ height: 129px; width: 270px; padding: 0 185px;
2016-06-21 14:52:47
645
原创 简单的css实现二级导航（无插件、几十行代码）
演示如下：代码如下： Document * { margin:0; padding:0;}ul, li { list-style:none;}a { text-decoration:none;}.nav { border:2px solid #ccc; border-right:none;float:left; margin:100px 0 0 300p
2016-06-16 16:49:15
861
1
原创 简单的屏幕弹幕功能的实现（原创）
演示如下：代码如下： Document *{ margin: 0; padding: 0; } body{ overflow: hidden; } #main{ height: 670px; background-color: black; } #danmu_message{ position: absolute;
2016-06-08 17:22:21
1135
原创 用HTML5的canvas实现抽奖刮刮卡的效果（只需十几行代码）
演示如下： 初始状态： 单击鼠标刮完之后的状态：代码如下： 刮刮抽奖 #div1{ width: 120px; height: 40px; color: red; position: absolute; text-align: center; line-height: 40px; font-size: 18px
2016-06-07 12:49:46
4165
1
翻译 css实现简单的水平垂直居中
演示如下：代码如下：无标题文档.mydiv{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px; background-color: red; }
2016-06-03 14:33:47
367
原创 css3实现抽奖装盘效果
演示如下：代码如下： 无标题文档 #main{ display: block; padding:30px; } #triangle{ position: absolute; left: 78px; top: 20px; width: 0; height: 0; border-lef
2016-05-31 00:07:28
604
翻译 用HTML 5的WebSocket实现网络聊天室
演示效果如下：客户端具体代码如下：HTML5 websocket 网页聊天室 javascript phpbody,p{margin:0px; padding:0px; font-size:14px; color:#333; font-family:Arial, Helvetica, sans-serif;}#ltian,.rin{width:98%; ma
2016-05-28 21:44:17
6632
4
翻译 用HTML5Canvas实现璀璨星空
演示效果如下：演示地址如下：http://119.29.253.206/brilliantStars.html演示代码如下： * { margin: 0; padding: 0; } <canvas height="620" width="1360" id="canvas" style="position: absolute; he
2016-05-25 17:12:36
1209
翻译 HTML 幻灯片预览效果
本案列来源于慕课网。鼠标放在灰色条上，可以提前在上方预览到图片；当点击灰色条时，实现幻灯片的切换。演示图片如下：演示网页为：http://119.29.253.206/ppt/index.html具体代码如下：HTML： Document {{h2}} {{h3}}
2016-05-23 21:08:49
1789
原创 用javascript实现表格排序
初始的表格如图：当点击表头中的”力量“时，表格会根据力量值的大小，升序排练，如下图：当再次点击表头中的力量时，表格会根据力量值的大小，降序排列，如下图：点击其他的表头也能达到同样的效果。具体代码如下： 无标题文档 姓名力量敏捷智力 A172413 B152216 C191520 D201418
2016-05-18 12:13:25
503
原创 HTML 5实现图像走马灯效果
当单击上一页或下一页时，可以实现图像的走马灯效果，演示如下：具体代码如下： Document body{ background: white; } #first{ position: relative; top: 170p
2016-05-14 20:12:41
9079
翻译 CSS3 的text-shadow实现立体文字和燃烧文字
立体文字演示效果如下：代码如下：Document p{ text-align: center; background: #CCC; font-size: 40px; font-weight: bold; color: #D1D1D1; text-shadow: -2p
2016-05-12 18:32:40
2461
翻译 HTML5 共享进程
共享Worker能够为同源的多个页面所共享，这个特性可以用在多个页面间的数据同步或者标签页共享一个资源的情况。演示效果如下：代码如下：index.htmlDocument say Hi! function sayHI(){worker.port.postMessage({'cmd':'hi','ms
2016-05-09 23:11:39
444
原创 用javascript实现元胞自动机的生命游戏
演示效果如下：源代码如下：lifeGame #canvas1{ margin: 50px auto; display: block; }var canvas=document.getElementById('canvas1'); var context=canvas.getContext(
2016-05-07 12:06:23
1205
翻译 用HTML 5实现爱心小鱼的游戏
本游戏的示例来源于果壳网，用鼠标可以控制大鱼吃果实，然后用大鱼将果实喂养给小鱼。演示效果如下： HTML代码如下：tinyHeart JS代码如下：var can1=document.getElementById('canvas1');
2016-05-02 15:22:46
2516
原创 基于递归算法的XML文本格式的判断（javascript实现）
定义5个xml字符串： var str1=" b c " var str2=" b c " var str3=" b c " var str4=" b c " var str5=" b c "在isXml函数中测试 isXml(str1); //无输出 isXml(str2); // is
2016-04-27 18:15:30
437
原创 用Html 5的canvas及javascript实现贪吃蛇
演示如下：实现代码:无标题文档#Canvas{background-color:#F0DB98;margin: auto;padding: 0;display: block;} var canvas=document.getElementById("Canvas"); var cxt=canvas.getCon
2016-04-25 20:26:40
395
原创 按钮宽度和高度固定，字体大小根据字数自适应用的javascript实现
演示效果如下：其中按钮的高度固定为40px，按钮的宽度固定为60px，字体大小根据宽度自适应。具体代码如下：无标题文档 var maxHeight=40; //固定高度 var maxWidth=60;
2016-04-25 15:10:52
6269
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人