javascript实现动画的联动

桃扇骨 2022-07-15 03:51 175阅读 0赞

最近在做一个网站的时候用到了图片联动的效果，然后觉得不错，就把其中图片联动的部分copy出来分享一下，其中包含图片的左右滚动，自定义滚动条，滚动条控制图片的滚动。

html部分：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>javascript实现动画的联动</title>
    		<link rel="shortcut icon" href="favicon.ico" />
    		<link rel="stylesheet" type="text/css" href="css/experience01.css" />
    	</head>
    	<body>
    		<div class="con_wrap">
    			<div id="contentbox1">
    				<div class="scrollImg">
    					<div class="scrollImg_left">
    						<a id="scroll_leftbtn" href="javascript:"></a>
    						<a id="scroll_rightbtn" href="javascript:"></a>
    						<ul id="scrollimg_list">
    							<li><img src="img/experience01/scrollimg01.jpg"/></li>
    							<li><img src="img/experience01/scrollimg02.jpg"/></li>
    							<li><img src="img/experience01/scrollimg03.jpg"/></li>
    							<li><img src="img/experience01/scrollimg04.jpg"/></li>
    							<li><img src="img/experience01/scrollimg05.jpg"/></li>
    							<li><img src="img/experience01/scrollimg06.jpg"/></li>
    							<li><img src="img/experience01/scrollimg07.jpg"/></li>
    							
    						</ul>
    					</div>
    					<div id="scrollImg_right" class="scrollImg_right">
    						<ul id="scrollImg_right_list">
    							<li class="active"><img src="img/experience01/scrollimg01.jpg"/></li>
    							<li><img src="img/experience01/scrollimg02.jpg"/></li>
    							<li><img src="img/experience01/scrollimg03.jpg"/></li>
    							<li><img src="img/experience01/scrollimg04.jpg"/></li>
    							<li><img src="img/experience01/scrollimg05.jpg"/></li>
    							<li><img src="img/experience01/scrollimg06.jpg"/></li>
    							<li><img src="img/experience01/scrollimg07.jpg"/></li>
    							
    						</ul>
    						<div id="scrollwrap">
    							<div id="scrollbtn"></div>
    						</div>
    					</div>
    				</div>
    				<div class="height50"></div>
    				<div class="height50"></div>
    			</div>
    		</div>
    		<script src="js/experience01.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/move.js" type="text/javascript" charset="utf-8"></script>
    	</body>
    
    </html>

个人习惯用scss，如果你也在用那么可以直接看scss部分跳过css部分，如果习惯写css的同学可以跳过scss部分。

scss部分：

$mainColor: #50c8d7;
    * {
        margin: 0;
        padding: 0;
        font-family: "microsoft yahei";
    }
    a {
        border: 0;
        text-decoration: none;
    }
    li {
        list-style: none;
    }
    img {
        border: none;
    }
    .height50 {
        width: 100%;
        height: 50px;
    }
    
    #contentbox1 {
        position: relative;
        width: 1000px;
        margin: 50px auto 0;
        background: #fff;
        
        .scrollImg {
            clear: both;
            width: 909px;
            height: 432px;
            margin: 10px 0 0 50px;
            .scrollImg_left {
                position: relative;
                width: 674px;
                height: 433px;
                overflow: hidden;
                float: left;
                #scroll_leftbtn,
                #scroll_rightbtn {
                    z-index: 5;
                    display: block;
                    width: 40px;
                    height: 40px;
                    position: absolute;
                    top: 170px;
                    opacity: 0.5;
                    filter:alpha(opacity=50);
                }
                #scroll_leftbtn:hover,
                #scroll_rightbtn:hover {
                    opacity: 1;
                    filter:alpha(opacity=100);
                }
                #scroll_leftbtn {
                    left: 0;
                    background: #000 url("../img/experience01/scrollimg_left.png") no-repeat center center;
                }
                #scroll_rightbtn {
                    right: 0;
                    background: #000 url("../img/experience01/scrollimg_right.png") no-repeat center center;
                }
                ul {
                    clear: both;
                    position: absolute;
                    left: 0;
                    top: 0;
                    li {
                        display: block;
                        float: left;
                        width: 674px;
                        height: 433px;
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
            .scrollImg_right {
                position: relative;
                width: 235px;
                height: 433px;
                overflow: hidden;
                float: left;
                ul {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 225px;
                    overflow: hidden;
                    li {
                        width: 215px;
                        height: 141px;
                        box-sizing: border-box;
                        margin: 0 5px 5px;
                        img {
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    }
                    li.active {
                        border: 4px solid #fcb616;
                    }
                }
                #scrollwrap {
                    width: 10px;
                    height: 420px;
                    position: absolute;
                    right: 0;
                    top: 5px;
                    border-radius: 10px;
                    #scrollbtn {
                        width: 10px;
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 50px;
                        background: #bfbfbf;
                        border-radius: 10px;
                    }
                }
            }
        }
        
    }

css部分：

* {
      margin: 0;
      padding: 0;
      font-family: "microsoft yahei"; }
    
    a {
      border: 0;
      text-decoration: none; }
    
    li {
      list-style: none; }
    
    img {
      border: none; }
    
    .height50 {
      width: 100%;
      height: 50px; }
    
    #contentbox1 {
      position: relative;
      width: 1000px;
      margin: 50px auto 0;
      background: #fff; }
      #contentbox1 .scrollImg {
        clear: both;
        width: 909px;
        height: 432px;
        margin: 10px 0 0 50px; }
        #contentbox1 .scrollImg .scrollImg_left {
          position: relative;
          width: 674px;
          height: 433px;
          overflow: hidden;
          float: left; }
          #contentbox1 .scrollImg .scrollImg_left #scroll_leftbtn,
          #contentbox1 .scrollImg .scrollImg_left #scroll_rightbtn {
            z-index: 5;
            display: block;
            width: 40px;
            height: 40px;
            position: absolute;
            top: 170px;
            opacity: 0.5;
            filter: alpha(opacity=50); }
          #contentbox1 .scrollImg .scrollImg_left #scroll_leftbtn:hover,
          #contentbox1 .scrollImg .scrollImg_left #scroll_rightbtn:hover {
            opacity: 1;
            filter: alpha(opacity=100); }
          #contentbox1 .scrollImg .scrollImg_left #scroll_leftbtn {
            left: 0;
            background: #000 url("../img/experience01/scrollimg_left.png") no-repeat center center; }
          #contentbox1 .scrollImg .scrollImg_left #scroll_rightbtn {
            right: 0;
            background: #000 url("../img/experience01/scrollimg_right.png") no-repeat center center; }
          #contentbox1 .scrollImg .scrollImg_left ul {
            clear: both;
            position: absolute;
            left: 0;
            top: 0; }
            #contentbox1 .scrollImg .scrollImg_left ul li {
              display: block;
              float: left;
              width: 674px;
              height: 433px; }
              #contentbox1 .scrollImg .scrollImg_left ul li img {
                width: 100%;
                height: 100%; }
        #contentbox1 .scrollImg .scrollImg_right {
          position: relative;
          width: 235px;
          height: 433px;
          overflow: hidden;
          float: left; }
          #contentbox1 .scrollImg .scrollImg_right ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 225px;
            overflow: hidden; }
            #contentbox1 .scrollImg .scrollImg_right ul li {
              width: 215px;
              height: 141px;
              box-sizing: border-box;
              margin: 0 5px 5px; }
              #contentbox1 .scrollImg .scrollImg_right ul li img {
                display: block;
                width: 100%;
                height: 100%; }
            #contentbox1 .scrollImg .scrollImg_right ul li.active {
              border: 4px solid #fcb616; }
          #contentbox1 .scrollImg .scrollImg_right #scrollwrap {
            width: 10px;
            height: 420px;
            position: absolute;
            right: 0;
            top: 5px;
            border-radius: 10px; }
            #contentbox1 .scrollImg .scrollImg_right #scrollwrap #scrollbtn {
              width: 10px;
              position: absolute;
              top: 0;
              left: 0;
              height: 50px;
              background: #bfbfbf;
              border-radius: 10px; }

javascript部分：函数部分+主体部分

/**
     * 兼容IE获取样式函数
     * @param {Object} obj
     * @param {Object} name
     */
    function getStyle(obj, name)
    {
    	if(obj.currentStyle)
    	{
    		return obj.currentStyle[name];
    	}
    	else
    	{
    		return getComputedStyle(obj, false)[name];
    	}
    }
    /**
     * 阻止默认事件
     * @param {Object} e
     */
    function preventDefa(e){  
        if(window.event){  
            //IE中阻止函数器默认动作的方式   
            window.event.returnValue = false;   
        }  
        else{  
            //阻止默认浏览器动作(W3C)   
            e.preventDefault();  
        }   
    }  
    /**
     * 运动函数
     * @param {Object} obj
     * @param {Object} attr
     * @param {Object} iTarget
     * @param {Object} fnend
     */
    function startMove2(obj, attr, iTarget,fnend)
    {
    	var cur=parseInt(getStyle(obj, attr));
    	var speed=(iTarget-cur)/15;
    	speed=speed>0?Math.ceil(speed):Math.floor(speed);
    	clearInterval(obj.timer);
    	obj.timer=setInterval(function (){
    		if(attr=='opacity')
    		{
    			cur=Math.round(parseFloat(getStyle(obj, attr))*100);
    		}
    		else
    		{
    			cur=parseInt(getStyle(obj, attr));
    		}
    		if(Math.abs(iTarget - cur) < Math.abs(speed))
    		{
    			obj.style[attr]=iTarget+'px';
    			clearInterval(obj.timer);
    			if(fnend) fnend();
    		}
    		else
    		{
    			if(attr=='opacity')
    			{
    				obj.style.filter='alpha(opacity:'+(cur+speed)+')';
    				obj.style.opacity=(cur+speed)/100;
    			}
    			else
    			{
    				obj.style[attr]=cur+speed+'px';
    			}
    		}
    	}, 30);
    }

函数封装部分前两个函数均是为了兼容IE，第三个运动函数之前有写过[传送门][Link 1]，不再赘述。

在这部分javascript代码中，注释已经非常详细，主要还是理解其思想。

首先，左边是一个图片轮播，而且不需要自动滚动，这个就是点击左右按钮执行切换的函数即可，在**切换到第一张和最后一张的时候要注意图片位置的归零**，这样滚动才能显得更加的顺畅。本文采用的方法是**使用两倍数量的图片**，当进行到最后一张或者第一张时，先执行运动切换，然后瞬间将图片位置进行一个移动，这在人眼是无法察觉的。

第二个，右边的滚动条，这个滚动条的制作之前也有写过[传送门][Link 2]，核心是鼠标对滚动条的拖动和鼠标滚动控制滚动条的移动，然后我们实现滚动条的位置控制右边图片在盒子的相对位置，原理是**利用滚动条在盒子中的相对位置计算出一个比例系数，然后利用比例系数确定图片在盒子中的相对位置**。

第三个，左右联动之左边控制右边，当左边切换到某张图片时，右边的对应的图片要切换classname为active，同时要保证这种图片时在装图片的盒子的可视区域。这里我使用的方法是**通过左边图片距离盒子左边的相对位置除以单张图片的宽度确定现在图片是第几张，然后激活右边对应的图片**；至于图片保持在装图片盒子的可视区域，这个就需要用到一个判断，主要分为两步：**1.第一张和最后一张的特殊处理，第一张和最后一张不能在盒子的中间，所以是直接移动到底部或者顶部。2.其他图片通过距离顶部的距离和每张图片在盒子中的相对位置进行计算定位到盒子中间，这里需要注意的是要把margin也计算进去。**

第四个，左右联动之右边控制左边，这个相对简单，我们此时点击的是第几张，直接使用其索引计算左边图片需要移动到的位置即可。

总结：每个模块都不是太难，主要难点是在控制左右联动，本文的左右联动是通过判定位置确定页码，同时建议大家在这种比较多参数需要处理的时候将不同的模块分开来写，**让不同的模块公用少数几个参数或者不用共同的参数，通过返回值来传递参数**，这样出错的几率会很小，同时也便于日后的复用和思路的梳理。

[Link 1]: http://blog.csdn.net/sir1241/article/details/52554762
[Link 2]: http://blog.csdn.net/sir1241/article/details/52815800