MD-Picture自定义扩展玩法-预览图功能开启

March 21, 2019 · 技术 · 9837次阅读 · 共504字

MD-Picture

这依旧是一篇关于MD-Picture的文章

这里会为大家带来些扩展玩法噢

预览图

墨渊大佬在本人同意且注明出处的情况下转载了MD-Picture程序

然后前几天逛大佬博客，发现有人评论希望加入预览图功能qwq

其实叭，我自己的MD-Picture是加入了预览图的，但这也是在程序发布之后了

开发的时候我也想过加入这个功能，然后呢由于MDUI的特殊性，我实在不知道在哪里加入个img不会显得不协调

所以放弃了这个便匆匆发布了，，就在发布后不久，我便想到了利用头图2333所以只是自己加上了

接下来就为大家详讲下叭

在这之前，我先为大家解读下我一些奇怪的写法

首先是

$("#texts").html('<div class="mdui-textfield"><label class="mdui-textfield-label">图片外链地址</label><input type="text" id="url" class="mdui-textfield-input" value="https://ww2.sinaimg.cn/large/' + data['pid'] + '.jpg"></div>');
$("#pictureurl").html('<div class="mdui-textfield"><label class="mdui-textfield-label">缩略图外链地址</label><input type="text" id="url" class="mdui-textfield-input" value="https://ww2.sinaimg.cn/small/' + data['pid'] + '.jpg"></div>');
$("#codeurl").html('<div class="mdui-textfield"><label class="mdui-textfield-label">HTML代码</label><input type="text" id="url" class="mdui-textfield-input" value="<img src=&quot; https://ww2.sinaimg.cn/large/' + data['pid'] + '.jpg&quot;  width=&quot; ' + data['width'] + 'px&quot;  height=&quot; ' + data['height'] + 'px&quot; >"></div>');

肯定很多朋友要问为什么要用html插入的方式，而不直接给input赋值

当然简单易懂的方法我也想用23333但是MDUI这个是真的难受鸭

请输入图片描述

如上图第一栏和第二栏的差别，虽然说点击第二栏也会变成第一栏的样式

但是直接赋值的话，这个label他是不会自己跑上去的，也就会形成一个重叠

稍微懂点js的朋友可以试一下就知道了2333

接下来进入正题叭

预览图的话，我们用同样的方法，直接插入html，简单粗暴

首先呢，我们在第65行

<div class="PostTitleFill2 LazyLoad" data-original="https://www.hqsblog.cn/tu/tu.jpg" style="background-image: url(&quot;https://www.hqsblog.cn/tu/tu.jpg&quot;);"></div>

的前面加入个<div id="123">(ID随便写，但是一定要)后面加入个</div>
也就变成了

<div id="123"><div class="PostTitleFill2 LazyLoad" data-original="https://www.hqsblog.cn/tu/tu.jpg" style="background-image: url(&quot;https://www.hqsblog.cn/tu/tu.jpg&quot;);"></div></div>

这个样子

那我们直接在js中插入

$("#123").html('<div class="PostTitleFill2 LazyLoad" data-original="https://ww2.sinaimg.cn/large/' + data['pid'] + '.jpg" style="background-image: url(&quot;https://ww2.sinaimg.cn/large/' + data['pid'] + '.jpg&quot;);"></div>');

就可以咯（注意#后面就是前面加入的div的id）

当然呢

我们知道各位看官大人是懒得自己改的，所以叭，奉上源码qwq

依然是蓝奏云

希望大家评论下qwq博客的评论真的太少了

喝杯水

标签：评论,md-picture,文章,玩法,大佬,出处,qwq,加入,html,mdui

最后编辑于：2020/02/08 14:29

添加新评论

  1. ice ice
    2019-04-07 11:27

    对接阿里OOS会不会更

    回复
    1. 寒穹 寒穹
      2019-04-07 11:32

      可自行对接噢，改一下js提交就行辽

      回复
  2. ฅ 凉心吖ฅ ฅ 凉心吖ฅ
    2019-03-27 09:09

    请问一下，这个上传接口自己可以更改吗？

    回复
    1. 寒穹 寒穹
      2019-03-27 13:14

      这个是可以的噢

      回复
  3. qq qq
    2019-03-25 19:58

    qqqq

    回复
  4. 大大怪将军 大大怪将军
    2019-03-25 19:49

    啥东西

    回复
    1. 寒穹 寒穹
      2019-03-25 19:52

      程序介绍看以前的文章噢

      回复
  5. rbq rbq
    2019-03-25 19:15

    开始我的表演

    回复
    1. 寒穹 寒穹
      2019-03-25 19:16

      有请下一位选手

      回复
  6. 释怀 释怀
    2019-03-25 19:13

    既然你这么求我，那就帮你测试一下吧！

    回复
    1. 寒穹 寒穹
      2019-03-25 19:14

      哎鸭，说出来就不好了嘛

      回复
      1. 释怀 释怀
        2019-03-25 19:17

        表情显示不出来

        回复
        1. 寒穹 寒穹
          2019-03-25 19:20

          我这边正在修复噢

          回复
  7. 不暇 不暇
    2019-03-25 19:12

    牛逼牛逼

    回复
    1. 寒穹 寒穹
      2019-03-25 19:13

      谢谢支持

      回复
  8. 杨小杰博客 杨小杰博客
    2019-03-25 19:10

    听说有人在想我

    回复
    1. 寒穹 寒穹
      2019-03-25 19:12

      活捉大佬

      回复
  9. fly fly
    2019-03-25 18:11

    刚才评论了 谁给我吃了？ 我说你主题很好看 特别是三个泳装小妹妹

    回复
    1. 寒穹 寒穹
      2019-03-25 18:14

      背景图是随机二次元图api噢，每次打开都不一样呢

      回复