近期做网站运维方面的感受与技术分享

Meng小羽

发布于 2019-12-23 17:00:13

5360

发布于 2019-12-23 17:00:13

作为大二的我，本以为网站设计不是手到擒来的事情么，自己已经有了一年半的学习时间，不对，准确的说是两年的时间，但是真正接手到这个系统上来，迎面而来的却是一个接着一个的问题，没有上手不知道自己的水平有多么的差劲，看来自己还是需要进行不断的进阶学习，不能停步于HTML+CSS静态页面的设计上面来，还是需要前端与后端相结合的方式进行学习。自己就还有一年半的时间去奋斗，自己已经感觉到毕业的脚步声越来越清晰，自己未来一年半如何走，就看当下自己的是否努力，加油，羽，相信自己，肯定可以的，加油！！！

好了，废话不多说，开始总结这个接手学哥的网站进行运维时出现的大大小小的Bug，并进行解决的过程，，，，有些问题现在还在解决中ing

Q1：网站主页文章链接文字过长直接将一行的Li标签挤出来两行

解答方式：

第一种方式，采用JavaScript进行判断Li标签的长度，并进行截取文字的长度，多出来的文字用’….’进行代替。

第二种方式，采用PHP后台进行字段的截取显示，貌似这个网站就是这样的，PS，这个不是我改的。

Q2：网站轮播图“走马灯效果”实现问题

问题效果图片：

修改后:

解答方式：

这个怪自己学习JavaScript的基本功不扎实，这么简单的设计都没有实现，呃，把解决代码丢在这吧！

<html>
  <head></head>
  <body>
    <div class="swiper-wrapper" id="inner" style="transform: translate3d(10px, 0px, 0px); transition-duration: 0ms;">
      <volist name="photos_arr" id="vo">
        <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="left: 0px; width: auto;">
          <img src="{:sp_get_asset_upload_path($vo['url'])}" class="img-responsive" /></div>
      </volist>
    </div>
    <!-- Add Arrows -->
    <script>var oBox = document.getElementById("oBox");
      var time;
      var speed = 1;
      move(1280, 0) function move(max, min) {
        clearInterval(time) time = setInterval(function() {
          oBox.scrollLeft += speed;
          if (oBox.scrollLeft == max) {
            oBox.scrollLeft = min
          }
          if (oBox.scrollLeft % 320 == 0) {
            clearInterval(time) setTimeout(function() {
              if (speed == 1) {
                move(1280, 0)
              } else {
                move(0, 1280);
              }
            },
            0)
          }
        },
        20)
      }
      oBox.onmouseover = function() {
        clearInterval(time);
      }
      oBox.onmouseout = function() {
        if (speed == 1) {
          move(1280, 0)
        } else {
          move(0, 1280)
        }
      }</script>
  </body>

</html>

好了，晚安！

本文链接：https://cloud.tencent.com/developer/article/1558115

本文采用CC BY-NC-SA 3.0 Unported协议进行许可，转载请保留此文章链接

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

javascript

编程算法

登录后参与评论

0 条评论

热度