0
点赞
收藏
分享

微信扫一扫

异形滚动

十里一走马 2021-09-24 阅读 42
基础前端

1、原理的揭示

前言：图片大小处理问题的解决，当我们只改变盒子大小，图片会溢出，无法充满这个盒子。设置图片的宽高为 100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异形滚动</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
        }
        img { //让图片充满整个盒子
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="box"><img src="images/0.jpg" alt=""></div>
</body>
</html>

从最低层的背景图开始解析。五个显示的图，两个隐藏的图。一个七个基本图样。


思路：

  • 放置背景图片（li 绝对定位，再用图片填充）
  • 点击时改变动画的 JSON
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异形滚动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .yixing{
            width: 670px;
            height: 221px;
            background: url(images/pic_bg.gif);
            margin: 100px auto;
            border: 1px solid #000;
            position: relative;
        }
        .yixing ul{
            list-style: none;
        }
        .yixing ul li{
            position: absolute;
        }
        /*img这个元素不会根据父亲来设置宽度、高度，所以我们就要写：*/
        .yixing ul li img{
            width: 100%;
            height: 100%;
        }
        .yixing ul li.stateA{width: 55px;height: 37px;left:-55px;top: 84px;}
        .yixing ul li.stateB{width: 71px;height: 54px;left:16px;top: 67px;}
        .yixing ul li.stateC{width: 122px;height: 86px;left:104px;top: 35px;}
        .yixing ul li.stateD{width: 161px;height: 112px;left:247px;top: 16px;}
        .yixing ul li.stateE{width: 122px;height: 86px;left:436px;top: 35px;}
        .yixing ul li.stateF{width: 71px;height: 54px;left:583px;top: 67px;}
        .yixing ul li.stateG{width: 55px;height: 37px;left:678px;top: 84px;}
    
        .rightBtn{
            position: absolute;
            top: 151px;
            right: 20px;
            width: 40px;
            height: 40px;
            background-color: red;
        }

    </style>
</head>
<body>
    <div class="yixing">
        <ul>
            <li class="stateA"><img src="images/number/0.png" alt="" /></li>
            <li class="stateB"><img src="images/number/1.png" alt="" /></li>
            <li class="stateC"><img src="images/number/2.png" alt="" /></li>
            <li class="stateD"><img src="images/number/3.png" alt="" /></li>
            <li class="stateE"><img src="images/number/4.png" alt="" /></li>
            <li class="stateF"><img src="images/number/5.png" alt="" /></li>
            <li class="stateG"><img src="images/number/6.png" alt="" /></li>
        </ul>
        <div class="btns">
            <a href="javascript:;" id="rightBtn" class="rightBtn"></a>
        </div>
    </div>

    <script type="text/javascript" src="js/animate-2.0.1.js"></script>
    <script type="text/javascript">
        var lis = document.getElementsByTagName("li");
        var rightBtn =  document.getElementById("rightBtn");

        var JSONC = {"width": 122,"height": 86,"left":104,"top": 35};
        var JSOND = {"width": 161,"height": 112,"left":247,"top": 16};
        //理论上我们可以不厌其烦写JSONA、JSONB

        rightBtn.onclick = function(){
            //理论上我们可以不厌其烦写
            animate(lis[3],JSONC,1000,"BounceEaseOut");
            animate(lis[4],JSOND,1000,"BounceEaseOut");
        }
    </script>
</body>
</html>

2、JSON的优化

  • 获取 targetJSON 使用数组接受 JSON放进数组。
var JSONarr = [];
        //把所有的状态都推入数组：
        for(var i = 0 ; i < lis.length ; i++){
            JSONarr.push({
                "width"     : parseInt(fetchComputedStyle(lis[i],"width")),
                "height"    : parseInt(fetchComputedStyle(lis[i],"height")),
                "left"  : parseInt(fetchComputedStyle(lis[i],"left")),
                "top"   : parseInt(fetchComputedStyle(lis[i],"top"))
            });
        }

        console.log(JSONarr);
  • 右按钮的监听使用 for 进行优化，防止手写。
        //右按钮的监听
        rightBtn.onclick = function(){
            //让1、2、3、4、5、6元素都分别变为数组中的0、1、2、3、4、5的状态
            for(var i = 1 ; i <= 6 ; i++){
                animate(lis[i],JSONarr[i - 1],600,"BounceEaseOut");
            }
        }

3、增加二次点击效果

这里是个难点今天，学了半天就是想不明白为什么不二次轮播，下午去吃了个饭，再仔细想想终于明白是怎么回事了。
以右击按钮为例，当我们点击的时候，图片依据 动画 左移。这里只是借助了动画改变了 li 的位置，li 盒子的编号依然没变，所以当我们再次点击盒子只是变到本身现在所处位置。我错就错在盒子转移到另一个盒子，认为他的盒子编号也随之发生改变。
想明白这点，我们就可以在动画完成后，改变盒子编号。这样下次的点击效果就会生效。又因为我们得到的 li 是一个类数组对象不能通过pop等进行操作。先把它放进一个数组里。

var liArray = [];   //存放每个li的数组 新增1

        var JSONarr = [];

        //把所有的状态都推入数组：
        for(var i = 0 ; i < lis.length ; i++){
            JSONarr.push({
                "width"     : parseInt(fetchComputedStyle(lis[i],"width")),
                "height"    : parseInt(fetchComputedStyle(lis[i],"height")),
                "left"  : parseInt(fetchComputedStyle(lis[i],"left")),
                "top"   : parseInt(fetchComputedStyle(lis[i],"top")),
                "opacity" : parseInt(fetchComputedStyle(lis[i],"opacity"))
            });
            //liArray就和lis是一样的结构，lis是类数组对象，而liArray是数组 新增2
            liArray.push(lis[i]);
        }
    //右按钮的监听
        rightBtn.onclick = function(){
            //让1、2、3、4、5、6元素都分别变为数组中的0、1、2、3、4、5的状态
            for(var i = 1 ; i <= 6 ; i++){
                animate(liArray[i],JSONarr[i - 1],600,"BounceEaseOut");
            }
            //让0号元素瞬移
            for(var k in JSONarr[6]){
                liArray[0].style[k] = JSONarr[6][k] + "px";
            }

            //交换身份！！新增3
            liArray.push(liArray.shift());
 
        }

4、设置节流，自动轮播，和opacity

设置 opacity 主要是兼容左右轮播时的淡入淡出。
函数节流，因为所有的 li 盒子都是动的，所以节流我们只需要随便设置一个盒子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异形滚动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .yixing{
            width: 670px;
            height: 221px;
            background: url(images/pic_bg.gif);
            margin: 100px auto;
            border: 1px solid #000;
            position: relative;
            overflow: hidden;
        }
        .yixing ul{
            list-style: none;
        }
        .yixing ul li{
            position: absolute;
            opacity: 1;
            filter:alpha(opacity=100);
        }
        /*img这个元素不会根据父亲来设置宽度、高度，所以我们就要写：*/
        .yixing ul li img{
            width: 100%;
            height: 100%;
        }
        .yixing ul li.stateA{width: 55px;height: 37px;left:-55px;top: 84px; opacity: 0; filter:alpha(opacity=0);}
        .yixing ul li.stateB{width: 71px;height: 54px;left:16px;top: 67px;}
        .yixing ul li.stateC{width: 122px;height: 86px;left:104px;top: 35px;}
        .yixing ul li.stateD{width: 161px;height: 112px;left:247px;top: 16px;}
        .yixing ul li.stateE{width: 122px;height: 86px;left:436px;top: 35px;}
        .yixing ul li.stateF{width: 71px;height: 54px;left:583px;top: 67px;}
        .yixing ul li.stateG{width: 55px;height: 37px;left:678px;top: 84px; opacity: 0;filter:alpha(opacity=0);}
    
        .rightBtn{
            position: absolute;
            top: 151px;
            right: 20px;
            width: 40px;
            height: 40px;
            background-color: red;
        }
        .leftBtn{
            position: absolute;
            top: 151px;
            left: 20px;
            width: 40px;
            height: 40px;
            background-color: red;
        }

    </style>
</head>
<body>
    <div class="yixing" id="yixing">
        <ul>
            <li class="stateA"><img src="images/number/0.png" alt="" /></li>
            <li class="stateB"><img src="images/number/1.png" alt="" /></li>
            <li class="stateC"><img src="images/number/2.png" alt="" /></li>
            <li class="stateD"><img src="images/number/3.png" alt="" /></li>
            <li class="stateE"><img src="images/number/4.png" alt="" /></li>
            <li class="stateF"><img src="images/number/5.png" alt="" /></li>
            <li class="stateG"><img src="images/number/6.png" alt="" /></li>
        </ul>
        <div class="btns">
            <a href="javascript:;" id="leftBtn" class="leftBtn"></a>
            <a href="javascript:;" id="rightBtn" class="rightBtn"></a>
        </div>
    </div>

    <script type="text/javascript" src="js/animate-2.0.1.js"></script>
    <script type="text/javascript" src="js/fetchComputedStyle.js"></script>
    <script type="text/javascript">
        var yixing =  document.getElementById("yixing");
        var rightBtn =  document.getElementById("rightBtn");
        var leftBtn =  document.getElementById("leftBtn");
        var lis = document.getElementsByTagName("li");
        //lis是类数组对象，getElementsByTagName得到的元素们是类数组对象，不是数组
        //所以lis没有pop方法、没有unshift()方法！
        var liArray = [];   //存放每个li的数组

        var JSONarr = [];

        //把所有的状态都推入数组：
        for(var i = 0 ; i < lis.length ; i++){
            JSONarr.push({
                "width"     : parseInt(fetchComputedStyle(lis[i],"width")),
                "height"    : parseInt(fetchComputedStyle(lis[i],"height")),
                "left"  : parseInt(fetchComputedStyle(lis[i],"left")),
                "top"   : parseInt(fetchComputedStyle(lis[i],"top")),
                "opacity" : parseInt(fetchComputedStyle(lis[i],"opacity"))
            });
            //liArray就和lis是一样的结构，lis是类数组对象，而liArray是数组
            liArray.push(lis[i]);
        }

        //console.log(JSONarr);

        //右按钮的监听
        rightBtn.onclick = rightBtnHandler;

        var timer = setInterval(rightBtnHandler,2000);
        yixing.onmouseover = function(){clearInterval(timer);};
        yixing.onmouseout = function(){timer = setInterval(rightBtnHandler,2000);};

        function rightBtnHandler(){
            //节流
            if(liArray[1].isanimated) return;

            //让1、2、3、4、5、6元素都分别变为数组中的0、1、2、3、4、5的状态
            for(var i = 1 ; i <= 6 ; i++){
                animate(liArray[i],JSONarr[i - 1],600,"BounceEaseOut");
            }
            //让0号元素瞬移
            for(var k in JSONarr[6]){
                liArray[0].style[k] = JSONarr[6][k] + "px";
            }

            //交换身份！！
            liArray.push(liArray.shift());
 
        }

        //左按钮的监听
        leftBtn.onclick = function(){
            //节流
            if(liArray[1].isanimated) return;
             
            for(var i = 0 ; i <= 5 ; i++){
                animate(liArray[i],JSONarr[i + 1],600,"BounceEaseOut");
            }
            //让0号元素瞬移
            for(var k in JSONarr[0]){
                liArray[6].style[k] = JSONarr[0][k] + "px";
            }

            //交换身份！！
            liArray.unshift(liArray.pop());
 
        }
    </script>
</body>
</html>
举报

相关推荐

Allegero 异形焊盘制作

Allegero 异形焊盘异形焊盘图形融合焊盘缩放HarmonyOS后端开发

【Android 屏幕适配】异形屏适配 ② ( 需要异形屏适配情况 | 需要异形屏适配的 Android 系统版本 | 刘海屏状态判定 | 异形屏适配调试 - 华为云调试 )

android屏幕适配异形屏刘海屏云调试云平台云计算

【快应用】异形屏快应用如何全屏适配

全屏显示全屏解决方案移动开发

Unity，发布ios和Android的包，UGUI，异形屏适配问题。

#if#endif缩进游戏开发yyds干货盘点

Python为视频设置遮罩实现异形窗口播放

pythonPython编写代码推送后端开发

图片自动滚动（横向滚动）

javascriptvue

div 图片滚动 / 文字滚动

html信息发布xml系统/运维

滚动

firefox自定义滚动条Linux系统/运维

vue计算滚动条滚动速度

前端代码改变世界Vue让前端飞

cadence allegro\阿狸狗 异形表贴焊盘的创建（入门笔记）

编辑器
0 条评论