[置顶] js实现轮播图动画(更新"旋转木马")
摘要： 在网页浏览中，可以看到轮播图是无处不在的，这是一个前端工程最基本的技巧。首先看看几个网页的呈现的效果。 QQ音乐： 网易云音乐： 天猫： 接下来将从简到难总结几种实现轮播图的方法。 1、样式一：鼠标滑入滑出实现图片切换 当鼠标滑入到小圆点上时，显示当前对应的图片，鼠标移出时回到默认的图片。如果点击了 阅读全文
posted @ 2017-08-16 16:35 阿详 阅读(1698) 评论(0) 推荐(4) 编辑
[置顶] 封装简单动画函数-由简到完善
摘要： 在学习javascript动画效果的过程，动画函数一定是少不了的，所以在初级学习的过程中，封装好一个动画函数可以直接调用能够帮我们省下更多的学习时间。下面是我一步步完善动画函数的过程。 1、简单的右移函数：鼠标点击按钮，box向右移动一定的位置 实现效果： 2、封装同时解决左右移动的动画函数 上面的 阅读全文
posted @ 2017-08-16 13:55 阿详 阅读(252) 评论(0) 推荐(0) 编辑
[置顶] 纯Css绘制三角形箭头三种方法
摘要： 在制作网页的过程中少不了绘制类似图片的三角形箭头效果，虽然工程量不大，但是确实麻烦。在学习的过程中，总结了以下三种方法，以及相关的例子。 一、三种绘制三角形箭头方法 1、方法一：利用overflow:hidden;属性。 2、方法二：使用after(before)属性定位 利用border画三角。 阅读全文
posted @ 2017-08-11 16:30 阿详 阅读(5772) 评论(1) 推荐(1) 编辑
2017年8月28日
JS实现图片''推拉门''效果
摘要： ''推拉门''动效也可以称作"手风琴"效果，大多数效果实现的思路基本是一样的，下面介绍两种方法，一种是通过改变图片的偏移位置实现移动，另一种是通过遍历背景图片后改变图片的宽度实现变换。 推拉门收缩状态.png "推拉门"展开状态.png "推拉门"实现方法一：改变图片宽度 jQuery实现 "推拉门 阅读全文
posted @ 2017-08-28 12:43 阿详 阅读(1629) 评论(1) 推荐(0) 编辑