js简单动画效果

旋转木马轮播图

@charset "UTF-8";
/*初始化  reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;}

.wrap{
    width:1200px;
    margin:100px auto;
}
.slide {
    height:500px;
    position: relative;
}
.slide li{
    position: absolute;
    left:200px;
    top:0;
}
.slide li img{
    width:100%;
}
.arrow{
    opacity: 0;
}
.prev,.next{
    width:76px;
    height:112px;
    position: absolute;
    top:50%;
    margin-top:-56px;
    background: url(../images/prev.png) no-repeat;
    z-index: 99;
}
.next{
    right:0;
    background-image: url(../images/next.png);
}

<div class="wrap" id="wrap">
    <div class="slide" id="slide">
        <ul>
            <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
        </ul>
        <div class="arrow" id="arrow">
            <a href="javascript:void(0);" class="prev" id="arrLeft"></a>
            <a href="javascript:;" class="next" id="arrRight"></a>
        </div>
    </div>
</div>

 var config = [
            {
                width: 400,
                top: 20,
                left: 50,
                opacity: 0.2,
                zIndex: 2
            },//0
            {
                width: 600,
                top: 70,
                left: 0,
                opacity: 0.8,
                zIndex: 3
            },//1
            {
                width: 800,
                top: 100,
                left: 200,
                opacity: 1,
                zIndex: 4
            },//2
            {
                width: 600,
                top: 70,
                left: 600,
                opacity: 0.8,
                zIndex: 3
            },//3
            {
                width: 400,
                top: 20,
                left: 750,
                opacity: 0.2,
                zIndex: 2
            }//4
        ];

        window.onload = function () {
            var flag = true;
            function flower() {
                for ( var i = 0; i < list.length;i++){
                    animate5(list[i],config[i],function () {
                        flag = true; //执行完函数则为true
                    });
                }
            }

            var list = my$("slide").getElementsByTagName("li");
            //图片散开
            for (var i = 0; i < list.length; i++) {
                //设置每一个li的宽，透明度，left，top，z-index
                animate5(list[i], config[i]);
            }
            my$("slide").onmouseover = function () {
                animate5(my$("arrow"), {"opacity": 1});
            }
            my$("slide").onmouseout = function () {
                animate5(my$("arrow"), {"opacity": 0});
            }

            my$("arrRight").onclick = function () {
                if (flag){
                    config.unshift(config.pop());
                    flower();
                    flag = false;
                }
            }
            my$("arrLeft").onclick = function () {
                if (flag){
                    config.push(config.shift());
                    flower();
                    flag = false;
                }
            }
        }


//封装变速函数    透明度（0-1）
function animate5(element,json,fn) {
    clearInterval(element.timeID);
    element.timeID = setInterval(function () {
        //假设都到目标值
        var flag = true;
        //遍历json对象中的每个属性
        for ( var attr in json){
            if (attr == "opacity"){
                //获取当前元素的属性值
                var current = parseInt(getStyle(element,attr)*100);
                //获取目标值
                var target = json[attr]*100;
                //移动的步数
                var step = (target - current) /10;
                //判断
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //移动后的值
                current += step;
                element.style[attr] = current / 100;
            }else if (attr == "zIndex"){
                //直接改变层级
                element.style[attr] = json[attr];
            } else {
                //获取当前元素的属性值
                var current = parseInt(getStyle(element,attr));
                //获取目标值
                var target = json[attr];
                //移动的步数
                var step = (target - current) /10;
                //判断
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //移动后的值
                current += step;
                element.style[attr] = current + "px";
            }
            if (current != target){
                flag = false
            }
        }
        if (flag){
            clearInterval(element.timeID);
            //判断是否传入了这个函数
            if (fn){
                fn();
            }
        }
    },30)
}

function my$(id){
    return document.getElementById(id);
}

function getStyle(element,attr){
    return window.getComputedStyle ? window.getComputedStyle(element,null)[attr] : element.currenStyle[attr];
}

图片放大效果

* {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
            display: none;
        }
        .small {
            position: relative;
        }

<div class="box" id="box">
    <div class="small"><!--小层-->
        <img src="images/small.png" width="350" alt=""/>
        <div class="mask"></div><!--遮挡层-->
    </div><!--小图-->
    <div class="big"><!--大层-->
        <img src="images/big.jpg" width="800" alt=""/><!--大图-->
    </div><!--大图-->
</div>

var box = my$("box");
    //获取小图的div
    var small = box.children[0];
    //获取遮挡层
    var mask = small.children[1];
    //获取大图的div
    var big = box.children[1];
    //获取大图
    var bigImg = big.children[0];

    //鼠标移入移出事件
    box.onmouseover = function () {
        mask.style.display = "block";
        big.style.display = "block";
    }
    box.onmouseout = function () {
        mask.style.display = "none";
        big.style.display = "none";
    }

    //移动事件
    small.onmousemove = function (e) {
        //获取鼠标此时可视区域的横纵坐标,去掉父亲的margin值
        var x = e.clientX - 100;
        var y = e.clientY - 100;

        //设置鼠标在遮挡层的中间显示
        x = x - mask.offsetWidth / 2;
        y = y - mask.offsetHeight / 2;

        //设置横纵坐标的最小值
        x = x < 0 ? 0 : x;
        y = y < 0 ? 0 : y;

        //设置横纵坐标的最大值
        x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;
        y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;

        //赋值给遮挡层
        mask.style.left = x + "px";
        mask.style.top = y + "px";

        //遮挡层的移动距离 / 大图的移动距离 = 遮挡层最大的移动距离 / 大图最大的移动距离
        //大图的移动距离 = 遮挡层的移动距离 * 大图最大的移动距离 / 遮挡层最大的移动距离

        //大图最大的移动距离
        var maxX = bigImg.offsetWidth - big.offsetWidth;
        var maxY = bigImg.offsetHeight - big.offsetHeight;

        //求大图的移动距离
        var bigImgX = x * maxX / (small.offsetWidth - mask.offsetWidth);
        var bigImgY = y * maxY / (small.offsetHeight - mask.offsetHeight);


        bigImg.style.marginLeft = -bigImgX + "px";
        bigImg.style.marginTop = -bigImgY + "px";
    }

function my$(id){
    return document.getElementById(id);
}

最后

以上就是潇洒大船为你收集整理的js简单动画效果的全部内容，希望文章能够帮你解决js简单动画效果所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。