jquery滑屏解鎖查看微信



82 327 110



特效描述:jquery 滑屏解鎖 查看微信,jquery滑屏解鎖查看微信

代碼結構

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>
						你收到一條好友請求
						<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

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

老夫子电子