WAP手机页面导航三区块滑动效果



119 472 158



特效描述:WAP 手机页面导航 三区块滑动效果,基于iscroll.js的WAP手机页面iscroll三区滑动导航效果,原版的iscroll.js文件有bug滑动区链接失效无法点击,修改了官方原版的iscroll.js后滑动区链接可以点击了,这个是用jq来动态计算li数量和宽高,实施项目非常有用。

代码结构

1. 引入JS

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script src="TouchSlide.js" ></script>
<script type="text/javascript" src="iscroll5.2.0.js"></script>

2. HTML代码

<div id="focus" class="focus">
	<div class="search-tools" id="search-url">
    	<span>输入你要搜索的商品名称</span>
    </div>
    <div class="bd">
        <div class="tempWrap" style="overflow:hidden; position:relative;">
            <ul id="Gallery" class="gallery" style="width: 2484px; position: relative; overflow: hidden; padding: 0px; margin: 0px; transition-duration: 200ms; transform: translate(-828px, 0px) translateZ(0px);">
                <li style="display: table-cell; vertical-align: top; width: 414px;">
                    <a href="http://www.bluenested.com" target="_blank"><img src="store_ad1.jpg" alt="1"></a>
                </li>
                <li style="display: table-cell; vertical-align: top; width: 414px;">
                    <a href="http://www.bluenested.com" target="_blank"><img src="store_ad2.jpg" alt="2"></a>
                </li>
                <li style="display: table-cell; vertical-align: top; width: 414px;">
                    <a href="http://www.bluenested.com" target="_blank"><img src="store_ad3.jpg" alt="3"></a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="top-scroll">
	<ul>
    	<li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
</div>
<div id="left-scroll">
	<ul>
    	<li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
        <li>H</li>
        <li>I</li>
        <li>J</li>
        <li>K</li>
        <li>L</li>
        <li>M</li>
        <li>N</li>
        <li>O</li>
        <li>P</li>
        <li>Q</li>
        <li>R</li>
        <li>S</li>
        <li>T</li>
        <li>U</li>
        <li>V</li>
        <li>W</li>
        <li>X</li>
        <li>Y</li>
        <li>Z</li>
    </ul>
</div>
<div id="right-scroll">
	<ul>
    	<li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li><a href="http://www.bluenested.com" target="_blank">BlueNested.com</a></li>
    </ul>
</div>
<script type="text/javascript">
/*banner滚动图片*/
                TouchSlide({
                    slideCell : "#focus",
                    //titCell : ".hd ul", // 开启自动分页 autoPage:true ,此时设置 titCell 为导航元素包裹层
                    mainCell : ".bd ul",
                    effect : "leftLoop",
                    autoPlay : true, // 自动播放
                    //autoPage : true, // 自动分页
                    delayTime: 200, // 毫秒;切换效果持续时间(执行一次效果用多少毫秒)
                    interTime: 2500, // 毫秒;自动运行间隔(隔多少毫秒后执行下一个效果)
                    //switchLoad : "_src" // 切换加载,真实图片路径为"_src"
                });
//单击搜索框跳转到专用搜索页面
$("#search-url").click(function (){
    window.location.href="tmpl/search.html";
});
//-------
$(document).ready(function(){
	//动态获取li总宽度后用jq重置ul宽度
	//top
	var top_size = $("#top-scroll ul li").outerWidth(true);//获取元素整个占位宽度包含padding、margin和border
	var top_li_num = $("#top-scroll ul li").size();//获取li的数量
	var top_ul_width = top_size * top_li_num;//ul的宽度=li数量*单个li宽度
	$("#top-scroll ul").css({'width':top_ul_width});
	var topScroll;
	topScroll = new IScroll('#top-scroll',{ 
		scrollX: true,//横向滚动
		scrollbars: false,//是否显示滚动条
		//click:true
	},100);
	//left
	var left_size = $("#left-scroll ul li").outerHeight(true);//获取元素整个占位宽度包含padding、margin和border
	var left_li_num = $("#left-scroll ul li").size();//获取li的数量
	var left_ul_height = left_size * left_li_num;//ul的宽度=li数量*单个li宽度
	$("#left-scroll ul").css({'height':left_ul_height});
	var leftScroll;
	leftScroll = new IScroll('#left-scroll',{ 
		scrollY: true,//横向滚动
		scrollbars: false,//是否显示滚动条
		//click:true
	},100);
	//right
	var right_size = $("#right-scroll ul li").outerHeight(true);//获取元素整个占位宽度包含padding、margin和border
	var right_li_num = $("#right-scroll ul li").size();//获取li的数量
	var right_ul_height = right_size * right_li_num;//ul的宽度=li数量*单个li宽度
	$("#right-scroll ul").css({'height':right_ul_height});
	var rightScroll;
	rightScroll = new IScroll('#right-scroll',{ 
		scrollY: true,//横向滚动
		scrollbars: false,//是否显示滚动条
		//click:true
	},100);
	//-----
})
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动导航菜单 二级导航菜单 滑动选项卡切换 下拉导航菜单 图片滑动 竖直导航菜单 文字滑动 图标导航菜单 滑动手风琴 固定导航菜单 滑动星星打分 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滑动滑过 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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