论坛 › 欢乐水吧 › 阴阳猫（东篱可以开发一下这个模板）

马黑黑 发表于 2022-7-15 21:27

阴阳猫（东篱可以开发一下这个模板）

<style>
#papa { left: -214px; width: 1024px; height: 640px; box-shadow: 3px 3px 24px #000; background: #111 linear-gradient(snow, teal); position: relative; }
#drawer { position: absolute; width: 500px;; height: 450px; left: calc(50%- 250px); top: calc(50% - 225px); box-shadow: inherit; overflow: hidden; }
.mypic { position: absolute; top: -100%; width: 100%; height: 100%; transition: top 1.5s;}
</style>

<div id="papa">
        <div id="drawer"></div>
</div>

<script>
let step = 1, start = 0, ani = 100, last;
let pics = [
        'https://638183.freep.cn/638183/Pic/38/1.jpg',
        'https://638183.freep.cn/638183/Pic/38/2.jpg',
        'https://638183.freep.cn/638183/Pic/38/3.jpg',
        'https://638183.freep.cn/638183/Pic/38/4.jpg',
        'https://638183.freep.cn/638183/Pic/38/5.jpg'
];

for(pic of pics) {
        let ele = document.createElement('img');
        ele.src = pic;
        ele.alt = '';
        ele.title = pic;
        ele.className = 'mypic';
        drawer.appendChild(ele);
}

let picAr = document.querySelectorAll('.mypic');

picAni(0, picAr.length - 1);

let timer = setInterval(() => { picAni(0, picAr.length - 1); },3000);

function picAni(n1, n2) {
        if(last != undefined) picAr.style.top= ani + '%';
        let temp = start;
        last = temp;
        ani = step < 0 ? -100 : 100;
        picAr.style.top = '0%';
        start += step;
        if(start == n1 || start == n2) step = -step;
}
</script>

马黑黑 发表于 2022-7-15 21:27

代码：
<style>
#papa { left: -214px; width: 1024px; height: 640px; box-shadow: 3px 3px 24px #000; background: #111 linear-gradient(snow, teal); position: relative; }
#drawer { position: absolute; width: 500px;; height: 450px; left: calc(50%- 250px); top: calc(50% - 225px); box-shadow: inherit; overflow: hidden; }
.mypic { position: absolute; top: -100%; width: 100%; height: 100%; transition: top 1.5s;}
</style>

<div id="papa">
        <div id="drawer"></div>
</div>

<script>
let step = 1, start = 0, ani = 100, last;
let pics = [
        'https://638183.freep.cn/638183/Pic/38/1.jpg',
        'https://638183.freep.cn/638183/Pic/38/2.jpg',
        'https://638183.freep.cn/638183/Pic/38/3.jpg',
        'https://638183.freep.cn/638183/Pic/38/4.jpg',
        'https://638183.freep.cn/638183/Pic/38/5.jpg'
];

for(pic of pics) {
        let ele = document.createElement('img');
        ele.src = pic;
        ele.alt = '';
        ele.title = pic;
        ele.className = 'mypic';
        drawer.appendChild(ele);
}

let picAr = document.querySelectorAll('.mypic');

picAni(0, picAr.length - 1);

let timer = setInterval(() => { picAni(0, picAr.length - 1); },3000);

function picAni(n1, n2) {
        if(last != undefined) picAr.style.top= ani + '%';
        let temp = start;
        last = temp;
        ani = step < 0 ? -100 : 100;
        picAr.style.top = '0%';
        start += step;
        if(start == n1 || start == n2) step = -step;
}
</script>

马黑黑 发表于 2022-7-15 21:28

这个模板，所使用的图片滚动的算法，是基于前不久弄的在两数间来回遍历的脚本，有所改进。

马黑黑 发表于 2022-7-15 21:31

JS开头的变量：

let step = 1, start = 0, ani = 100, last;

step 是步进幅度；start 是遍历索引；ani 是图片移动数据（百分比）；last 用于记录上一张图片。

红影 发表于 2022-7-15 21:40

这个是可以来回滚动的，有趣{:4_187:}

马黑黑 发表于 2022-7-15 21:44

红影 发表于 2022-7-15 21:40
这个是可以来回滚动的，有趣

图片其实就在 drawer 上下方，把 #drawer 的 overflow 拿掉就原形毕露了

友昕 发表于 2022-7-15 21:50

这是真猫吗？还是合成的

马黑黑 发表于 2022-7-15 21:50

友昕 发表于 2022-7-15 21:50
这是真猫吗？还是合成的

这是地道的阴阳猫

东篱闲人 发表于 2022-7-15 21:53

不错不错，这个可以研究一下。。。{:5_116:}

小辣椒 发表于 2022-7-15 21:58

还有这种猫猫啊

小辣椒 发表于 2022-7-15 21:59

东篱闲人 发表于 2022-7-15 21:53
不错不错，这个可以研究一下。。。

老头 这个做图图你的强项{:4_173:}

小辣椒 发表于 2022-7-15 22:03

黑黑，这个效果也是很好玩

东篱闲人 发表于 2022-7-15 22:18

小辣椒 发表于 2022-7-15 21:59
老头 这个做图图你的强项

啥强项，就是瞎祸害。。。。{:5_117:}

红影 发表于 2022-7-15 22:22

马黑黑 发表于 2022-7-15 21:44
图片其实就在 drawer 上下方，把 #drawer 的 overflow 拿掉就原形毕露了

哦，类似于遮罩呗。

马黑黑 发表于 2022-7-15 22:40

红影 发表于 2022-7-15 22:22
哦，类似于遮罩呗。

就是不显示

马黑黑 发表于 2022-7-15 22:44

小辣椒 发表于 2022-7-15 22:03
黑黑，这个效果也是很好玩

过得去

马黑黑 发表于 2022-7-15 22:48

东篱闲人 发表于 2022-7-15 21:53
不错不错，这个可以研究一下。。。

感觉你可以用来做什么

加林森 发表于 2022-7-15 23:22

这些猫猫还真有的。我在街上看见过的。

马黑黑 发表于 2022-7-16 07:45

加林森 发表于 2022-7-15 23:22
这些猫猫还真有的。我在街上看见过的。

当然有的

加林森 发表于 2022-7-16 07:46

马黑黑 发表于 2022-7-16 07:45
当然有的

早上好。

查看完整版本: 阴阳猫（东篱可以开发一下这个模板）