VVVGavin-CSDN博客

原创留言板

留言板项目的重点有以下几个方面：第一：在点击事件中获取删除按钮所在的li节点var deleteLi =this.parentNode.parentNode;第二：每次添加的新留言,插入到第一条：ul.insertBefore(li,ul.children[0]);第三：每次添加节点执行tween.js动画，每次删除节点执行tween.js动画；本篇博客代码简练，思路清晰，希望大家能喜欢！

2017-07-28 18:03:32 647

原创轮播图swiper的使用

一、首先要引入swiper.min.css和swiper.min.js两个库；二、接着在在最外层标签内部加入swiper-container类，在内层加入swiper-wrapper类，在图片标签上加入swiper-slide类，如下所示：三、在js中加入以下代码块，另外查看swiper库，找到对应的功能按需求把自己需要的部分添加到js中或者Html中，实现所需

2017-07-23 17:05:19 1293

移动端触摸事件依赖于硬件的支持，需要在手机上执行。触摸事件主要包含的有四个分别是：1，触摸开始事件touchstart； 2. touchmove触摸移动事件 3.tauchend触摸结束事件 4. touchcancel触摸取消事件。这篇博客主要实现了触摸缩小炮塔，触摸随指尖移动灯塔，触摸结束灯塔回到原来的位置。给对象添加触摸事件，需要添加事件监听效果，取消事件冒泡。主要的代码实现过程分享给大家了，希望你们能喜欢，谢谢大家支持。

2017-07-23 16:47:24 607

原创横竖屏播放视频

横竖屏操作依赖于手机硬件的支持，通过对window添加onorientationchange事件，获取到当前屏幕的方向，从而执行对应的js逻辑。这篇博客给大家介绍了横屏状态下手机播放视频，纵屏状态下全屏播放视频。逻辑很简单，主要是掌握window的这一个事件。希望对大家有所帮助，感谢大家的支持！

2017-07-23 16:35:46 951

原创微信摇一摇

微信摇一摇使用js生成节点，纯原生程序。摇一摇功能需要硬件支持，手机中的两次陀螺仪加速距离差值达到某一值认为是晃动事件。实现摇一摇功能的重点在于：判断是否发生了晃动事件，发生了晃动事件，则执行创建定时器，在定时器里面添加img节点，延时一段时间清除定时器。这个功能实现的过程很简单，主要是要掌握晃动事件的产生和定时器里面添加img节点。

2017-07-23 16:22:38 684

原创碰撞练习

模拟飞翔的小鸟游戏，当小鸟与两根柱子相撞时，柱子变为红色，柱子的高度是随机的，这个练习重点是处理小鸟和柱子的碰撞问题，分为小鸟碰撞上面的柱子和下面的柱子两部分。这篇博客还可以把碰撞问题封装成了一个函数，当调用碰撞的函数，只需要传入两个对象参数就可以实现碰撞的检测了。原理很简单，主要是处理逻辑方面的问题，希望大家能多多支持，谢谢大家。

2017-07-23 16:06:45 394

原创自定义滚轮事件

看色平常的滚动条是怎么实现的？这篇博客给你写出了实现过程，项目的难点是找准滑块的高度和滑块可滑动的距离与内容部分滑动的距离和内容部分的总高度之间的比例关系。代码其实很简单，主要是练习自己的逻辑思维和找准比例的问题。在工作中可能会遇到一些比例问题，大小问题，这都需要我们细心观察，培养自己的逻辑思考能力。功夫在于平时，你平时养成了一个好的习惯，以后的项目也会容易一点。

2017-07-23 15:50:12 519

原创放大镜

利用鼠标的位置坐标，设置一个滑块跟随鼠标移动，鼠标移动产生边界问题，处理临界最大值，最小值的问题，计算出滑块移动的距离，找到放大部分的移动的距离。放大部分移动的距离，可以用两种方式实现。第一种方式：使用鼠标滚动实现；第二种方式：使用定位实现；图片要清除3px的间隙，用vertical-align:bottom实现；

2017-07-23 15:31:08 262

原创小球随鼠标移动

鼠标移动事件，传递鼠标的坐标。利用原生写的，项目的难点在于处理小球的位置传递，获取鼠标的位置。利用JS做的需要考虑鼠标的坐标，创建节点存储的数组，节点的传递和第一个节点的删除，和最后一个节点的删除，以及坐标位置的传递。这个项目主要练习了鼠标的事件和一些逻辑性的知识点，这篇博客采用了两种方法，两种思维模式，大家喜欢的话可以试着练习下，希望大家能多多支持。

2017-07-23 15:05:20 683

原创找徐峥游戏

找徐峥这个游戏的难点在于创建节点，找到徐峥，添加点击事件。在创建图片函数里嵌套添加点击事件，在点击事件函数里面添加创建图片函数，整个代码块都是用原生做的，比较好理解。整个游戏是用封装函数写的，一个模块实现一个功能，结构清晰。我把这个游戏的图片素材上传了，代码也分享给在博客里面了，大家有喜欢的可以点个赞，希望你们能喜欢我的博客。

2017-07-23 14:39:14 518

原创锅打灰太狼游戏

锅打灰太狼这个游戏，要处理游戏界面的Html布局,游戏界面的Css样式，以及Js交互部分。主要处理的问题是定时器的开关处理，狼坑位置的选取，大狼小狼上升和下降的函数，打灰太狼加分，打小灰灰减分，重新开始，隐藏开始按钮，重新启动定时器。这个游戏看起来简单，但是整个代码块逻辑性比较强，比较考验大家的逻辑思想，很值得初学者去练习。通过这个小练习，你不仅能熟悉学过的代码，还可以提高自己的分析问题和逻辑处理方式，我把自己的这个游戏实现的代码分享给大家,图片太多了没有上传完，你们可以找下这个游戏素材图片，希望你们能喜欢

2017-07-23 11:29:02 884

WgGaopeng的博客