【前端】js原生动画及特效
文章平均质量分 67
简单的js原生动画及特效
溜溜的阿溜
一个进击的前端小菜鸟
展开
-
Javascript原生代码——动画封装:匀速、缓速及升级
在web网页设计中,经常要使用到动画(如轮播图、随滚动窗口移动的广告栏等等),封装动画会节省很多代码,也让结构更简单清晰。这里先封装了一个匀速移动的动画和一个缓速移动的动画(通过offsetLeft/offsetTop来左右上下移动),然后逐渐深入下去。匀速动画ele为要移动的盒子,target为目标位置(像素),spd为计数器的频率function animate1(el...原创 2018-07-09 21:41:16 · 908 阅读 · 1 评论 -
JS特效之旋转轮播图(升级版)
之前写了一个轮播图,是基于offset、匀速动画和定时器来切换图片,下面这个是基于多属性缓动动画框架、数组API(push,pop,unshift,shift)所做的旋转轮播图,界面看上去更有三维效果。(因为更改了透明度和层级)点击左右箭头,实现图片轮换。资源可以在下面网址下载https://download.csdn.net/download/cindy647/10537990...原创 2018-07-12 19:06:30 · 948 阅读 · 3 评论 -
JS特效之Scroll家族的四个网页界面实用案例(固定导航栏、两侧广告跟随、返回头部、楼层跳跃)
关于scroll的介绍和封装可以在另一篇博客里找到,这里介绍四个常用的基于scroll的小案例首先再说明其中用到的封装好的两个函数(scroll封装,缓动动画封装)function scroll() { // 开始封装自己的scrollTop if(window.pageYOffset !== undefined) { // ie9+ 高版本浏览器 //...原创 2018-07-12 18:07:09 · 1490 阅读 · 1 评论 -
JS特效之广告轮播图(带定时器)
轮播图是网页中常见的JS特效,最近学习实现了一个基础的轮播图(基于HTML+CSS+Javascript),目前感觉功能已经比较全面了,示例的效果图如下:基本的功能如下:1、每隔一段时间(可自由设置)图片自动轮换,循环播放2、右下角小图标根据显示的图片序号依次点亮(变黄色)3、鼠标移入图片内,显示左右两侧的<>图标,停止自动轮换,点击图片实现移动到上一张/下一张;...原创 2018-07-12 16:55:57 · 2162 阅读 · 0 评论