.

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