195400 发表于 2021-7-16 11:50

芦苇 ◎ 倒影

<style type="text/css">
    .RotatingIcon{
      width:180px;height:120px;
      overflow: hidden;
      border-radius: 25%;
    }
    #Ellipse{
      width:900px;height:800px;margin:100px 0 32px 100px;
    }
</style>   

<div style="width:1000px; height:auto !important:min-height:800px;
position:relative;margin:100px 0 32px -８0px;">
   <div id="Ellipse">
      <img class="RotatingIcon" src="https://z3.ax1x.com/2021/07/15/WnR45F.jpg">
      <img class="RotatingIcon" src="https://z3.ax1x.com/2021/07/15/WnRhUU.jpg">
      <img class="RotatingIcon" src="https://z3.ax1x.com/2021/07/15/WnRfET.jpg">
      <img class="RotatingIcon" src="https://z3.ax1x.com/2021/07/15/WnRRbV.jpg">
      <img class="RotatingIcon" src="https://z3.ax1x.com/2021/07/15/WnR2D0.jpg">
      <img class="RotatingIcon" src="https://z3.ax1x.com/2021/07/15/WnRguq.jpg">
      <img class="RotatingIcon" src="https://z3.ax1x.com/2021/07/15/WnR6vn.jpg">
      <img class="RotatingIcon" src="https://z3.ax1x.com/2021/07/15/WnRygs.jpg">
    </div>
    <input class="left" type="button" name="" value="顺时针旋转" onclick="IRJS_StartRotation('Ellipse',1);">
    <!-- 1 表示顺时针旋转 -->
    <input class="right" type="button" name="" value="逆时针旋转" onclick="IRJS_StartRotation('Ellipse',-1);">
    <!-- -1 表示逆时针旋转 -->
    <img src="https://z3.ax1x.com/2021/07/15/WnR45F.jpg"
    style="width:360px;position:absolute ;left:300px;top:120px; -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.5)));">
</div>
   
    <script type="text/javascript">
      document.write('<script type="text/javascript" src="http://a456.3vfree.cn/js/ImageRotator-min.js"><\/script>');
    </script>
   
   <script type="text/javascript" >      
            var imageRotater = null;
            function InitScripts() {
                imageRotater = ImageRotatorJS('Ellipse', 'RotatingIcon', 5, 50, 3000, 10, 90, 50, null);
                // 其中，ImageRotatorJS()构造函数中的参数如下：
                // 第一个参数表示父容器的 ID
                // 第二个参数表示每一个旋转木马项的 class 名称
                // 第三个参数表示旋转速度：10 = fast, 500 = slow. 10 = 0.01 second
                // 第四个参数表示缩放的百分比： 0 = no Zoom, 100 = 100% Zoom
                // 第五个参数表示旋转的时间间隔，单位为毫秒
                // 第六个参数表示图片于屏幕在 Z 轴方向上的角度
                // 第七个参数表示图片的初始角度
                // 第八个参数表示图片的反射倒影的级数：0-100
                // 第九个参数是可选参数，表示圆周的颜色
            }
      InitScripts();
    </script>
   
   

雄鹰翱翔 发表于 2021-7-17 17:49

欣赏老师精美佳作，赞一个！

195400 发表于 2021-7-17 19:24

雄鹰翱翔 发表于 2021-7-17 17:49
欣赏老师精美佳作，赞一个！

http://www.yinhuabbs.cn/data/attachment/forum/201912/21/084215njp5lwls4o0j7pno.gif

西椅子胡同 发表于 2021-7-18 05:43

高手佳作！

195400 发表于 2021-7-18 10:14

西椅子胡同 发表于 2021-7-18 05:43
高手佳作！

http://www.yinhuabbs.cn/data/attachment/forum/201912/21/084215njp5lwls4o0j7pno.gif
页: [1]
查看完整版本: 芦苇 ◎ 倒影