前端开发者| 前端开发概要设计 |
| 前端开发 搜索框的设计 |
| 前端开发是不是可以代替设计 |
作为一名前端开发人员，想要的大多都是，在开发过程中，看着自己制作的动画的炫酷以及困难的解决；开发结束后，自己的项目、成果可以被他人认可接受。人们浏览网页时，若一个网页动画效果丰富炫酷，性能良好，体验度良好，自然会受到吸引去打来浏览。吸引用户，自然少不了网页的布局优美、色彩搭配的恰当，更重要的是其中吸引人的炫酷动画效果。
在这里，我为大家提供几种常用的动画效果，虽然没有什么特别，不是很炫酷，但很常见也很便捷。
一、轮播图：
轮播图在网页中运用较广，经常使用于头部banner，使用于电商网站中，例如;淘宝、京东、天猫等购物平台都少不了。而轮播图有多种类型，这次就和大家说说其中的两款。轮播图的原理：点击上一张或下一张时，图片移动的距离为图片本身的宽度；点击图片下的原点导航时跳转到相应的图片位置。
1、一般的轮播图。这一类型的轮播图，在切换图片的过程中，图片会缓慢的滑动到达相应的位置，即可以看到图片到达相应位置的全过程。
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title></title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
img {
width: 520px;
}
div.box {
width: 520px;
height: 280px;
overflow: hidden;
margin: 100px auto;
position: relative;
}
ul.img {
top: 0px;
left: 0px;
width: 1000%;
position: absolute;
}
ul.img li {
float: left;
list-style: none;
}
ul.circle {
left: 50%;
bottom: 10px;
margin-left: -75px;
position: absolute;
}
ul.circle li {
width: 20px;
height: 20px;
float: left;
color: #666;
cursor: pointer;
margin: 0px 5px;
list-style: none;
text-align: center;
border-radius: 10px;
background: #e4e4e4;
font: normal 12px/20px ‘conslas’;
}
ul.arrow {
top: 50%;
width: 100%;
position: absolute;
margin-bottom: -25px;
}
ul.arrow li {
width: 35px;
height: 50px;
color: #666;
cursor: pointer;
list-style: none;
text-align: center;
background: #ccc;
font: 800 30px/50px ‘conslas’;
}
ul.arrow li.left {
float: left;
}
ul.arrow li.right {
float: right;
}
ul.circle li.current {
color: #fff;
background: red;
}
</style>
</head>
<body>
<div class=”box”>
<ul class=”img”>
<li><img src=”img/p1.jpg” alt=”” /></li>
<li><img src=”img/p2.jpg” alt=”” /></li>
<li><img src=”img/p3.jpg” alt=”” /></li>
<li><img src=”img/p4.jpg” alt=”” /></li>
<li><img src=”img/p5.jpg” alt=”” /></li>
</ul>
<ul class=”circle”></ul>
<ul class=”arrow”>
<li class=”left”><</li>
<li class=”right”>></li>
</ul>
</div>
<script>
var box = document.getElementsByTagName(‘div’)[0] //轮播图容器
var img = box.children[0] //图片容器
var circle = box.children[1] //小圆点容器
var arrow = box.children[2] //箭头容器
var left = arrow.children[0] //左箭头
var right = arrow.children[1] //右箭头
var index = 0 //当前显示的图片的索引
//需求分析：
//1、在最后一幅图后面添加第一幅图
var addImg = img.children[0].cloneNode(true)
img.appendChild(addImg)
//2、动态添加小圆点，同时点亮第一个
var circles = img.children //小圆点的个数即所有图片的个数集合
for (var i = 1; i < circles.length; i++) {
var circleLi = document.createElement(‘li’)
circleLi.innerHTML = i
circle.appendChild(circleLi)
}
var points = circle.children
light()
function light() {
for (var i = 0; i < points.length; i++) {
points[i].className = ”
if (index > 4) {
points[0].className = ‘current’
} else {
points[index].className = ‘current’
}
}
}
//3、点击小圆点，ul移动到相应的图片,同时点亮小圆点
for (var j = 0; j < points.length; j++) {
points[j].index = j
points[j].onclick = function() {
index = this.index
animate(img, -index * box.offsetWidth)
light()
}
}
//4、左右箭头切换图片
right.onclick = autoplay
function autoplay() {
index++
if (index > circles.length – 1) {
img.style.left = 0
index = 1
}
animate(img, -index * box.offsetWidth)
light()
}
left.onclick = function() {
index–
if (index < 0) {
img.style.left =
-(circles.length – 1) * box.offsetWidth + ‘px’
index = circles.length – 2
}
animate(img, -index * box.offsetWidth)
light()
}
//5、添加自动轮播功能
box.timer = setInterval(autoplay, 2000)
box.onmouseover = function() {
clearInterval(box.timer)
}
box.onmouseout = function() {
clearInterval(box.timer)
box.timer = setInterval(autoplay, 2000)
}
function animate(obj, target) {
clearInterval(obj.timer)
obj.timer = setInterval(function() {
var speed = obj.offsetLeft > target ? -20 : 20
if (Math.abs(obj.offsetLeft – target) > 20) {
obj.style.left = obj.offsetLeft + speed + ‘px’
} else {
obj.style.left = target + ‘px’
}
}, 20)
}
</script>
</body>
</html>
2、无缝轮播图。此类轮播图不会显示图片移动的全过程。
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title></title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
border: none;
list-style: none;
}
img {
width: 310px;
height: 220px;
}
.slider {
width: 310px;
height: 265px;
margin: 100px auto;
position: relative;
overflow: hidden;
cursor: pointer;
}
.slider-img {
width: 310px;
height: 220px;
}
ul {
list-style: none;
}
li {
position: absolute;
top: 0;
left: 0;
}
.slider-ctrl {
text-align: center;
padding-top: 10px;
}
.slider-ctrl-con {
display: inline-block;
width: 24px;
height: 24px;
background: url(‘img/icon.png’) no-repeat -24px -780px;
text-indent: -99999px;
margin: 0 5px;
cursor: pointer;
}
.slider-ctrl-con.current {
background-position: -24px -760px;
}
.prev,
.next {
position: absolute;
top: 40%;
width: 30px;
height: 35px;
background: url(‘img/icon.png’) no-repeat;
}
.prev {
left: 10px;
}
.next {
right: 10px;
background-position: 0 -44px;
}
</style>
</head>
<body>
<div class=”slider” id=”slider” style=”overflow: hidden;”>
<div class=”slider-img”>
<ul>
<li>
<a href=”#”><img src=”img/p1.jpg” alt=””/></a>
</li>
<li>
<a href=”#”><img src=”img/p2.jpg” alt=””/></a>
</li>
<li>
<a href=”#”><img src=”img/p3.jpg” alt=””/></a>
</li>
<li>
<a href=”#”><img src=”img/p4.jpg” alt=””/></a>
</li>
<li>
<a href=”#”><img src=”img/p5.jpg” alt=””/></a>
</li>
<li>
<a href=”#”><img src=”img/p6.jpg” alt=””/></a>
</li>
</ul>
</div>
<div class=”slider-ctrl”>
<span class=”prev” id=”prev”></span>
<span class=”next” id=”next”></span>
</div>
</div>
<script type=”text/javascript”>
window.onload = function() {
var slider = document.getElementById(‘slider’) //获取元素
var ul = document.getElementsByTagName(‘ul’)[0]
var lis = ul.children
var per = document.getElementById(‘prev’)
var next = document.getElementById(‘next’)
var imgWidth = slider.offsetWidth //获取图片的宽度作为缓动的距离
for (var i = 0; i < lis.length; i++) {
//添加span，用于点击跳转到指定图片
var span = document.createElement(‘span’)
span.innerHTML = i
span.className = ‘slider-ctrl-con ‘ //添加未选中状态
per.parentNode.insertBefore(span, per)
lis[i].style.left = imgWidth + ‘px’
}
var num = 0 //标记索引值
var span = document.getElementsByTagName(‘span’) //获取span元素
span[0].className += ‘ current’ //为第一个span标签状态设置为选中状态
lis[0].style.left = 0 + ‘px’ //为第一张图片设置显示位置
for (var k = 0; k < span.length; k++) {
span[k].onclick = function() {
//为所有span标签添加点击事件（包括左右按钮）
if (this.className == ‘prev’) {
//当点击的是向前播放按钮时
//要看上一张
animation(lis[num], imgWidth) //当前图片缓动到右边位置
num = –num < 0 ? lis.length – 1 : num //索引值设置为前一张图片的索引，当索引值小于0时则等于最后一张的索引
lis[num].style.left = -imgWidth + ‘px’ //将前一张图片瞬间移动到左侧
animation(lis[num], 0) //将移动到左侧的图片，缓动到显示位置
light() //点亮底部相应的span标签
} else if (this.className == ‘next’) {
//当点击的是向后播放按钮时
//要看下一张
autoplay() //按自动播放顺序播放
} else {
//获取当前被点击的盒子的索引值
var index = this.innerHTML
//中间：left = 0；左边：left = -imgWidth+“px”;右边：left = +imgWidth+”px“
//判断点击的span和当前的图片的索引，谁大谁小
if (index > num) {
//当点击索引值大于当前播放图片的索引值时
lis[index].style.left = imgWidth + ‘px’ //该索引值对应的图片瞬间移动到右侧
animation(lis[num], -imgWidth) //当前播放图片缓动到左侧
animation(lis[index], 0) //再缓动至当前播放位置
num = index //改变索引值
light() //点亮底部相应的span标签
}
if (index < num) {
lis[index].style.left = -imgWidth + ‘px’
animation(lis[num], imgWidth)
animation(lis[index], 0)
num = index
light()
}
}
}
}
function animation(obj, target) {
//缓动
clearInterval(obj.timer) //为避免多个定时器同时运行带来的bug，在用定时器之前先清理定时器
obj.timer = setInterval(function() {
var speed = (target – obj.offsetLeft) / 10
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed) //为确保能搞达到最终目标值，给speed取整
obj.style.left = obj.offsetLeft + speed + ‘px’ //赋值给当前元素
if (target == obj.offsetLeft) {
//属性达到目标值时，清理定时器
clearInterval(obj.timer)
}
}, 20)
}
slider.timer = setInterval(function() {
//当前无操作时自动播放
autoplay()
}, 2000)
slider.onmouseover = function() {
//鼠标进入图片区域停止自动播放
clearInterval(slider.timer)
}
slider.onmouseout = function() {
//鼠标离开图片区域恢复自动播放
clearInterval(slider.timer)
slider.timer = setInterval(function() {
autoplay()
}, 2000)
}
function light() {
for (var j = 0; j < span.length – 2; j++) {
span[j].className = ‘slider-ctrl-con ‘
}
span[num].className += ‘ current’
}
function autoplay() {
//封装自动播放函数
animation(lis[num], -imgWidth)
num = ++num > lis.length – 1 ? 0 : num
lis[num].style.left = imgWidth + ‘px’
animation(lis[num], 0)
light()
}
}
</script>
</body>
</html>
二、旋转木马。顾名思义，旋转木马的动画效果和游乐园中旋转木马类似，因此而得名。旋转木马的原理和轮播图其实差不多，只是旋转木马需要设置每一张图片的z-index属性，且每一张的z-index的设置精准、满意需要一定的经验。
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 1200px;
margin: 10px auto;
}
.slider {
height: 500px;
position: relative;
}
.slider li {
list-style: none;
position: absolute;
left: 200px;
top: 0;
}
.slider li img {
width: 100%;
display: block;
}
.arrow {
opacity: 1;
}
.prev,
.next {
width: 76px;
height: 112px;
position: absolute;
top: 50%;
margin-top: -56px;
background: url(img/prev.png) no-repeat;
z-index: 99;
}
.next {
right: 0;
background: url(‘img/next.png’) no-repeat;
}
.prev {
left: 0;
}
</style>
</head>
<body>
<div class=”wrap”>
<div class=”slider”>
<ul>
<li><img src=”img/1.jpg” /></li>
<li><img src=”img/2.png” /></li>
<li><img src=”img/3.jpg” /></li>
<li><img src=”img/4.jpg” /></li>
<li><img src=”img/5.jpg” /></li>
</ul>
<div class=”arrow”>
<div class=”prev” id=”prev”></div>
<div class=”next” id=”next”></div>
</div>
</div>
</div>
<script>
var json = [
{
// 0
width: 400,
top: 70,
left: 50,
opacity: 0.2,
zIndex: 2,
},
{
// 1
width: 600,
top: 120,
left: 0,
opacity: 0.8,
zIndex: 3,
},
{
// 2
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4,
},
{
// 3
width: 600,
top: 120,
left: 600,
opacity: 0.8,
zIndex: 3,
},
{
//4
width: 400,
top: 70,
left: 750,
opacity: 0.2,
zIndex: 2,
},
]
//根据json的内容把图片缓动到相应位置，同时缓动
var liArr = document.getElementsByTagName(‘li’)
var next = document.getElementById(‘next’)
var prev = document.getElementById(‘prev’)
function move() {
for (var i = 0; i < liArr.length; i++) {
animation(liArr[i], json[i])
}
}
move()
next.onclick = function() {
var last = json.pop()
json.unshift(last)
move()
}
prev.onclick = function() {
var first = json.shift()
json.push(first)
move()
}
function animation(obj, json, fn) {
clearInterval(obj.timer)
obj.timer = setInterval(function() {
var flag = true
//json里面有几个属性就要执行几次
var target = 0 //记录目标位置
var leader = 0 //记录当前位置
var speed = 0 //记录速度
for (var key in json) {
if (key == ‘opacity’) {
target = Math.round(json[‘opacity’] * 100) //0-100
leader = getStyle(obj, ‘opacity’) * 100 //0-100
} else {
target = parseInt(json[key])
leader = parseInt(getStyle(obj, key))
}
speed = (target – leader) / 10
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
leader = leader + speed //0-100
if (key == ‘opacity’) {
obj.style.opacity = leader / 100
obj.style.filter = ‘alpha(opacity=’ + leader + ‘)’
} else if (key == ‘zIndex’) {
obj.style.zIndex = json[‘zIndex’]
} else {
obj.style[key] = leader + ‘px’
}
if (leader != target) {
flag = false
}
}
if (flag) {
clearInterval(obj.timer)
if (fn) {
fn()
}
}
}, 20)
}
function getStyle(obj, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj, null)[attr]
} else {
return obj.currentStyle[attr]
}
}
</script>
</body>
</html>
三、楼层跳跃。该动画效果也大多使用在电商网站，当点击到相应的标签时就会跳到该位置的内容。例如：当点击淘宝旁的楼层跳跃中的美妆/女装时就会跳到美妆/女装模块。
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title></title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
ul.nav {
position: fixed;
top: 80px;
left: 20px;
}
ul.nav li {
width: 70px;
height: 40px;
color: #fff;
cursor: pointer;
background: #ccc;
text-align: center;
line-height: 40px;
list-style: none;
margin-top: 10px;
}
ul.nav .current {
background: red;
}
ul.content {
height: 500%;
}
ul.content li {
height: 20%;
text-align: center;
font: 100px/200px ‘微软雅黑’;
}
</style>
</head>
<body>
<ul class=”nav”>
<li>享品质</li>
<li>服饰美妆</li>
<li>家电手机</li>
<li>电脑数码</li>
<li>3C运动</li>
</ul>
<ul class=”content”>
<li>享品质</li>
<li>服饰美妆</li>
<li>家电手机</li>
<li>电脑数码</li>
<li>3C运动</li>
</ul>
<script type=”text/javascript”>
var color = [
‘skyblue’,
‘yellowgreen’,
‘pink’,
‘cornflowerblue’,
‘ #87CEEB’,
]
var navlis = document.getElementsByTagName(‘ul’)[0].children
var contentlis = document.getElementsByTagName(‘ul’)[1].children
for (var i = 0; i < color.length; i++) {
contentlis[i].style.background = color[i]
}
for (var i = 0; i < navlis.length; i++) {
navlis[i].index = i
navlis[i].onclick = function() {
for (var j = 0; j < navlis.length; j++) {
navlis[j].className = ”
}
this.className = ‘current’
var yPos = this.index * document.body.offsetHeight
clearInterval(window.timer)
window.timer = setInterval(function() {
var speed = (yPos – scroll().top) / 10
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
window.scrollTo(0, scroll().top + speed)
if (scroll().top == yPos) {
clearInterval(Window.timer)
}
}, 30)
}
}
window.onscroll = function() {
var num = scroll().top / document.body.offsetHeight
num = Math.ceil(num * 2) / 2
if (parseInt(num) != num) {
num = num – 0.5
}
for (var j = 0; j < navlis.length; j++) {
navlis[j].className = ”
}
navlis[num].className = ‘current’
}
function scroll() {
return {
top:
document.body.scrollTop +
document.documentElement.scrollTop,
left:
document.body.scrollLeft +
document.documentElement.scrollLeft,
}
}
</script>
</body>
</html>
四、返回顶部。返回顶部严格来说并不算真正意义上的动画效果，通过锚点就可以实现返回顶部的效果，但此返回顶部效果是滚动条缓慢的回到顶部，这个动画效果几乎在每个网页都可以看到。
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title></title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 600%;
}
div {
position: fixed;
right: 30px;
bottom: 20px;
display: none;
}
</style>
</head>
<body>
<div><img src=”Top.jpg” /></div>
<script type=”text/javascript”>
var div = document.getElementsByTagName(‘div’)[0]
var img = div.children[0]
window.onscroll = function() {
if (scroll().top > 100) {
div.style.display = ‘block’
} else {
div.style.display = ‘none’
}
}
img.onclick = function() {
clearInterval(img.timer)
img.timer = setInterval(function() {
var speed = (0 – scroll().top) / 10
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
window.scrollTo(0, scroll().top + speed)
if (scroll().top == 0) {
clearInterval(img.timer)
}
}, 30)
}
function scroll() {
return {
top:
document.documentElement.scrollTop +
document.body.scrollTop,
left:
document.documentElement.scrollLeft +
document.body.scrollLeft,
}
}
</script>
</body>
</html>
常见的js动画效果还有许多更炫酷的，以上皆是一些比较普通的，但无论多炫酷的动画效果都是以以上的动画效果的原理为基础，以上动画虽然普通但性能方面没有太大问题。
| 产品设计 前端开发 |
| 前端开发 室内设计 |
| web前端开发毕业设计题目 |
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册