js手機端商家列表頁面固定觸屏滑動效果



69 275 92



特效描述:js手機端 商家列表頁面 固定觸屏滑動效果,js手機頁面觸屏滑動,手機列表頁面滑動效果

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="font/iconfont.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/order.css">
<link rel="stylesheet" type="text/css" href="font/iconfont.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/order.css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>

3. HTML代碼

<!DOCTYPE html >
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>青創城檔口商戶大全</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0 , maximum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="favicon.ico" />
<script type="text/javascript" charset="utf-8">   
	$(function() {   		
		//菜單框架自動獲取高度
		var doc_H=$(document).height();	
		$('.Menu_box').height(doc_H);
		window.onresize=function(){
			var doc_H=$(document).height();	
			$('.Menu_box').height(doc_H);
		}
	});
	var myScroll_left;
	var myScroll_right;
	function loaded () {
		myScroll_left = new IScroll('#left_Menu', { mouseWheel: true, click: true });
		myScroll_right = new IScroll('#right_Menu', { mouseWheel: true, click: true });
	}
	document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>
</head>
<body onLoad="loaded()">
	<div id="warp" class="mg-auto overflow">
        <!--頭部開始-->
        <div id="header">
        	<div class="goback"><a href="javascript:history.go(-1);"><i class="iconfont">&#xf0115;</i></a></div>
            <div class="title">
            	<p>檔口商戶大全</p>
            </div>
        </div>
        <!--頭部結束-->
        <div class="order_tab">
        	<ul>
            	<li style="width:30%;" class="on">樓層</li>
                <li style="width:70%">入駐商家</li>
            </ul>
        </div>
        <!--菜單-->
		<div class="Menu_box">
        	<!---------左側菜單---------->
        	<div id="left_Menu">
                <div id="scroller">
                    <ul>
                        <li>
                            <a href="#"><h2>1樓</h2></a>
                        </li>
                        <li class="on">
                            <a href="#"><h2>2樓</h2></a>
                        </li>
                        <li>
                            <a href="#"><h2>3樓</h2></a>
                        </li>
                        <li>
                            <a href="#"><h2>4樓</h2></a>
                        </li>
                        <li>
                            <a href="#"><h2>5樓</h2></a>
                        </li>
                        <li>
                            <a href="#"><h2>6樓</h2></a>
                        </li>
                        <li>
                            <a href="#"><h2>1樓</h2></a>
                        </li>
                        <li>
                            <a href="#"><h2>2樓</h2></a>
                        </li>
                        <li>
                            <a href="#"><h2>3樓</h2></a>
                        </li>
                        <li>
                            <a href="#"><h2>4樓</h2></a>
                        </li>
                        <li>
                            <a href="#"><h2>5樓</h2></a>
                        </li>
                        <li>
                            <a href="#"><h2>6樓</h2></a>
                        </li>
                        <li>
                            <a href="#"><h2>1樓</h2></a>
                        </li>
                        <li>
                            <a href="#"><h2>2樓</h2></a>
                        </li>
                        <li>
                            <a href="#"><h2>3樓</h2></a>
                        </li>
                        <li>
                            <a href="#"><h2>4樓</h2></a>
                        </li>
                        <li>
                            <a href="#"><h2>5樓</h2></a>
                        </li>
                        <li>
                            <a href="#"><h2>6樓</h2></a>
                        </li>
                    </ul>
                </div>
            </div>
            <!---------右側側菜單---------->
            <div id="right_Menu">
                <div id="scroller2">
                    <ul>
                        <li>
                        	<bdo>207-208</bdo>
                            <p>F&C1988男裝服飾</p>
                        </li>
                        <li>
                        	<bdo>209</bdo>
                            <p>河星良品服飾</p>
                        </li>
                        <li>
                        	<bdo>207</bdo>
                            <p>弗奴蒙官方旗艦店</p>
                        </li>
                        <li>
                        	<bdo>213-215</bdo>
                            <p>賓克萊</p>
                        </li>
                        <li>
                        	<bdo>237</bdo>
                            <p>鑫海森服飾</p>
                        </li>
                        <li>
                        	<bdo>207-208</bdo>
                            <p>杉杉紳士品格</p>
                        </li>
                        <li>
                        	<bdo>207-208</bdo>
                            <p>迪人杰</p>
                        </li>
                        <li>
                        	<bdo>235</bdo>
                            <p>時來運轉</p>
                        </li>
                        <li>
                        	<bdo>232</bdo>
                            <p>競帥服飾</p>
                        </li>
                        <li>
                        	<bdo>230-231</bdo>
                            <p>石獅尊尚紡織品貿易有限公司石獅尊尚紡織品貿易有限公司</p>
                        </li>
                        <li>
                        	<bdo>226-227</bdo>
                            <p>晶典男裝</p>
                        </li>
                        <li>
                        	<bdo>220-224</bdo>
                            <p>英格吉里</p>
                        </li>
                        <li>
                        	<bdo>218-219</bdo>
                            <p>競帥服飾</p>
                        </li>
                        <li>
                        	<bdo>207-208</bdo>
                            <p>F&C1988男裝服飾</p>
                        </li>
                        <li>
                        	<bdo>209</bdo>
                            <p>河星良品服飾</p>
                        </li>
                        <li>
                        	<bdo>207</bdo>
                            <p>弗奴蒙官方旗艦店</p>
                        </li>
                        <li>
                        	<bdo>213-215</bdo>
                            <p>賓克萊</p>
                        </li>
                        <li>
                        	<bdo>237</bdo>
                            <p>鑫海森服飾</p>
                        </li>
                        <li>
                        	<bdo>207-208</bdo>
                            <p>杉杉紳士品格</p>
                        </li>
                        <li>
                        	<bdo>207-208</bdo>
                            <p>迪人杰</p>
                        </li>
                        <li>
                        	<bdo>235</bdo>
                            <p>時來運轉</p>
                        </li>
                        <li>
                        	<bdo>232</bdo>
                            <p>競帥服飾</p>
                        </li>
                        <li>
                        	<bdo>230-231</bdo>
                            <p>石獅尊尚紡織品貿易有限公司石獅尊尚紡織品貿易有限公司</p>
                        </li>
                        <li>
                        	<bdo>226-227</bdo>
                            <p>晶典男裝</p>
                        </li>
                        <li>
                        	<bdo>220-224</bdo>
                            <p>英格吉里</p>
                        </li>
                        <li>
                        	<bdo>218-219</bdo>
                            <p>競帥服飾</p>
                        </li>
                        <li>
                        	<bdo>207-208</bdo>
                            <p>F&C1988男裝服飾</p>
                        </li>
                        <li>
                        	<bdo>209</bdo>
                            <p>河星良品服飾</p>
                        </li>
                        <li>
                        	<bdo>207</bdo>
                            <p>弗奴蒙官方旗艦店</p>
                        </li>
                        <li>
                        	<bdo>213-215</bdo>
                            <p>賓克萊</p>
                        </li>
                        <li>
                        	<bdo>237</bdo>
                            <p>鑫海森服飾</p>
                        </li>
                        <li>
                        	<bdo>207-208</bdo>
                            <p>杉杉紳士品格</p>
                        </li>
                        <li>
                        	<bdo>207-208</bdo>
                            <p>迪人杰</p>
                        </li>
                        <li>
                        	<bdo>235</bdo>
                            <p>時來運轉</p>
                        </li>
                        <li>
                        	<bdo>232</bdo>
                            <p>競帥服飾</p>
                        </li>
                        <li>
                        	<bdo>230-231</bdo>
                            <p>石獅尊尚紡織品貿易有限公司石獅尊尚紡織品貿易有限公司</p>
                        </li>
                        <li>
                        	<bdo>226-227</bdo>
                            <p>晶典男裝</p>
                        </li>
                        <li>
                        	<bdo>220-224</bdo>
                            <p>英格吉里</p>
                        </li>
                        <li>
                        	<bdo>218-219</bdo>
                            <p>競帥服飾</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--菜單end-->
    </div>
</body>
</html>



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


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 文字滑動 文字滑塊
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子