II.〆慕容。 发表于 2020-10-2 23:01:14

发烧的诡谈（作者：五福）

本帖最后由 II.〆慕容。 于 2020-10-2 23:25 编辑 <br /><br />    <style>
      .mrhf-box ul,
      .mrhf-box ul li {
            list-style: none;
            padding: 0;
            margin: 0;
      }
      .mrhf-box {
            width: 546px;
            height: 722px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
      }
      .mrhf-screen {
            width: 546px;
            height: 722px;
            overflow: hidden;
            position: relative;
      }
      .mrhf-screen li {
            float: left;
            width: 546px;
            height: 722px;
            overflow: hidden;
      }
      .mrhf-screen ul {
            position: absolute;
            left: 0;
            right: 0;
            width: 4914px;
      }
      .mrhf-arr {
            display: block;
      }
      .mrhf-arr span {
            width: 50px;
            height: 20px;
            position: absolute;
            bottom: -50px;
            left: 50%;
            cursor: pointer;
      }
      .mrhf-arr span:hover {
            color: #f00;
      }
      .mrhf-arr .mrhf-left {
            transform: translateX(-150%);
      }
      .mrhf-arr .mrhf-right {
            transform: translateX(50%);
      }
      .mrhf-tip {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 546px;
            height: 722px;
            line-height: 722px;
            background-color: rgba(255, 255, 255, .2);
            color: #fff;
            font-size: 26px;
            text-align: center;
            display: none;
      }

    </style>
    <div class="mrhf-box" id="mrhf_box">
      <div class="mrhf-screen" id="mrhf_screen">
            <ul>
                <li><img src="http://ii23.cn/data/attachment/forum/202010/02/194113h665enxu27z6gyuf.jpg" alt=""></li>
                <li><img src="http://ii23.cn/data/attachment/forum/202010/02/194113n9tquwsw9uw20gwv.jpg" alt=""></li>
                <li><img src="http://ii23.cn/data/attachment/forum/202010/02/194113b8uau8ttt4j17qbt.jpg" alt=""></li>
                <li><img src="http://ii23.cn/data/attachment/forum/202010/02/194113w89n98zxc5x9xqvc.jpg" alt=""></li>
                <li><img src="http://ii23.cn/data/attachment/forum/202010/02/194113cj9ohhtotat5ih9l.jpg" alt=""></li>
                <li><img src="http://ii23.cn/data/attachment/forum/202010/02/194114vnn688n87dhjjrjz.jpg" alt=""></li>
                <li><img src="http://ii23.cn/data/attachment/forum/202010/02/194114uvxrkivi3fx5mrmd.jpg" alt=""></li>
                <li><img src="http://ii23.cn/data/attachment/forum/202010/02/194114ekcah599caiqkhai.jpg" alt=""></li>
            </ul>
      </div>
      <div class="mrhf-arr" id="mrhf_arr">
            <span class="mrhf-left" id="mrhf_left">上一页</span>
            <span class="mrhf-right" id="mrhf_right">下一页</span>
      </div>
      <span class="mrhf-tip" id="mrhf_tip">已经是最后一页了</span>
    </div>

    <script>
      var mrhf_box = mrhfMy$('mrhf_box');
      var mrhf_screen = mrhfMy$('mrhf_screen');
      var mrhf_ul = mrhf_screen.children;
      var mrhf_arr = mrhfMy$('mrhf_arr');
      var mrhf_left = mrhfMy$('mrhf_left');
      var mrhf_right = mrhfMy$('mrhf_right');

      var mrhf_tip = mrhfMy$('mrhf_tip');

      var mrhf_count = mrhf_ul.children.length;
      var mrhf_img_width = mrhf_screen.offsetWidth;
      var mrhf_index = 0;
      mrhf_right.onclick = function () {
            if (mrhf_index < mrhf_count - 1) {
                mrhf_index++;
                mrhfAnimate(mrhf_ul, -mrhf_index * mrhf_img_width);
            } else {
                mrhf_tip.style.display = 'block';
                setTimeout(function () {
                  mrhf_tip.style.display = 'none';
                }, 1000)
            }
      };
      mrhf_left.onclick = function () {
            if (mrhf_index > 0) {
                mrhf_index--;
                mrhfAnimate(mrhf_ul, -mrhf_index * mrhf_img_width);
            }
      };
      function mrhfMy$(id) {
            return document.getElementById(id);
      }
      function mrhfSetInnerText(element, content) {
            // 判断当前浏览器是否支持 innerText
            if (typeof element.innerText === 'string') {
                element.innerText = content;
            } else {
                element.textContent = content;
            }
      }
      function mrhfGetScroll() {
            var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            return {
                scrollLeft: scrollLeft,
                scrollTop: scrollTop
            }
      }
      function mrhfAnimate(element, target) {
            element.timerId = null;
            if (element.timerId) {
                clearInterval(element.timerId);
                element.timerId = null;
            }
            element.timerId = setInterval(function () {
                var step = 10;
                var current = element.offsetLeft;

                if (current > target) {
                  step = - Math.abs(step);
                }

                if (Math.abs(current - target) < Math.abs(step)) {
                  clearInterval(element.timerId);
                  element.style.left = target + 'px';

                  return;
                }
                element.style.left = current + step + 'px';
            }, 5);
      }


    </script>

无魂回归 发表于 2020-10-2 23:10:07

这是生病了吗

II.〆慕容。 发表于 2020-10-2 23:24:22

无魂回归 发表于 2020-10-2 23:10
这是生病了吗

点击下一页，最后一页有说到

随心而遇 发表于 2020-10-3 09:52:43

这是有多心大呀
失火当发烧的

你这个签不错，给我整一个呗

II.〆慕容。 发表于 2020-10-3 15:39:52

随心而遇 发表于 2020-10-3 09:52
这是有多心大呀
失火当发烧的



什么签啊，下面的签名图？？？？

II.〆浅笑° 发表于 2020-10-3 18:30:33

这主儿估计是梦游糊涂了   

片片枫叶情 发表于 2020-10-4 07:53:16

有意思可以翻页。

随心而遇 发表于 2020-10-4 19:04:23

II.〆慕容。 发表于 2020-10-3 15:39
什么签啊，下面的签名图？？？？

对头 下面的个签图

II.〆慕容。 发表于 2020-10-5 16:38:48

随心而遇 发表于 2020-10-4 19:04
对头 下面的个签图

下次看见合适的给你弄一个

雪千寻 发表于 2020-10-6 11:16:57

这这这结局怎么不是皆大欢喜啊？消防局的警戒文？
页: [1]
查看完整版本: 发烧的诡谈（作者：五福）