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



82 325 109



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



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


热门标签: flash导航菜单 flash导航条 flash导航 flash菜单 flash下拉菜单 flash下拉导航菜单 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 收缩菜单 收缩导航 右键菜单 导航切换 菜单切换 浮动菜单 浮动导航 滑动导航菜单 滑动导航 滑动菜单 滚动导航菜单 滚动菜单 滚动导航 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 导航菜单 导航条 菜单栏 导航栏 分类导航 响应式导航条 响应式导航 滑动导航菜单 滑动导航 滑动菜单 图片滑动 图片滑块 导航菜单插件 导航插件 菜单插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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