寒冬残荷 发表于 2021-10-11 20:22

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

原来如此!老师高手!{:1_293:}

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的网站出没出外链的问题。)
页: 1 2 3 4 [5] 6 7 8 9
查看完整版本: 代码音画:《唯美花间 蝶舞翩翩》