摘要： 关于swiper图片切换有很多类型，我就不一一介绍了，可以直接到官网查询，今天来写一个适配于页面正中间的图片切换，也同时适配于任何图片的大小（也就是这个图片切换不用限制图片的本身大小，特别是移动端动态获取的图片有可能大小不一致），所以无论任何图片若是都想让其一直处于移动页面的正中间的话，那么就要获取 阅读全文

摘要： 昨天把多组图片抖动效果实现了，但是有一个问题就是关于快速多次移动到图片上的时候会出现移动事件结束之后图片不在原来位置。就像下图所示： 这个问题的关键是：获取的位置都是移动事件之后重新刷新的位置，所以又去加抖动频率，重新又实现一次抖动效果，以便于会有图片最后出现上图的问题了。解决这个关键就是要做个判断 阅读全文

摘要： 昨天提到了单个图片的抖动效果，那么今天来写一下多组图片实现抖动效果的封装，这种效果也许在日常的项目中会用到，简单封装一下，就不用每次都写差不多一样的代码了，好的来看html和css的布局，其实很简单就是两张图片： js代码如下： 好了，就是这样了，我写的比较啰嗦，也是希望看的比较明白，这只是两张图片 阅读全文

摘要： 今天来写一个关于图片抖动的效果，需求是：点击图片，让其抖动几下停止（类似于苹果手机填错密码之后会抖一下的效果），其实想要实现这个效果，原理就是，点击之后，让其左移动下然后右移动一下（每移动一下减几像素知道减到0），然后将其放入定时器内，让其慢慢自动停下来。来看代码布局： 接下来就是js的实现： 这样 阅读全文

摘要： 今天写一个简单的小例子，需求：页面有多个div，点击屏幕，div有顺序的依次下来。 来看js代码： 效果图如下： 好了，今天就这样！ 阅读全文

摘要： 今天还是来说昨天的小例子，昨天实现的效果就是点击按钮“向前”即往前相反则往后，那么需要细化的几个问题就是：代码可以简化以及可以用一个变量来控制方向直接来看js： 这是昨天的例子简化之后的代码，接下来看看怎么添加回调函数，那么昨天的布局就要稍微改动一下，用一个按钮来控制： 那么js代码是： 这个例子是 阅读全文

摘要： 昨天的例子是针对只有单个函数运行的结果，但是实际中可能会有多组函数这样同时进行，那么这个时候就要对函数进行封装传参，来实现效果了。就还拿昨天的例子来说吧，昨天写的例子实现的效果是点击按钮，让div向前移动，那么今天就扩展一下，点击按钮让div向后移动，想要实现这个效果，就必须要传参了，来看代码： 那 阅读全文

摘要： 今天简单写一个小案例：点击按钮，让div“走”起来。主要是为了说明给定时器设定开关时需要注意的几个问题。需求是：当点击按钮，让div向右一直移动，当移动到500像素时，停下来。好了那么简单的布局代码看一下： 那么简单的js效果是这样的： 这里需要注意的几个问题是： 第一，就是获取div的样式一定要用 阅读全文

摘要： 今天实现一个很简单的下拉菜单的小实例，也就是鼠标移入菜单，它的子菜单出现并延迟消失。大概效果如下图： 来看下布局： 关于css代码： js如下： 以上例子总结一下三点： 1、首先看布局，主菜单div没有包含子菜单，这样的话不同于被包含的关系，扩展性应该会强一些； 2、鼠标移出事件开启时，并没有让子菜 阅读全文

摘要： 之前写过一个图片切换的实例，当时只是没有加定时器，今天加上定时器，让其自动播放，好的来看代码： css代码： html代码： 接下来就是js代码： 注意：加定时器这一部分代码标粗了，为了看的更加清楚，特别要注意的小细节就是我注释里的内容：事件调用不能加括号，函数名称加括号就等于函数返回的值，若你函数 阅读全文