您现在的位置是：网站首页>前端技术>HTML5教程HTML5教程

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

神夜2020-08-07 10:26:10【HTML5教程】3923人已围观文章来源：神夜个人博客

简介微信公众号里面文章详情一般上传的图片需要点击放大显示滑动显示下一张功能，此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>