实现功能： 类似一个模板。 用户点击一个按钮，之后会出现图片，图片里的内容是指 当前的功能说明。 点击按键弹出分享说明图片，背景用黑色半透明效果。 实现思路： 百度的图片放大方法， 原图片隐藏。点击后显示图片。
<html> <head> <style> .over {position: fixed; left:0; top:0; width:100%; z-index:100;} .tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;} </style> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> </head> <body> <div class="over"></div><!--背景层--> <div class="logoImg amplifyImg"><!--注意：此处的amlifyImg不可少--> <img src="preview.png" style="display: none;"/><!-- 此处是引入图片的路径 --> </div> <input type="button" value="点击测试" id="preview"> <script> $(document).ready(function () { $("#preview").click(function(){ //$('.amplifyImg img').css("display","block"); var currImg = $('.amplifyImg img'); coverLayer(1); var tempContainer = $('<div class=tempContainer></div>');//图片容器 with(tempContainer){//width方法等同于$(this) appendTo("body"); var windowWidth=$(window).width(); var windowHeight=$(window).height(); //获取图片原始宽度、高度 var orignImg = new Image(); orignImg.src =currImg.attr("src") ; var currImgWidth= orignImg.width; var currImgHeight = orignImg.height; if(currImgWidth<windowWidth){//为了让图片不失真，当图片宽度较小的时候，保留原图 if(currImgHeight<windowHeight){ var topHeight=(windowHeight-currImgHeight)/2; if(topHeight>35){/*此处为了使图片高度上居中显示在整个手机屏幕中：因为在android,ios的微信中会有一个title导航，35为title导航的高度*/ topHeight=topHeight-35; css('top',topHeight); }else{ css('top',0); } html('<img border=0 src=' + currImg.attr('src') + '>'); }else{ css('top',0); html('<img border=0 src=' + currImg.attr('src') + ' height='+windowHeight+'>'); } }else{ var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth; if(currImgChangeHeight<windowHeight){ var topHeight=(windowHeight-currImgChangeHeight)/2; if(topHeight>35){ topHeight=topHeight-35; css('top',topHeight); }else{ css('top',0); } html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+';>'); }else{ css('top',0); html('<img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+'>'); } } } tempContainer.click(function(){ $('.amplifyImg img').hide(); $(".tempContainer").remove(); coverLayer(0); }); }); //使用禁用蒙层效果 function coverLayer(tag){ with($('.over')){ if(tag==1){ css('height',$(document).height()); css('display','block'); css('opacity',1); css("background-color","#FFFFFF"); css("background-color","rgba(0,0,0,0.7)" ); //蒙层透明度 } else{ css('display','none'); } } } }); </script> </body> </html>不大会，不足之处，请各位大佬多多指正。最好提供怎么实现的方法。
