图片切换 --- 水平叶片百叶窗 - 【代码图腾】 - 中画网 - Powered by Discuz! Archiver

论坛 › 【代码图腾】 › 图片切换 --- 水平叶片百叶窗

195400 发表于 2021-6-18 09:47

图片切换 --- 水平叶片百叶窗

<style type="text/css">
#vWindow {
width:1152px;
height:600px;
border:thick brown ridge;

background-image:url(https://z3.ax1x.com/2021/06/17/2jJr0P.jpg);
background-size:1152px 600px;
position:relative;
margin:100px auto 32px -200px;
}
#vWindow .itemy {
width:1152px;
height:100px;

background-image:url(https://z3.ax1x.com/2021/06/17/2jJ7kT.jpg);
background-size:1152px 600px;
transform-origin: 0%0%;
}
</style>

<div id="vWindow">
<div style="background-position-y: 0px; " class="itemy"></div>
<div style="background-position-y: -100px; " class="itemy"></div>
<div style="background-position-y: -200px; " class="itemy"></div>
<div style="background-position-y: -300px; " class="itemy"></div>
<div style="background-position-y: -400px; " class="itemy"></div>
<div style="background-position-y: -500px; " class="itemy"></div>
</div>


<script type="text/javascript">
var imgSet = [
"https://z3.ax1x.com/2021/06/17/2jJr0P.jpg",
"https://z3.ax1x.com/2021/06/17/2jJDmt.jpg",
"https://z3.ax1x.com/2021/06/17/2jJdld.jpg",
"https://z3.ax1x.com/2021/06/17/2jJ0OI.jpg",
"https://z3.ax1x.com/2021/06/17/2jJw6A.jpg",
"https://z3.ax1x.com/2021/06/17/2jJsTf.jpg",
"https://z3.ax1x.com/2021/06/17/2jJ6k8.jpg",
"https://z3.ax1x.com/2021/06/17/2jJgfg.jpg",
"https://z3.ax1x.com/2021/06/17/2jJctS.jpg",
"https://z3.ax1x.com/2021/06/17/2jJRpQ.jpg",
"https://z3.ax1x.com/2021/06/17/2jJWlj.jpg",
"https://z3.ax1x.com/2021/06/17/2jJhXn.jpg",
"https://z3.ax1x.com/2021/06/17/2jJf6s.jpg",
"https://z3.ax1x.com/2021/06/17/2jJ5mq.jpg",
"https://z3.ax1x.com/2021/06/17/2jJI00.jpg",
"https://z3.ax1x.com/2021/06/17/2jJo7V.jpg",
"https://z3.ax1x.com/2021/06/17/2jJ7kT.jpg"
];

var Keyframes = [
[{transform: 'rotateX(90deg)', opacity:'0.4'},
{offset: 0.7, transform: 'rotateX(0deg)', opacity:'1'}],

[{opacity:'0'},{opacity:'1'}]
];
var EffectTiming = {duration: 10000, fill: 'forwards'};
var imgIdx = 0, lastIdx = imgSet.length - 1;
var imgBlock, items, aniObj, chkImg, aniImg;

function initTrun() {
aniObj = new Array();
imgBlock = document.getElementById('vWindow');
items = document.getElementsByClassName('itemy');
//chkImg = document.getElementById('chkImg');

for (j = 0 ; j < items.length; j++) {
aniObj = items.animate(Keyframes, EffectTiming);
aniObj.pause();
}

//aniImg = chkImg.animate(Keyframes, EffectTiming);
//aniImg.pause();

aniObj.onfinish = chg_cur_pic;
chg_cur_pic();
}

function chg_cur_pic() {

//chkImg.src = imgSet;
for(i = 0; i < items.length; i++) {
items.style.backgroundImage = "url(" + imgSet + ")";
}

imgBlock.style.backgroundImage = "url(" + imgSet + ")";
console.log(imgBlock.style.backgroundImage);

lastIdx = imgIdx;
imgIdx++;
imgIdx %= imgSet.length;

for (j = 0 ; j < items.length; j++) {
aniObj.play();
}
aniImg.play();
}
initTrun();
</script>

寒冬残荷 发表于 2021-6-18 11:48

是我的电脑有问题？没看到百叶窗效果。

寒冬残荷 发表于 2021-6-18 12:02

background-position-y？我的浏览器不支持这个属性？

寒冬残荷 发表于 2021-6-18 12:09

ＪＳ代码看不懂，ＣＳＳ和ＨＴＭＬ看懂最基本常用的。:lol想学，但学不会。

寒冬残荷 发表于 2021-6-18 13:24

<style type="text/css">
#divhua {
width: 200px;
height: 200px;
border: 1px dashed #ccc;
background-repeat: no-repeat;
background-position-y: 100px;
background-image: url(http://www.waibo.wang/bible/css3/img/bg.gif);
}
</style>
<div id="divhua" ></div><br><br>

寒冬残荷 发表于 2021-6-18 13:25

试了，我的浏览器支持background-position-y。

195400 发表于 2021-6-18 21:13

华妹发表于 2021-6-18 11:48
是我的电脑有问题？没看到百叶窗效果。

电脑上chrome、Firefox和 win 10的edge 都可以正常显示，IE 11 和国产的浏览器大概都不行。

195400 发表于 2021-6-18 21:31

华妹发表于 2021-6-18 13:25
试了，我的浏览器支持background-position-y。

您的浏览器可能是不支持Web 动画 API（Web Animation API）。

红枫发表于 2021-6-20 15:01

可能是论坛不接受某些代码。

https://dianshang.gaoding.com/toolold/active_blinds.html 有百叶窗换图的制作。试了，代码录在自己电脑上有效果，但放在论坛里就不运行了。

195400 发表于 2021-6-20 15:29

红枫发表于 2021-6-20 15:01
可能是论坛不接受某些代码。

https://dianshang.gaoding.com/toolold/active_blinds.html 有百叶窗换 ...

不是论坛不接受某些代码，而是使用的浏览器不支持某些代码。
这帖用到了WAAPI（Web Animation API），Chrome，Firefox及Edge都是支持的，国产浏览器不知道哪一款支持。
打开这个链接https://wow.techbrood.com/static/20161008/25414.html可以测试浏览器是不是支持它。

页: [1] 2

查看完整版本: 图片切换 --- 水平叶片百叶窗