代码音画：《唯美花间蝶舞翩翩》 - 第5页 - 【代码图腾】 - 中画网

195400 发表于 2021-10-11 21:14

31楼搬到41楼看看表现是否正常<br>

<style type="text/css">
@import url('http://cesholl.cn3v.net/style/IPresenter.css');
#container
{
   width: 500px;
   height: 880px;
   position: relative;
   overflow: hidden;
margin:12px auto;
}
@keyframes liuxing
{
   0%{-webkit-transform:translate(0px,0px) rotate(0deg);opacity: 1;-webkit-animation-timing-function:linear;}
   30%{-webkit-transform:translate(-500px,300px) rotate(-5deg);opacity: 1;-webkit-animation-timing-function:ease-in;}
   100%{-webkit-transform:translate(-500px,300px) rotate(-5deg);opacity: 0;-webkit-animation-timing-function:ease-in;}
}
@keyframes hudie
{
   0%{-webkit-transform:translate(-400px,0px) rotate(0deg);opacity: 1;-webkit-animation-timing-function:linear;}
   30%{-webkit-transform:translate(500px,-400px) rotate(-5deg);opacity: 1;-webkit-animation-timing-function:ease-in;}
   100%{-webkit-transform:translate(500px,-400px) rotate(-5deg);opacity: 0;-webkit-animation-timing-function:ease-in;}
}
@keyframes fadein
{
   from {opacity: 0}
   to {opacity: 1}
}
@keyframes fadeout
{
   from {opacity: 1}
   to {opacity: 0}
}
.step img {width:400px;border:thin gray solid;overflow:hidden;border-radius:24px;}
#titlecontent {
text-align:center;
width:100%;height:200px;
line-height:150%;
position:absolute;text-shadow:1px 1px 1px #000;
font:bold 2em 微软雅黑;
bottom:150px;left:0px;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-text-stroke-color:white;
-webkit-text-stroke-width:3;

background-image:url(https://z3.ax1x.com/2021/07/10/WSvNo4.gif)
}
#ipresenter {margin-top:-100px;}
</style>
<div id='container' class='container'>
<img src='http://pan.yinhuabbs.cn/view.php/6f805b006f1ee37e67865639bc376f16.jpg' style='position:absolute;top:0px;left:0px;height:900px;'>
<img src='https://z3.ax1x.com/2021/09/08/h7HsIA.gif' style='position:absolute;top:100px;left:500px;height:300px;width:300px;-webkit-animation: liuxing 25s ease-in 1s infinite;'>
<img src='https://z3.ax1x.com/2021/09/08/h7Hrad.gif' style='position:absolute;top:600px;left:-350px;height:300px;width:300px;-webkit-animation: hudie 30s ease-in 1s infinite;'>
<div id="ipresenter">
</div>
<img src="https://z3.ax1x.com/2021/07/31/WjByvt.gif"
style="position:absolute;height:40px;width:40px;left:30px;top:30px;" />
<img src="https://z3.ax1x.com/2021/09/08/h7XwEF.gif"
style="position:absolute;height:80px;width:80px;right:50px;bottom:50px;" />
<div id='titlecontent'></div>
</div>

<audio id="ap" src="http://jgggbbs.net/yinyue/yhy.mp3" loop autoplay></audio>
<script type="text/javascript">
document.write('<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"><\/script>');
document.write('<script type="text/javascript" src="http://cesholl.cn3v.net/scripts/ipresenter.packed.js"><\/script>');
</script>
<script type="text/javascript">
var slider_images_url = [
'http://pan.yinhuabbs.cn/view.php/6f805b006f1ee37e67865639bc376f16.jpg',
'http://pan.yinhuabbs.cn/view.php/56f0cd527386b05ab0b8800238d81446.jpg',
'http://pan.yinhuabbs.cn/view.php/56f0cd527386b05ab0b8800238d81446.jpg',
'http://pan.yinhuabbs.cn/view.php/58386eecb495b4b2b7d7e9b53456bd75.jpg',
'http://pan.yinhuabbs.cn/view.php/51827a9ae37ae73c67bd3db0f5cf3864.jpg',
'http://pan.yinhuabbs.cn/view.php/c814004a45fbbddfcc633d9011477389.jpg',
'http://pan.yinhuabbs.cn/view.php/59e4026cd45d19a7a37dd5cba254f05b.jpg',
'http://pan.yinhuabbs.cn/view.php/16995bcc612d938be646bf3c93af1235.jpg',
'http://pan.yinhuabbs.cn/view.php/0d8349632dd67b5aa67532a7c4440218.jpg',
'http://pan.yinhuabbs.cn/view.php/3a1bcdcb82e3f901bed0f49609815aa8.jpg',
'http://pan.yinhuabbs.cn/view.php/a640136af45b08447fc51d2407e6f3ac.jpg',
'http://pan.yinhuabbs.cn/view.php/72d3e0609102cd47444c99f72f0d6184.jpg',
'http://pan.yinhuabbs.cn/view.php/85ed2d36dbae908048571b5d0ca60b82.jpg',
'http://pan.yinhuabbs.cn/view.php/fa1c9de2e7d69426e2bcc42bec53f7ff.jpg',
'http://pan.yinhuabbs.cn/view.php/ea5b8be8e91ead69931f05d49ab1746e.jpg',
'http://pan.yinhuabbs.cn/view.php/ef409c690e24e1e8d22af86417a36fdf.jpg',
'http://pan.yinhuabbs.cn/view.php/c9d2caf7d2aa0e7ee2de468dea157a70.jpg',
'http://pan.yinhuabbs.cn/view.php/658f7abc48e035df309ec53eedfc1f52.jpg',
'http://pan.yinhuabbs.cn/view.php/f4a40f0731d0585baeaf446599702d7b.jpg',
'http://pan.yinhuabbs.cn/view.php/3d9c969987e093074571170774aa3f0b.jpg',
'http://pan.yinhuabbs.cn/view.php/792f1197dd32761f881d383bf268b6ef.jpg',
'http://pan.yinhuabbs.cn/view.php/447076e5806d39c519b75549a3eb7672.jpg',
'http://pan.yinhuabbs.cn/view.php/e2421af354c4ab2c5e1011eb6678846c.jpg',
'http://pan.yinhuabbs.cn/view.php/cf1c61a410de91a971dfc00b9f648c9d.jpg',
'http://pan.yinhuabbs.cn/view.php/db385c3a31ef1b900238a5ee3084c375.jpg',
'http://pan.yinhuabbs.cn/view.php/df748097b505f9810f19d6785e6e984e.jpg',
'http://pan.yinhuabbs.cn/view.php/eb96cfaca165424365e954d280310230.jpg',
'http://pan.yinhuabbs.cn/view.php/21eb4a21e8af6cae292b668aead706b3.jpg',
'http://pan.yinhuabbs.cn/view.php/af6897ddf7c8d463721b9046a1c0f576.jpg',
'http://pan.yinhuabbs.cn/view.php/46663b20e97361415f17317b6de335d8.jpg',
'http://pan.yinhuabbs.cn/view.php/38791f0b24b72c0f870a6d73b4905736.jpg',
'http://pan.yinhuabbs.cn/view.php/0bec22d8e9b1c427543652626d97d84a.jpg',
'http://pan.yinhuabbs.cn/view.php/7d96cd62b36753115895330673d98149.jpg',
'http://pan.yinhuabbs.cn/view.php/50a12e473c56542cacf0616fd5c5a60d.jpg',
'http://pan.yinhuabbs.cn/view.php/a14180df0b77db770789b256e9e14dde.jpg',
'http://pan.yinhuabbs.cn/view.php/5db3c27c5eda1547d12ad6bd3c626b4d.jpg',
'http://pan.yinhuabbs.cn/view.php/e37f5a6efef89c372cb40187c4354ff0.jpg',
'http://pan.yinhuabbs.cn/view.php/8a00254a36d69cb21bbc87560340dcb7.jpg',
'http://pan.yinhuabbs.cn/view.php/d1aed68f7f0a537d177076e4e7879f9b.jpg',
'http://pan.yinhuabbs.cn/view.php/0f2aebb2bb5033a018a2f0c9be10e24f.jpg',
'http://pan.yinhuabbs.cn/view.php/e84d8705154602ef279bee797173a908.jpg',
'http://pan.yinhuabbs.cn/view.php/1d451e537f21f9c8624183ff127dfeaf.jpg',
'http://pan.yinhuabbs.cn/view.php/7f755fa404f17419e444c7ded3eaae24.jpg',
'http://pan.yinhuabbs.cn/view.php/9860664d2e4f84c876fd01530004f510.jpg',
'http://pan.yinhuabbs.cn/view.php/6f805b006f1ee37e67865639bc376f16.jpg',
'http://pan.yinhuabbs.cn/view.php/7a23c4825e0a8df0d1381fe1a733440b.jpg'];
var e_desc = '唯美花间蝶舞翩翩<br><br>          网页制作：深秋红枫<br>2021年1月5日';

var ipresenter = document.querySelector('#ipresenter');
console.log(ipresenter);
$(document).ready(function(){
for(n = 0; n < slider_images_url.length; n++) {
e_div = document.createElement('div');
e_div.setAttribute('data-x', n*1500);
e_div.setAttribute('data-y', 0);
e_div.setAttribute('data-pausetime',3000);
switch(n % 6) {
case 0:
e_div.setAttribute('data-rotate', 180);
break;
case 1:
e_div.setAttribute('data-rotatex', 180);
break;
case 2:
e_div.setAttribute('data-rotatey', 180);
break;
case 3:
e_div.setAttribute('data-rotate', -180);
break;
case 4:
e_div.setAttribute('data-rotatex', -180);
break;
case 5:
e_div.setAttribute('data-rotatey', -180);
break;
}
e_div.className='step';
e_img = document.createElement('img');
e_img.src = slider_images_url;
e_div.appendChild(e_img);
ipresenter.appendChild(e_div);
}
var titlecontent = document.getElementById('titlecontent');
titlecontent.innerHTML = e_desc;
titlecontent.style.webkitAnimation = 'fadein 3s linear both';
setTimeout(function() {
titlecontent.style.webkitAnimation = 'fadeout 3s linear both';
},5000);

$('#ipresenter').iPresenter({
animSpeed: 2000,
timer: 'none',
//timerDiameter: 60,
//timerStroke: 5,
//timerPadding: 5,
//timerColor: '#000',
//timerBg: '#FFF',class="container"
//timerOpacity: 0.4,data-easing="easeInOutQuint"
directionNav: false,
controlNav: false
});

});

</script>

寒冬残荷 发表于 2021-10-12 14:28

不正常，这一页和昨天第4页一样了。是你的代码中有什么问题吧？现第4页正常的，说明我的代码没问题。

寒冬残荷 发表于 2021-10-12 14:30

195400 发表于 2021-10-11 20:15
31楼和37楼大量id相同，也许是导致整个第4页的回复按钮失灵的原因，31楼注释掉后正常了。

现第4页正常了，第5页不正常。

195400 发表于 2021-10-12 14:39

寒冬残荷发表于 2021-10-12 14:30
现第4页正常了，第5页不正常。
确实奇怪，刚才没登录也没动画，现在登录进来就正常了。

原代码太长太复杂了，没仔细推敲只把它改为适合直接贴代码就发出来了，或许是有不合适的地方。

195400 发表于 2021-10-12 17:05

寒冬残荷发表于 2021-10-12 14:28
不正常，这一页和昨天第4页一样了。是你的代码中有什么问题吧？现第4页正常的，说明我的代码没问题。

这就是空间帖的优越之处：只要不是大问题总可以掩盖过去。

寒冬残荷 发表于 2021-10-13 08:44

195400 发表于 2021-10-10 18:12
就是上传到这里的“公共上传”，代码没改动。背景音乐没响，如果略作改动应该是可以响的。

为什么这个的JS切换图片不可以在手机上有效（看不到切换的图片）？您的《霜叶》那个贴的就可以？

195400 发表于 2021-10-13 09:17

寒冬残荷发表于 2021-10-13 08:44
为什么这个的JS切换图片不可以在手机上有效（看不到切换的图片）？您的《霜叶》那个贴的就可以？

这帖有点奇怪，在手机上登录后就看到图片切换了。
截了个图但太大发不出。
这帖和霜叶那帖应用同一个js库，不同的是除库以外的js代码。

195400 发表于 2021-10-13 10:23

寒冬残荷发表于 2021-10-13 08:44
为什么这个的JS切换图片不可以在手机上有效（看不到切换的图片）？您的《霜叶》那个贴的就可以？

按《霜叶》的方式修改了代码，现在应该是正常了吧。

红枫发表于 2021-10-13 13:53

我电脑、手机看到的情况：41楼运行不正常，19楼的却很正常。（应该是您存JS、CSS的网站出没出外链的问题。）

寒冬残荷 发表于 2021-10-13 13:56

41楼的在手机上有图片切换效果了。但网页又不正常了。每层楼的最下面一行功能又被屏蔽了。

页: 1 2 3 4 [5] 6 7 8 9

中画网's Archiver