在我的电脑上，用360安全浏览器、Chrome和Edge浏览器能显示百页窗效果，但用QQ浏览器和IE不行。
在我手机默认的浏览器上不显百页窗效果，点击手机屏幕右上角的三个圆点后选 择“用浏览打开”，其中的“浏览器”能显示百页窗效果，其它几种浏览器不能显示。 西椅子胡同 发表于 2021-6-20 16:33
很好的特效
在我的电脑上，用360安全浏览器、Chrome和Edge浏览器能显示百页窗效果 ...
谢谢您的信息，原来以为国产浏览器都不支持WAAPI，现在看来360可行。IOS的Safari'也行。
<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:center;
}
</style>
这样的切换特效Flash有现成的但现在的问题是主流浏览器已经不再支持Flash了:L
<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>
<!-- img id="chkImg" style="width:512px;margin-top:12px;" src="https://z3.ax1x.com/2021/06/17/2jJ7kT.jpg" -->
<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>
页:
1
[2]