javaScript攻克轮播图之阿里云动画案例

今天闲来没事做看了一样阿里云的网站,发现了一个很好玩的东西,起初以为是gif图,看了下控制台之后发现是一个javaScipt的动画效果,于是抱着探索的精神尝试着去模仿了一下,结果出乎意料的容易,开心之余将方法分享给所有人.(因为本人不会发动图,所以具体效果可以去原网站了解),图片可以在原网站控制台获取"TB1ceKWLXXXXXaEapXXXXXXXXXX-150-9000.jpg"是其中一个

阿里云页面截取静态图片:
javaScript攻克轮播图之阿里云动画案例
思路:
1.准备工作:
(1)准备一个div,设置id,基本样式

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
   	 #dv2{
        margin: 100px auto;
        width: 150px;
        height: 150px;
        background: url(TB1ceKWLXXXXXaEapXXXXXXXXXX-150-9000.jpg) 			     no-repeat center center;
        background-position-x: 0px;
        background-position-y: 0px;
        border: 1px solid black;
    }

</style>
</head>
<body>
<div id="dv2"></div>
<script src="common.js"></script>
<script>

</script>
</body>
</html>

(2)封装常用函数

引用 src=“common.js”
//封装
function my$(id) {
return document.getElementById(id);
}

准备工作完成后的页面
javaScript攻克轮播图之阿里云动画案例
2.图片匀速动画函数封装

function animateYun(element, json, fn) {
clearInterval(element.timeId);
element.timeId = setInterval(function () {
var flag = true;
//遍历对象中的每个属性
for (var attr in json)
//获取当前元素的属性
var current = parseInt(getStyle(element, attr));
var target = json[attr];
var step = 150;
step = current < target ? step : -step;
//移动后的值
current += step;
element.style[attr] = current + “px”;
if (current != target) {
flag = false;
}
}
if (flag) {
clearInterval(element.timeId);
if (fn) {
fn();
}
}
}, 10)
}

整体函数原理前面几篇介绍过了,主要注意的点是step,因为是匀速函数,所以直接赋值,所赋的值和原图片每一段的宽度相等,div的高度也是!

3.在中调用函数

my$("dv2").onmouseover=function(){
    animateYun(my$("dv2"),{"backgroundPositionY":-8850})    
}
my$("dv2").onmouseout=function(){
    animateYun(my$("dv2"),{"backgroundPositionY":0})     
}

总结:难度不大,效果炫酷,实乃出家旅行,页面装X必备之选!
全家福: javaScript攻克轮播图之阿里云动画案例

ps:本文纯属原创,抄袭必究!

javaScript攻克轮播图之阿里云动画案例

相关推荐