东篱闲人 发表于 2022-7-16 17:43

试一个：相逢一场，不恨不悔 TO黑黑

本帖最后由 东篱闲人 于 2022-7-17 19:32 编辑 <br /><br /><br><br>
<style>
#papa { left: -400px; width: 1400px; height: 792px; box-shadow: 3px 3px 24px #000; background: #111 linear-gradient(#FAF0E6,#FAF0E6); position: relative; }
#drawer { position: absolute; width: 900px;; height: 792px; left:250px; top: 0px; 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://s1.ax1x.com/2022/07/16/j5nV5F.jpg',
      'https://s1.ax1x.com/2022/07/17/jIlsSS.jpg',
      'https://s1.ax1x.com/2022/07/17/jIl6yQ.jpg',
      'https://s1.ax1x.com/2022/07/17/jIlRwn.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); },10000);

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>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=1 height=1 src="//music.163.com/outchain/player?type=2&id=1384127698&auto=1&height=66"></iframe><br><br><br><br>

红影 发表于 2022-7-16 18:18

文字和图片都好美，东篱大哥真棒{:4_187:}

加林森 发表于 2022-7-16 19:21

老兄好厉害，一下就制作出来了。{:4_199:}

东篱闲人 发表于 2022-7-16 19:44

红影 发表于 2022-7-16 18:18
文字和图片都好美，东篱大哥真棒

{:4_176:}

东篱闲人 发表于 2022-7-16 19:44

加林森 发表于 2022-7-16 19:21
老兄好厉害，一下就制作出来了。

初步学习，还很粗糙。。。{:5_102:}

加林森 发表于 2022-7-16 19:48

东篱闲人 发表于 2022-7-16 19:44
初步学习，还很粗糙。。。

谦虚容易长胖的。。。。{:4_189:}

红影 发表于 2022-7-17 10:14

东篱闲人 发表于 2022-7-16 19:44


东篱大哥的制图总是那么美{:4_187:}

东篱闲人 发表于 2022-7-17 10:51

加林森 发表于 2022-7-16 19:48
谦虚容易长胖的。。。。

怪不得俺这么瘦。。。。

东篱闲人 发表于 2022-7-17 10:52

红影 发表于 2022-7-17 10:14
东篱大哥的制图总是那么美

怀古，老了。。。。。。{:5_103:}

加林森 发表于 2022-7-17 11:02

东篱闲人 发表于 2022-7-17 10:51
怪不得俺这么瘦。。。。

所以就不要谦虚了。。。。{:4_190:}

红影 发表于 2022-7-17 14:53

东篱闲人 发表于 2022-7-17 10:52
怀古，老了。。。。。。

喜欢古韵那份优雅的人，不一定就是老了，我还遇到过20几岁诗词就极好的人呢{:4_173:}

东篱闲人 发表于 2022-7-17 17:07

加林森 发表于 2022-7-17 11:02
所以就不要谦虚了。。。。

确实没有。。。{:5_117:}

东篱闲人 发表于 2022-7-17 17:08

红影 发表于 2022-7-17 14:53
喜欢古韵那份优雅的人，不一定就是老了，我还遇到过20几岁诗词就极好的人呢

他没老，俺老了。。。{:5_103:}

加林森 发表于 2022-7-17 17:11

东篱闲人 发表于 2022-7-17 17:07
确实没有。。。

那就好。

醉美水芙蓉 发表于 2022-7-17 18:59

马黑黑 发表于 2022-7-17 19:15

图文不宜走驴观花，定时器可以考虑设置长一点，这样欣赏起来更优雅。这一句，

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

红色部分表示3秒

马黑黑 发表于 2022-7-17 19:18

我就感觉，这个模板东篱可以玩一玩，果然。

主体部分已经能弄了，还可以细加工，做出不同的效果。

东篱闲人 发表于 2022-7-17 19:22

醉美水芙蓉 发表于 2022-7-17 18:59
欣赏东篱老师好作品！

{:4_190:}

东篱闲人 发表于 2022-7-17 19:23

马黑黑 发表于 2022-7-17 19:15
图文不宜走驴观花，定时器可以考虑设置长一点，这样欣赏起来更优雅。这一句，

let timer = setInterval( ...

这个时间间隔俺还真找了。找了半天没找到地方。。。{:5_117:}

马黑黑 发表于 2022-7-17 19:32

东篱闲人 发表于 2022-7-17 19:23
这个时间间隔俺还真找了。找了半天没找到地方。。。

这是你不知道定时器的原因。JS有两个定时器：

setInterval
setTimeout

一般的间隔时间找它们
页: [1] 2
查看完整版本: 试一个：相逢一场，不恨不悔 TO黑黑