animate:
function animate(obj,json,fn) {
// 第一参数 动的对象 2 attr 动的那个属性 3 属性值少多少
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true; // 用来判断是否停止定时器 定时器的里面
// 每隔 30 毫秒就要运行一次
for(var k in json) { // k 属性 json[k] 是属性值
// 第一 k 是 width
// 第二 k height
// leader = 600 - 100
// leader = leader + (target - leader ) /10 ;
// 计算步长
// target 目标位置 leader 不清楚,我们不知道用户改那个属性
// 检测用户给我们了什么属性, 我们就用这个属性的值 来计算
// 我们怎么知道用户给我们属性,我们怎么又能得到属性的值呢?
// var leader = obj.style[attr]; 他只能得到行内式
var leader = 0;
// 因为透明度是 小数 取值 0~1 之间 第二个 它没有单位
if(k == "opacity") {
// 先解决小数的问题
leader = Math.round(getStyle(obj,k) * 100) || 100;
// 如果没有opacity 默认当 1 看 1* 100 = 100
// 我们去过来的是 0.3 但是小数不好计算 我们乘以100 30 好计算
}
else {
leader = parseInt(getStyle(obj,k)) || 0;
// 他本身有单位 所以要去掉 默认的默认是 0
}
//去掉px 的方法 parseInt(25px) 25
/* alert(leader);*/
var step = (json[k] - leader) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
if( k == "opacity") { // 记住我们的透明是不加单位的 不要加px
obj.style.opacity = leader / 100;
// opacity: 0.4;
// filter: alpha(opacity = 40); /*不能改只能是 40 不能是 0.4*/
obj.style.filter = "alpha(opacity = "+leader+")";
}
// 设置层级
else if(k == "zIndex") {
obj.style.zIndex = json[k]; // 直接给值
}
else {
obj.style[k] = leader + "px"; // 其他的要单位
}
if(leader != json[k]) { // 只要三个属性有一个没有到达,我就取反
// 这句话要写到 for in 里面 因为有三个属性,所以用 for in 才能遍历
// 三个都到了 都不执行这句话了
flag = false;
}
}
// console.log(flag);
if(flag) {
clearInterval(obj.timer);
if(fn){ // 如果有函数传递过来 , 定时器结束了,说明动画结束 可以执行 回调函数
fn(); // 执行函数 fn + ();
}
}
},30)
}
function getStyle(obj,attr) {
if(obj.currentStyle) {
// 如果支持,返回改属性值
// return obj.style.left 只能得到行内式的
// return obj.currentStyle["left"]; // 正确的写法,但是left 是传进来的
return obj.currentStyle[attr];
}
else
{
return window.getComputedStyle(obj,null)[attr];
}
}
旋转轮播方法:
window.onload = function() {
var arrow = document.getElementById("arrow"); // 三角
var wrap = document.getElementById("wrap"); // 大盒子
var slide = document.getElementById("slide");
var lis = slide.children[0].children; // 获得所有的li
var json = [ // 包含了5张图片里面所有的样式
{ // 1
width:400,
top:70,
left:50,
opacity:20,
z:2
},
{ // 2
width:600,
top:120,
left:0,
opacity:80,
z:3
},
{ // 3
width:800,
top:100,
left:200,
opacity:100,
z:4
},
{ // 4
width:600,
top:120,
left:600,
opacity:80,
z:3
},
{ //5
width:400,
top:70,
left:750,
opacity:20,
z:2
}
];
wrap.onmouseover = function() { // 鼠标经过显示 三角
animate(arrow,{opacity:100});
}
wrap.onmouseout = function() { // 鼠标离开 隐藏三角
animate(arrow,{opacity:0});
}
move(); // 页面执行也调用一次
// 两个按钮
var flag = true; // 用于函数节流
var as = arrow.children; // 2 个 a
for(var k in as) {
as[k].onclick = function() {
// 当俺们点击的时候, 只做一件事情 ---- 交换json
if(this.className == "prev") { // 左侧按钮
// alert(11);
if(flag == true) { // 实现按钮只能点击一次
move(true);
flag = false;
}
}
else
{
/* 当我们点击了 右侧按钮 :
把 数组里面的第一个值删掉 ,然后把这个值追加到 数组的最后面。
json.push(json.shift());*/
// alert(22); // 右侧按钮
if(flag == true) { // 实现按钮只能点击一次
move(false);
flag = false;
}
}
}
}
function move(x) {
if(x != undefined) { // 如果没有值传递过来,就应该 不执行 里面的语句直接遍历json
if(x) {
// 交换 反向json 左侧
json.unshift(json.pop())
}else {
// 正向 json
json.push(json.shift());
}
}
// 交换完毕 json 之后,就要 循环执行一次
for(var i=0;i<json.length;i++) {
animate(lis[i],{
width: json[i].width,
top: json[i].top,
left: json[i].left,
opacity: json[i].opacity,
zIndex: json[i].z
},function(){ flag = true; })
}
}
// go
/* width:400,
top:20,
left:750,
opacity:20,
z:2*/
/* // 给每个图片 5个 json
for(var i=0;i<json.length;i++) {
animate(lis[i],{
width: json[i].width,
top: json[i].top,
left: json[i].left,
opacity: json[i].opacity,
zIndex: json[i].z
})
}*/
}