.

朋友圈列表模式
分类:电脑知识 发表于:2023-04-25 10:36:23 评论(20)


又捣鼓了下网站

把《家有宝贝》手机版改成了朋友圈模式

就是遇到了一个问题

朋友圈中,不管有几张图片,都是缩小剪切显示在一起的

这个搞不来

虽然可以获取该条内容所有的图片

但改变不了图片的样式

没办法,就获取了最后一张图片,凑合用

先把代码记录下来备用

网上找的代码:

<%

′获取所有图片

function GetImgS(str)′获取所有图片

Set objRegExp1 = New Regexp

objRegExp1.IgnoreCase = True ′忽略大小写

objRegExp1.Global = True ′全文搜索

objRegExp1.Pattern = "src\=.+?\.(gif|jpg|png|bmp)"

set mm=objRegExp1.Execute(str)

For Each Match1 in mm

imgsrc=Match1.Value′也许存在不能过滤的字符,确保万一

imgsrc=replace(imgsrc,"""","")

imgsrc=replace(imgsrc,"src=","")

imgsrc=replace(imgsrc,"<","")

imgsrc=replace(imgsrc,">","")

imgsrc=replace(imgsrc,"img","")

imgsrc=replace(imgsrc," ","")

GetImgS=GetImgS&imgsrc′把里面的地址串起来备用

next

end function

%>

调用:

<img src="<%=GetImgS(rs("content"))%>" />

以上有个问题,如果只有单张图片是可用的,但多张图片就无法显示了。还有一个无法显示视频。

于是被我改成:

<%

′获取所有图片

function GetImgS(str)′获取所有图片

Set objRegExp1 = New Regexp

objRegExp1.IgnoreCase = True ′忽略大小写

objRegExp1.Global = True ′全文搜索

objRegExp1.Pattern = "src\=.+?\.(gif|jpg|png|bmp|mp4)"

set mm=objRegExp1.Execute(str)

For Each Match1 in mm

imgsrc=Match1.Value

imgsrc1=replace(imgsrc,"src=","")

if right(imgsrc,3) ="mp4" then

GetImgS=GetImgS&"<a href="&imgsrc1&""" data-fancybox=""gallery""><video "&imgsrc&"""></video></a>"

else

GetImgS="<a href="&imgsrc1&""" data-fancybox=""gallery""><img "&imgsrc&"""></a>"

end if

next

end function

%>

调用:<%=GetImgS(rs("content"))%>

其中:GetImgS="<a href="&imgsrc1&""" data-fancybox=""gallery""><img "&imgsrc&"""></a>"

只获取了最后一张图片

如果改成:GetImgS=GetImgS&"<a href="&imgsrc1&""" data-fancybox=""gallery""><img "&imgsrc&"""></a>"

那就会显示所有图片

只是显示所有图片后,我还无法更改它们的样式,就先获取一张吧。

  
邮箱: 密码:
  • cfanlost 铁粉Lv1 (2023-05-06 09:59:26)
    可以点赞吗🎄 这家伙不懒,就是不爱登录。
    • 阿和 博主 (2023-05-06 10:16:01)
      @cfanlost 木有~😳 
  • 林羽凡 💎钻石粉 (2023-05-01 09:58:49)
    asp大佬呀,😍 我不懒啊,我是林羽凡
    • 阿和 博主 (2023-05-03 10:13:34)
      @林羽凡 太夸张啦,跟你们比差远了唉😂 
  • 2broear 金粉Lv1 (2023-04-27 18:30:22)
    真不戳~👍 兴趣指引方向,会玩才会学
    • 阿和 博主 (2023-04-28 09:09:20)
      @2broear 😁 
  • Lvtu 铁粉Lv2 (2023-04-27 15:21:28)
    图文列表在你这个窄栏上不好看。。。🤔 得之,我幸;失之,我命。如是而已!
    • 阿和 博主 (2023-04-27 15:25:49)
      @Lvtu 我是仿微信朋友圈的样式呀,有一个好处就是可以放置更多内容,这样要是查找以前发的内容就比较方便,不好看吗? 
  • Xi (2023-04-25 13:57:03)
    可以通过css控制图片序列,nth-child和nth-last-child适配图片数量定义样式。 这家伙login in
    • 阿和 博主 (2023-04-25 13:59:00)
      @Xi 能展开讲讲嘛😆 
    • Xi (2023-04-25 14:05:10)
      @阿和 只有1张图的样式:nth-last-child(1):first-child {}
      2张图:nth-child(1):nth-last-child(2),nth-child(2):nth-last-child(1){},以此类推:
      3张图:nth-child(1):nth-last-child(3),nth-child(2):nth-last-child(2),:nth-child(3):nth-last-child(1){}
      4张图:nth-child(1):nth-last-child(4),:nth-child(2):nth-last-child(3),:nth-child(3),:nth-last-child(2),:nth-child(4):nth-last-child(1){} 
    • Xi (2023-04-25 14:06:51)
      @阿和 5张图:nth-child(1):nth-last-child(n + 5),:nth-child(1):nth-last-child(n + 5)~img{}
      6张图实际和3张样式一样; 
    • 阿和 博主 (2023-04-25 14:26:34)
      @Xi 我这样写对嘛😂?
      .pic img nth-last-child(1):first-child {width:60px;height:60px;}
      .pic img nth-child(1):nth-last-child(2),nth-child(2):nth-last-child(1){width:30px;height:60px;}
      .pic img nth-child(1):nth-last-child(3),nth-child(2):nth-last-child(2),:nth-child(3):nth-last-child(1){width:30px;height:30px;}
      .pic img nth-child(1):nth-last-child(4),:nth-child(2):nth-last-child(3),:nth-child(3),:nth-last-child(2),:nth-child(4):nth-last-child(1){width:30px;height:30px;} 
    • Xi (2023-04-25 14:43:04)
      @阿和 img后面加一个冒号,逗号后也要加类名。
      .pic img:nth-child(1):nth-last-child(2),.pic img:nth-child(2):nth-last-child(1){width:30px;height:60px;} 
    • 阿和 博主 (2023-04-25 14:56:58)
      @Xi 按照你这个改了,但是全部图片还是width:60px;height:60px;的格式😭 
    • Xi (2023-04-25 15:00:18)
      @阿和 看下你DOM结构呢 
    • 阿和 博主 (2023-04-25 15:01:43)
      @Xi 是这个吗:<td width="63" class="pic"><%=GetImgS(rs("content"))%></td> 
    • 阿和 博主 (2023-04-25 15:50:20)
      @Xi 找到症结了,我把图片上的链接撤掉后,样式就成功显示了😂
      非常感谢大佬的帮忙🌹🌹🌹 
    • Lvtu 铁粉Lv2 (2023-04-27 15:21:57)
      @阿和 如果要加链接,只需要在CSS上加个a就可以呀! 
    • 阿和 博主 (2023-04-27 15:24:05)
      @Lvtu 就不知道为什么,加了a或者把img换成a后,图片就变成原大小了