您现在的位置是:网站首页>前端技术>HTML5HTML5

微信内容页图片放大实现功能JS

神夜2020-08-07 10:26:10HTML51617人已围观文章来源:神夜个人博客

简介微信公众号里面文章详情一般上传的图片需要点击放大显示滑动显示下一张功能,此JS调用微信内置JS插件实现。如果插入MP4视频在IOS上可实现不全屏,并且最大宽度为100%。

微信公众号里面文章详情一般上传的图片需要点击放大显示滑动显示下一张功能,此JS调用微信内置JS插件实现。如果插入MP4视频在IOS上可实现不全屏,并且最大宽度为100%。

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script>
$(".pdtxt video").css("max-width","100%");
$(".pdtxt video").attr("preload",true);
$(".pdtxt video").attr("webkit-playsinline","webkit-playsinline");
$(".pdtxt video").attr("playsinline","playsinline");
/*调用微信预览图片的方法*/
function imagePreview(){
  var imglis = [];
  var imgObj = $(".pdtxt img");//img对象
  for(var i=0; i<imgObj.length; i++){
    imglis.push(imgObj.eq(i).attr('src'))
    imgObj.eq(i).click(function(){          
    var Imgurl = $(this).attr('src');
    WeixinJSBridge.invoke("imagePreview",{
      "urls":imglis,
      "current":Imgurl
    });
  });
  }      
}      
imagePreview();    
script>

站点信息

  • 建站时间:2017-10-24
  • 网站程序:Hsycms 3.0
  • 文章统计:288条
  • 微信公众号:扫描二维码,关注我们
分享按钮