js手机端商家列表页面固定触屏滑动效果



67 264 89



特效描述: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

加群请备注:从官网了解到