博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
常见JS动画效果
阅读量:6684 次
发布时间:2019-06-25

本文共 2476 字,大约阅读时间需要 8 分钟。

hot3.png

在这里,我为大家提供几种常用的动画效果,虽然没有什么特别,不是很炫酷,但很常见也很便捷。

一、轮播图: 

轮播图在网页中运用较广,经常使用于头部banner,使用于电商网站中,例如;淘宝、京东、天猫等购物平台都少不了。而轮播图有多种类型,这次就和大家说说其中的两款。轮播图的原理:点击上一张或下一张时,图片移动的距离为图片本身的宽度;点击图片下的原点导航时跳转到相应的图片位置。 

1、一般的轮播图。这一类型的轮播图,在切换图片的过程中,图片会缓慢的滑动到达相应的位置,即可以看到图片到达相应位置的全过程。

            
  • <
  • >

2、无缝轮播图。此类轮播图不会显示图片移动的全过程。

            

二、旋转木马。顾名思义,旋转木马的动画效果和游乐园中旋转木马类似,因此而得名。旋转木马的原理和轮播图其实差不多,只是旋转木马需要设置每一张图片的z-index属性,且每一张的z-index的设置精准、满意需要一定的经验。

            

三、楼层跳跃。该动画效果也大多使用在电商网站,当点击到相应的标签时就会跳到该位置的内容。例如:当点击淘宝旁的楼层跳跃中的美妆/女装时就会跳到美妆/女装模块。

            
  • 享品质
  • 服饰美妆
  • 家电手机
  • 电脑数码
  • 3C运动

四、返回顶部。返回顶部严格来说并不算真正意义上的动画效果,通过锚点就可以实现返回顶部的效果,但此返回顶部效果是滚动条缓慢的回到顶部,这个动画效果几乎在每个网页都可以看到。

            

常见的JS动画效果还有许多更炫酷的,以上皆是一些比较普通的,但无论多炫酷的动画效果都是以以上的动画效果的原理为基础,以上动画虽然普通但性能方面没有太大问题。

转载于:https://my.oschina.net/sichunchen/blog/1544549

你可能感兴趣的文章
HDU2199:Can you solve this equation?(数学 + 二分)
查看>>
转发萌新人鱼博客-Java面向对象-面向对象编程之基本概念
查看>>
win系统下nodejs安装及环境配置
查看>>
yii2使用 db log
查看>>
在语言中的运算符中,处于同一优先级别的运算符还分优先次序吗?
查看>>
[MSSQL]ROW_NUMBER函数
查看>>
NodeJS 安装
查看>>
MongoDB学习笔记~地图坐标的支持与附近点的查找
查看>>
编程语言的概念
查看>>
App_Offline.htm 一个静态页面实现整站维护时统一页面
查看>>
create-react-app部署到GitHub Pages时报错:Failed to get remote。origin.url
查看>>
TypeScript入门知识五(面向对象特性二)
查看>>
TextBox字符串转换为数字类型
查看>>
HTML5的可视化开发工具Maqetta Designer
查看>>
leetcode 29. Divide Two Integers
查看>>
axis调用webservice客户端开发
查看>>
Activiti5第八弹,ProcessEngineConfiguration和ProcessEngine
查看>>
细说C#多线程那些事 - 线程同步和多线程优先级
查看>>
linux下tomcat服务器的启动和关闭以及查看实时打印日志
查看>>
WinForm 数据库无限填充树目录 treeView
查看>>