码迷,mamicode.com
首页 > Web开发 > 详细

js实现图片联动效果

时间:2016-07-01 16:46:02      阅读:754      评论:0      收藏:0      [点我收藏+]

标签:js 动画 同时动画 链式动画

一.实现理论基础:

     (1)使用定时器setInterval(),完成动画效果;

(2)使用json传值,实现多个属性同时动画效果(比如:宽度,高度,透明度等可以一起进行动画效果);

 (3)使用回调函数,实现链式动画(就是宽度值增大到目的值,然后继续宽度值减小的变化);

(4)使用目标值减去初始值除以一个值(比如10),得到每次变化的增量,可以使得动画效果从初始值到目标值有个过度的过程,以不同的增量进行变化,而不是瞬间完成。

     speed=(json[attr]-curr)/10

     (5)使用一个标志位flag,来控制当所有的动画效果都已经完成才清除此次动画效果的定时器,否则继续进行定时器的操作,完成动画效果。

二.Html框架

     很简单,就一个父容器,包裹着几张图片。

<div id="container">
    <div id="list" >    
        <img src="../img/demo1.jpg" alt="1"/>
        <img src="../img/demo2.jpg" alt="2"/>
        <img src="../img/demo3.jpg" alt="3"/>
        <img src="../img/demo4.jpg" alt="4"/>
        <img src="../img/demo5.jpg" alt="5"/>      
    </div>
   
</div>


 三.js实现

window.onload = function () {
 
    var list = document.getElementById(‘list‘);
    var listI = list.getElementsByTagName(‘img‘);
    //给每一张图片添加事件绑定
    for (var i = 0; i < listI.length; i++) {
 
        listI[i].addEventListener("mouseover", function () {
            change(this);
        }, false);
 
    }
 
    //鼠标移出list区域,图片回到初始时的宽度200
 
    list.addEventListener("mouseout", function () {
        for (var i = 0; i < list.children.length; i++) {
            startMove(list.children[i], {
                "width": "200",
                "opacity": "70"
            }, 50);
        }
    }, false);
 
 
    //当鼠标移过图片时,让焦点没在其他图片上的图片宽度变为100px,透明度变为0.7,而鼠标移动到的那张图片宽度变为600
 
    function change(obj) {
 
        var children = obj.parentNode.children; //为了获得其他img的兄弟节点   
 
        for (var j = 0; j < children.length; j++) {
            if (obj != children[j]) {
                startMove(children[j], {
                    "width": "100",
                    "opacity": "70"
                }, 50, startMove(obj, {
                    "width": "600",
                    "opacity": "100"
                }, 50));
            }
        }; 
    }
 
}
//进行js运动效果的函数
 function startMove(obj, json, interval, fn) {
    clearInterval(obj.timer); //该对象每次开始动画,都先停止掉正在进行的计数器,以免发生计数器运动速度会不断增快的效果。
    var flag; //用来表示所有运动是否到达目标值
    //开启定时器,每隔Interval时间段执行相应动作
    
    obj.timer = setInterval(function () {
        flag = true; //进入定时器时,现将flag设置为所有的属性都已达到目标值
        //获取传过来的Json值(需要变化的属性,因为要同时执行多属性,所以这里使用了json传值)。
        for (var attr in json) {
 
            var curr = 0;//用来获得当下的属性值
            //判断所传递的属性是否为透明度
            if (attr == ‘opacity‘) { //如果是透明度,则获取该对象此刻的透明度值
 
                curr = Math.round(parseFloat(getStyle(obj, attr)) * 100);
            } else { //否则,获取该属性的当下其他属性值
                curr = parseInt(getStyle(obj, attr));
            }
            //进行运动的速度处理
            var speed = 0;
            speed = (json[attr] - curr) / 10; //每次速度变化的增量,每次实时的获得,可以达到变速运动
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //速度增量大于0,向上取整,速度增量小于0,向下取整
            if (curr != json[attr]) { //当随着属性值还不等于要达到的目标值,就将flag设置为false;
                flag = false;
            }
            //进行运动变化
            if (attr == ‘opacity‘) {
                obj.style.filter = ‘alpha(opacity:‘ + (curr + speed) + ")";
                obj.style.opacity = (curr + speed) / 100;
            } else {
                obj.style[attr] = curr + speed + ‘px‘;
            }
        }
 
 
        if (flag) { //如果flag值为true,说明传来的属性值,都已经变化到目标值,就可以清除计数器,
            //同时在检查是否有回调函数传入,若有就继续执行回调函数。
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        }
    }, interval);
}
//获得样式函数 
function getStyle(element, attr) {
    var value;
    if (typeof window.getComputedStyle != ‘undefined‘) { //非IE下获得属性的方法
        value = window.getComputedStyle(element, null)[attr];
    } else if (typeof element.currentStyle != ‘undefined‘) { //IE下获得属性的方法
        value = element.currentStyle[attr];
    }
    return value;
 
}

    

四,效果图    

 技术分享当鼠标移入图片内,移入的该张图片进行宽度增加,透明度增加,其他几张宽度稍微变小一点,如图:

技术分享

技术分享

这样,整个过程的滑动就实现了图片的联动效果,看起来很漂亮。


本文出自 “梦想需要坚持” 博客,请务必保留此出处http://xiyin001.blog.51cto.com/9831864/1794777

js实现图片联动效果

标签:js 动画 同时动画 链式动画

原文地址:http://xiyin001.blog.51cto.com/9831864/1794777

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!