2020年8月22日
用js写一个简单的贪吃蛇小游戏
摘要： 一个用原生js写的贪吃蛇小游戏，贪吃蛇碰到自己身体游戏会结束 效果图： 代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Document</title> </head> <body> <button>按钮</butt 阅读全文
posted @ 2020-08-22 10:42 结发授长生 阅读(872) 评论(0) 推荐(0)
js简单实现烟花效果
摘要： 用js写的一个简单的烟花效果。 需要用到自己封装的move运动函数，在别的随笔里有封装好的，直接调用就行。 效果图： js代码： <script type="text/javascript"> function Fire(){ // 创建一个夜空 this.night = document.crea 阅读全文
posted @ 2020-08-22 10:37 结发授长生 阅读(3473) 评论(0) 推荐(0)
js写的打砖块小游戏
摘要： 效果图： 代码如下： html代码; <div id="wrap"></div> <div id="ball"></div> <div id="ward"></div> <div id="score">0分</div> <div id="gameover"> <p>总分:74</p> <span>确 阅读全文
posted @ 2020-08-22 10:29 结发授长生 阅读(334) 评论(0) 推荐(0)
2020年8月21日
天猫主页轮播图（js动态效果）
摘要： 效果如下：直接截了张图片，效果去天猫看，图片自己去天猫官网扣 html代码： <body> <div class="box"> <div class="box-1"> <ul> <li> <a href="#"><img src="images/banner1.png"></img></a> <h2 阅读全文
posted @ 2020-08-21 21:14 结发授长生 阅读(921) 评论(0) 推荐(1)
天猫首页天猫超市下的选项卡(加自动轮播效果)仿写（js加jquery实现动态效果）
摘要： 效果如下： 图片去天猫主页扣，就不上传了 html代码： <body> <div class="xuanxiangka"> <div class="tab-box"> <ul> <li class="current"> <img src="images/2.jpg" alt=""> <a href= 阅读全文
posted @ 2020-08-21 20:55 结发授长生 阅读(405) 评论(0) 推荐(1)
放大镜效果，用一张图做放大镜（用一张图完成一套图放大镜效果）[js加jquery]
摘要： 使用一张图片做出一套图片的效果，不需要在使用大中小三张图片来做放大镜效果，比较方便 效果如下： html代码： <div class="box"> <div class="middle"> <img src="" alt=""> <div class="shade"></div> </div> <d 阅读全文
posted @ 2020-08-21 20:01 结发授长生 阅读(386) 评论(0) 推荐(0)
2020年8月17日
仿天猫官网主页侧边栏导航效果（jQuery实现楼层滚动效果）
摘要： 使用jQuery，可以实现楼层滚动效果，以及滚动时导航栏背景色改变 效果图： html代码： <div id="loutinav"> <ul> <li style="background: red;line-height: 35px;"><span>导航</span> </li> <li class 阅读全文
posted @ 2020-08-17 20:24 结发授长生 阅读(422) 评论(0) 推荐(1)
node.js的一些个人笔记1（初体验node.1）
摘要： 1.node.js是什么?Node.js是一个可以让JavaScript运行在服务器端的平台。它是一个为实时Web应用开发而诞生的平台，它从诞生之初就充分考虑了在实时响应、超大规模数据要求下架构的可扩展性。这使得它摒弃了传统平台依靠多线程来实现高并发的设计思路，而采用了单线程、异步I/O、事件驱动式 阅读全文
posted @ 2020-08-17 20:12 结发授长生 阅读(357) 评论(0) 推荐(1)
2020年7月18日
淘宝商品放大镜效果一套图（大中小三张图）
摘要： 效果如下： 代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Document</title> </head> <style> .box{ width: 402px; height:500px; border:2px 阅读全文
posted @ 2020-07-18 11:03 结发授长生 阅读(410) 评论(0) 推荐(1)
小米官网首页轮播图
摘要： css样式： <style> *{ margin: 0; padding: 0; list-style: none; text-decoration: none; } .banner{ width: 1263px; height: 460px; position: relative; overflo 阅读全文
posted @ 2020-07-18 10:32 结发授长生 阅读(240) 评论(0) 推荐(1)
下一页