【 极简多图练习】越罗衫袂迎春风
本帖最后由 东篱闲人 于 2022-4-29 19:56 编辑 <br /><br /><style>.outer { text-align: center; }
.mama { margin: auto; display: inline-block; padding: 20px; vertical-align: middle; position: relative; }
.sPic { outline: none; }
.picTip { position: absolute; top: 30px; left: -150px; color: white; font: normal 1.5em / 2em sans-serif; text-shadow: 1px 1px 2px gray; mix-blend-mode: difference; }
</style>
<div class="outer">
<div class="mama">
<img class="sPic" src="https://s1.ax1x.com/2022/04/29/Lxd9Y9.jpg" alt="" />
</div>
</div>
<script>
let mama = document.querySelector(".mama");
let sPic = document.querySelector(".sPic");
let picTip = document.querySelector(".picTip");
let isGo = true;
let cuImg = 0;
let picAr = [
["https://s1.ax1x.com/2022/04/29/Lxd9Y9.jpg"],
["https://s1.ax1x.com/2022/04/29/LxdKfA.jpg"],
["https://s1.ax1x.com/2022/04/29/Lxd16P.jpg"],
["https://s1.ax1x.com/2022/04/29/LxdNkQ.jpg"],
["https://s1.ax1x.com/2022/04/29/LxdUYj.jpg"],
["https://s1.ax1x.com/2022/04/29/Lxdwpn.jpg"],
];
mama.onmousemove = function(e) {
e = e || event;
let x = e.clientX - this.offsetLeft;
let y = this.clientWidth;
this.style.cursor =`url('https://638183.freep.cn/638183/qd/${x > y/2 ? "next.cur" : "pre.cur"}'), auto`;
isGo = x > y/2? true : false;
}
mama.onclick = function(){
cuImg += isGo ? 1 : -1;
if (cuImg >= picAr.length) cuImg = 0;
if (cuImg < 0) cuImg = picAr.length - 1;
sPic.src = picAr;
picTip.innerHTML = picAr;
}
</script>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=1 height=1 src="//music.163.com/outchain/player?type=2&id=507160391&auto=1&height=66"></iframe>
汉服美，人更美。东篱大哥的这个简直是图文啊，制作真漂亮{:4_199:} 老兄制作得真漂亮，为你点赞！{:4_199:}
页:
[1]