微相册记录
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2017/11/15 Time: 17:15 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page import="java.util.HashMap" %> <%@ page import="com.binf.project.om201607.util.WxLocalUtil" %> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/bootstrap.min.css"> <title>流行美微现场</title> <% String fromopenid = (String) request.getSession().getAttribute("fromopenid"); if ("fromopenid".equals(fromopenid)) fromopenid = request.getParameter("fromopenid"); String fullPath = request.getRequestURL().toString(); String params = request.getQueryString()==null ? "" : "?" + request.getQueryString(); HashMap aMap = WxLocalUtil.getWxConfig(fullPath + params); %> <style> .picBox{ /*height: 110px;*/ margin-bottom: 20px; position: relative; } img{ display: block; margin: 0 auto; max- 100%; max-height: 100%; } .thumbnail{ height: 100%; border-radius: 20px; padding: 0; margin: 0; overflow: hidden; border: 3px solid #fff; } .mask{ position: fixed; left: 0;top: 0; 100%; height: 100%; background-color: rgba(0,0,0,0.6); } .innerBox{ 90%; height: 425px; margin: 30px auto; } .download{ position: absolute; left: 0; bottom: 30px; border-radius: 0; color: white; text-align: center; 100%; } .closeMask{ position: absolute; top: 10px;right: 10px; font-size: 24px; color: white; } .contentBox{ margin-top: 20px; } .thumbPicBox{ 90%; background-color: #fff; text-align: center; margin: 0 auto; margin-top: 20px; margin-bottom: 40px; padding-bottom: 20px; color: #888; border-radius: 20px; overflow: hidden; box-shadow: 5px 5px 100px #ccc; } .thumbTitle{ font-size: 18px; } </style> </head> <body> <div class="containet-fluid"> <div class="thumbPicBox"> <img src="./img/banner2.jpg" alt=""> <h1 class="thumbTitle">标题</h1> </div> <div class="contentBox clearfix"></div> </div> <div class="mask hidden"></div> <script src="js/zepto.min.js"></script> <script src="js/config.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script> var userConfig = { openId: '<%=fromopenid%>', appId: '<%=aMap.get("appid")%>', timestamp: '<%=aMap.get("timestamp")%>', nonceStr: '<%=aMap.get("noncestr")%>', signature: '<%=aMap.get("signature")%>', } </script> <script> (function(){ var pageNo = 0,pageSize = 7,flag = 0,flag2 = 0; function getParameter(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null)return decodeURI(r[2]); return null; } $(".thumbTitle").html(getParameter("title")); function getImg(){ pageNo++; $.post(config.SERVER.HOSTNAME+config.INTERFACE.GETIMGINFOWITHPAGE,{'pageNo': pageNo, 'pageSize': pageSize, 'cid': getParameter("cid")},function(result){ console.log(JSON.stringify(result)); if(result.pagenation.list.length == 0){ noImg(); return; } // var html = '<h1 class="title" style="text-align: center;"><span>'+getParameter("title")+'</span></h1>'+ var html = '<div class="contentPic clearfix">'; for(var i=0;i<result.pagenation.list.length;i++){ html += '<div class="picBox col-xs-6">'+ '<a href="##" class="thumbnail">'+ '<img src="'+config.SERVER.HOSTNAME+result.pagenation.list[i].url+'" alt="">'+ '</a>'+ '</div>'; } html += '</div>'; $('.contentBox').append(html); },"json"); } function getLazyImg(){ pageNo++; $.post(config.SERVER.HOSTNAME+config.INTERFACE.GETIMGINFOWITHPAGE,{'pageNo': pageNo, 'pageSize': pageSize, 'cid': getParameter("cid")},function(result){ console.log(JSON.stringify(result)); if(result.pagenation.list.length == 0){ noImg(); return; } var html = ''; for(var i=0;i<result.pagenation.list.length;i++){ html += '<div class="picBox col-xs-6">'+ '<a href="##" class="thumbnail">'+ '<img src="'+config.SERVER.HOSTNAME+result.pagenation.list[i].url+'" alt="">'+ '</a>'+ '</div>'; } $('.contentPic').append(html); flag2 = 0; },"json"); } function noImg(){ if(!flag){ var p = document.createElement('p'); p.innerText = '没有更多的图片了'; p.style.textAlign = 'center'; document.body.appendChild(p); flag = 1; } } getImg(); $(window).scroll(function(){ if(($(document).height()-$(window).height())<=($(window).scrollTop()+40)){ // console.log('开始加载！！！'); if(!flag2){ flag2 = 1; getLazyImg(); } } }); // 点击查看大图 $('.contentBox').delegate('img','click',function(){ var html = '<div class="innerBox">'+ '<span class="closeMask">X</span>'+ '<img src="'+$(this).attr('src')+'" alt="下載圖片" />'+ '<p class="download">*长按图片保存本地</p>'+ '</div>'; $('.mask').html("").removeClass('hidden').append(html); }); $('.mask').delegate('.closeMask','click',function(){ $('.mask').addClass('hidden'); }); // 微信分享 wx.config({ //debug: true, appId: userConfig.appId, timestamp: userConfig.timestamp, nonceStr: userConfig.nonceStr, signature: userConfig.signature, jsApiList: ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'] }); var shareConfig = { _title : '微相冊！', _link : config.SERVER.HOSTNAME+'/app/weixiangce/index.jsp', _imgUrl : config.SERVER.HOSTNAME + '/app/weixiangce/img/test.jpg', _desc : "聽君一席話，自掛東南枝！", _successWord : '分享成功，感谢您的参与！' }; wx.ready(function(){ wx.checkJsApi({ jsApiList: ['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone'], success: function(res){ //alert('success'); console.log(res); } }); //分享到朋友圈 wx.onMenuShareTimeline({ title: shareConfig._desc, link: shareConfig._link, imgUrl: shareConfig._imgUrl, success: function(){ alert(shareConfig._successWord); $('.mask').addClass('hidden'); } }); //分享给朋友 wx.onMenuShareAppMessage({ title: shareConfig._title, desc: shareConfig._desc, link: shareConfig._link, imgUrl: shareConfig._imgUrl, success: function(){ alert(shareConfig._successWord); $('.mask').addClass('hidden'); } }); wx.onMenuShareQQ({ title: shareConfig._title, desc: shareConfig._desc, link: shareConfig._link, imgUrl: shareConfig._imgUrl, success: function () { alert(shareConfig._successWord); $('.mask').addClass('hidden'); } }); wx.onMenuShareWeibo({ title: shareConfig._title, desc: shareConfig._desc, link: shareConfig._link, imgUrl: shareConfig._imgUrl, success: function () { alert(shareConfig._successWord); $('.mask').addClass('hidden'); } }); wx.onMenuShareQZone({ title: shareConfig._title, desc: shareConfig._desc, link: shareConfig._link, imgUrl: shareConfig._imgUrl, success: function () { alert(shareConfig._successWord); $('.mask').addClass('hidden'); } }); }); }()) </script> </body> </html>