html5仿蘋果手機滑屏解鎖查看微信代碼



70 277 93



特效描述:html5仿蘋果手機 滑屏解鎖 查看微信代碼,html5手機解鎖查看微信代碼

代碼結構

1. 引入CSS

<link href="index_files/main.css" rel="stylesheet">

2. 引入JS

<script charset="utf-8" src="index_files/x.js"></script>
<script src="index_files/hm.js"></script>
<script src="index_files/jquery-2.1.4.min.js"></script>
<script src="index_files/jquery.mobile.custom.min.js"></script>
<script src="index_files/iscroll-lite.min.js"></script>
<script src="index_files/main.js"></script>
<script src="index_files/load.js"></script>
<script src="index_files/jweixin-1.0.0.js"></script>
<script src="index_files/h.js" type="text/javascript"></script>

3. HTML代碼

	<div class="div load" style="width: 480px; height: 848px; display: none;">
		<div class="s s1"><img src="index_files/0.jpg" class="w100">
			<div id="loadnum">100%</div>
		</div>
		<img src="index_files/1.png" class="logo">
	</div>
	<div class="div main" style="width: 480px; height: 848px;">
		<div class="div m1 imgbg" data-src="index_files/1.jpg" style="width: 480px; height: 848px; background-image: url('http://big.1905.com/007/game/images/1/1.jpg');">
			<div class="div bb" style="width: 480px; height: 848px;">
				<div class="s1">16:22</div>
				<div class="s2">11月11日 星期三</div>
				<div class="s3">
					<ul>
						<li><img data-src="index_files/3.png" src="index_files/3.png"></li>
						<li>微信 <span>現在</span>
							<br>
							你收到一條來自007的好友請求
							<br>
							<span>滑動來查看</span></li>
					</ul>
				</div>
				<div class="s s4"><img data-src="index_files/2.png" class="w100" src="index_files/2.png"></div>
				<div class="s s5 imgbg" data-src="index_files/hh.png" style="background-image: url('index_files/hh.png');"></div>
			</div>
		</div>
		<div class="div m2" style="width: 480px; height: 848px;">
			<div class="s1 ss">
				<ul>
					<li class="head"><img data-src="index_files/1.png" class="w100" src="index_files/1(1).png"></li>
					<li class="info">
						<span class="name">詹姆斯·邦德</span><img data-src="index_files/2.png" class="sren" src="index_files/2(1).png"><span class="nickname">昵稱:007</span>
					</li>
				</ul>
			</div>
			<div class="s2 ss">
				<div class="jian">
					設置備注和標簽
				</div>
			</div>
			<div class="s2 ss">
				<ul>
					<li class="info1">地區</li>
					<li class="info2">英國 蘇格蘭</li>
				</ul>
				<div class="infoline"></div>
				<ul class="jian">
					<table>
						<colgroup>
							<col width="22%">
							<col width="78%">
						</colgroup>
						<tbody>
						<tr>
							<td>個人相冊</td>
							<td class="infoimg">
								<img data-src="index_files/4.jpg" src="index_files/4.jpg">
								<img data-src="index_files/5.jpg" src="index_files/5.jpg">
								<img data-src="index_files/6.jpg" src="index_files/6.jpg">
							</td>
						</tr>
						</tbody>
					</table>
				</ul>
				<div class="infoline"></div>
				<ul class="jian">
					<li class="info1">更多</li>
					<li class="info2"></li>
				</ul>
			</div>
			<a class="btn" id="send">發消息</a> <a class="btn">視頻聊天</a>
		</div>
		<div class="div m3" style="width: 480px; height: 848px;">
			<div class="wrapper wrapper1" style="height: 797px; background-image: url('http://big.1905.com/007/game/images/3/2.png'), url('http://big.1905.com/007/game/images/3/1.jpg');">
				<div class="scroller scroller1" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; -webkit-transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
					<div class="ls ls-left"></div>
					<div class="ls center">
						<div class="ls1">你已添加了007,現在可以開始聊天了。</div>
					</div>
					<div class="ls ls-left">
						<img data-src="index_files/6.jpg" class="headimg" src="index_files/6(1).jpg">
						<div class="kuang" style="padding: 12px;">
							我不是別人,我是007!我收到可靠消息,一個代號“幽靈黨”的邪惡組織預謀于11月13日潛入中國,有所企圖。為瓦解這個強大的組織,我需要你的幫忙,你愿意協助我嗎?
							<div class="san"></div>
						</div>
					</div>
					<div class="ls ls-left">
						<img data-src="index_files/6.jpg" class="headimg" src="index_files/6(1).jpg">
						<div class="kuang" style="padding: 12px;">
							“<span class="blue">愿意</span>”或“<span class="blue">不愿意</span>”
							<div class="san"></div>
						</div>
					</div>
					<div class="ls ls-left">
						<img data-src="index_files/6.jpg" class="headimg" src="index_files/6(1).jpg">
						<div class="kuang" style="padding: 12px;">
							為了快速了解你的能力,給你安排合適的任務,請你認真回答我以下的提問!
							<div class="san"></div>
						</div>
					</div>
					<div class="ls ls-left">
						<img data-src="index_files/6.jpg" class="headimg" src="index_files/6(1).jpg">
						<div class="kuang" style="padding: 12px;">
							1、中國有句名言:“知己知彼,方能百戰不殆”。你知道哪一枚是真正的“幽靈黨”戒指嗎?
							<div class="san"></div>
						</div>
					</div>
					<div class="ls ls-left">
						<img data-src="index_files/6.jpg" class="headimg" src="index_files/6(1).jpg">
						<div class="kuang" style="padding: 12px;">
							<img data-src="index_files/1a.jpg" class="qimg qimg1" src="index_files/1a.jpg">
							<div class="san"></div>
						</div>
					</div>
					<div class="ls ls-left">
						<img data-src="index_files/6.jpg" class="headimg" src="index_files/6(1).jpg">
						<div class="kuang" style="padding: 12px;">
							<img data-src="index_files/1b.jpg" class="qimg qimg1" src="index_files/1b.jpg">
							<div class="san"></div>
						</div>
					</div>
					<div class="ls ls-left">
						<img data-src="index_files/6.jpg" class="headimg" src="index_files/6(1).jpg">
						<div class="kuang" style="padding: 12px;">
							2、這次瓦解“幽靈黨”任務驚險刺激,需要真槍實彈大干一場,你想負責什么任務?
							<div class="san"></div>
						</div>
					</div>
					<div class="ls ls-left">
						<img data-src="index_files/6.jpg" class="headimg" src="index_files/6(1).jpg">
						<div class="kuang" style="padding: 12px;">
							<img data-src="index_files/2a.jpg" class="qimg" src="index_files/2a.jpg">
							<div class="san"></div>
						</div>
					</div>
					<div class="ls ls-left">
						<img data-src="index_files/6.jpg" class="headimg" src="index_files/6(1).jpg">
						<div class="kuang" style="padding: 12px;">
							<img data-src="index_files/2b.jpg" class="qimg" src="index_files/2b.jpg">
							<div class="san"></div>
						</div>
					</div>
					<div class="ls ls-left">
						<img data-src="index_files/6.jpg" class="headimg" src="index_files/6(1).jpg">
						<div class="kuang" style="padding: 12px;">
							3、一名特工不能因為欲望而失去了判斷力,你最有信心抵擋住哪種誘惑?
							<div class="san"></div>
						</div>
					</div>
					<div class="ls ls-left">
						<img data-src="index_files/6.jpg" class="headimg" src="index_files/6(1).jpg">
						<div class="kuang" style="padding: 12px;">
							<img data-src="index_files/3a.jpg" class="qimg" src="index_files/3a.jpg">
							<div class="san"></div>
						</div>
					</div>
					<div class="ls ls-left">
						<img data-src="index_files/6.jpg" class="headimg" src="index_files/6(1).jpg">
						<div class="kuang" style="padding: 12px;">
							<img data-src="index_files/3b.jpg" class="qimg" src="index_files/3b.jpg">
							<div class="san"></div>
						</div>
					</div>
					<div class="ls ls-left">
						<img data-src="index_files/6.jpg" class="headimg" src="index_files/6(1).jpg">
						<div class="kuang" style="padding: 12px;">
							4、想成為一名優秀的特工,要有臨危不亂的決斷能力,遇到危機時刻,有兩種逃生方式讓你選擇,你會選哪一個?
							<div class="san"></div>
						</div>
					</div>
					<div class="ls ls-left">
						<img data-src="index_files/6.jpg" class="headimg" src="index_files/6(1).jpg">
						<div class="kuang" style="padding: 12px;">
							<img data-src="index_files/4a.jpg" class="qimg" src="index_files/4a.jpg">
							<div class="san"></div>
						</div>
					</div>
					<div class="ls ls-left">
						<img data-src="index_files/6.jpg" class="headimg" src="index_files/6(1).jpg">
						<div class="kuang" style="padding: 12px;">
							<img data-src="index_files/4b.jpg" class="qimg" src="index_files/4b.jpg">
							<div class="san"></div>
						</div>
					</div>
					<div class="ls ls-left last">
						<img data-src="index_files/6.jpg" class="headimg" src="index_files/6(1).jpg">
						<div class="kuang over" style="padding: 12px;">
							恭喜你完成所有測試問題
							<div class="gx">
								<img data-src="index_files/0.jpg" class="qimg2" src="index_files/0(1).jpg">
								<span class="gray">點擊查看結果</span>
							</div>
							<div class="san"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="shuru">
				<img data-src="index_files/3.png" src="index_files/3(1).png">
				<input type="text" id="shuru" style="width: 364px;">
				<img data-src="index_files/4.png" class="nosend" src="index_files/4.png">
				<img data-src="index_files/5.png" class="nosend" src="index_files/5.png">
				<img data-src="index_files/6.png" class="send" src="index_files/6.png">
			</div>
		</div>
		<div class="div m4 imgbg" data-src="index_files/1.jpg" style="width: 480px; height: 848px; background: url('http://big.1905.com/007/game/images/4/1.jpg') 50% 0%;">
			<div class="s1"><img data-src="index_files/2.png" class="w100" src="index_files/2(2).png">
				<div class="st" style="display: none;">
					<img data-src="index_files/1.png" class="w100" src="index_files/1(2).png">
					<img data-src="index_files/1c.png" src="index_files/1c.png">
				</div>
				<div class="st" style="display: none;">
					<img data-src="index_files/2.png" class="w100" src="index_files/2(3).png">
					<img data-src="index_files/2c.png" src="index_files/2c.png">
				</div>
				<div class="st" style="display: block;">
					<img data-src="index_files/3.png" class="w100" src="index_files/3(2).png">
					<img data-src="index_files/3c.png" class="stimg" src="index_files/3c.png">
				</div>
			</div>
			<div class="s2"><img data-src="index_files/3.png" class="w100" id="te" src="index_files/3(3).png"></div>
		</div>
	</div>
	<div class="div bg share" style="width: 480px; height: 848px;">
		<img data-src="index_files/2.png" class="w100" src="index_files/2(4).png">
		<img data-src="index_files/1.png" class="w100" src="index_files/1(3).png">
	</div>
	<div class="div bg share2" style="width: 480px; height: 848px;">
		<div class="s s1"><img data-src="index_files/4.png" class="w100" src="index_files/4(1).png"></div>
		<div class="s s2">
			<img data-src="index_files/3.png" class="w100" src="index_files/3(4).png">
			<img data-src="index_files/5.png" id="close" src="index_files/5(1).png">
		</div>
	</div>
	<div class="div bg showimg" style="width: 480px; height: 848px;">
		<img data-src="index_files/4b.jpg" src="index_files/4b(1).jpg" style="width: 480px; margin-top: 53.125px;">
		<img data-src="index_files/5b.jpg" src="index_files/5b.jpg" style="width: 480px; margin-top: 263.875px;">
	</div>
	<div class="none">
		<audio src="index_files/message.mp3" id="msg"></audio>
		<audio src="index_files/msg.mp3" id="msg2"></audio>
		<input type="hidden" id="myHead" value="index_files/7.jpg">
	</div>
	<!-- js -->
	<!--<script src="index_files/hm.js"></script>-->
	<script>
		var shareTitle = "十萬火急,007請求加你為好友", shareDesc = "007需要你的幫忙,快去協助他吧!", shareLink = "http://big.1905.com/007/game/", shareImgurl = "http://big.1905.com/007/game/images/share.jpg";
		$.ajax({
			type:'get',
			url:'http://weixin.1905.com/Xhyxs/Public/getJssdkInfo?url='+encodeURI(window.location.href),
			dataType:'jsonp',
			jsonpCallback:'sharefunc',
			cache:false,
			success:function(data){
				wx.config({
					debug:false,
					appId:data.appid,
					timestamp:data.times,
					nonceStr:data.nonceStr,
					signature:data.signature,
					jsApiList:['onMenuShareTimeline', 'onMenuShareAppMessage']
				});
				var shareOptions = {
					title:shareTitle, // 分享標題
					desc:shareDesc, // 分享描述
					link:shareLink, // 分享鏈接
					imgUrl:shareImgurl, // 分享圖標
					type:'', // 分享類型,music、video或link,不填默認為link
					dataUrl:'', // 如果type是music或video,則要提供數據鏈接,默認為空
					success:function(msg){
						location.href = "http://m.dianying.baidu.com/activity/5zhounian/general?planId=v8k"
					}, cancel:function(msg){
					}
				};
				wx.ready(function(){
					wx.onMenuShareTimeline(shareOptions);
					wx.onMenuShareAppMessage(shareOptions);
				});
			},
			error:function(){
				//alert('數據獲取失敗,請稍后重試');
			}
		});
	</script>
	<input type="button" id="added_object_for_bi" style="display: none;"><input type="hidden" id="uvtext" value="1447230121937">
	<script type="text/javascript">
		function __sdonclick(btvalue){
			var obj_for_bi = document.getElementById("added_object_for_bi");
			if(obj_for_bi){
				obj_for_bi.value = btvalue;
				obj_for_bi.click()
			}
		}
	</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 圖片滑動 圖片滑塊
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子