导航栏特效（活动）

来源：互联网发布：数控车床编程语言编辑：程序博客网时间：2024/05/22 02:21

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title>移动端触摸滑动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi = medium-dpi">
<meta name="format-detection" content="telephone=no">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
* {
margin: 0;
padding: 0;
}

html,
body {
width: 100%;
height: 100%;
background-color: #ccc;
}

.nav {
position: relative;
width: 100%;
height: 50px;
overflow: hidden;
background: red;
}

.current {
position: relative;
}

.current:after {
content: "";
position: absolute;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-bottom: 10px solid #000;
top: 39px;
z-index: 30;
-webkit-transition: left .2s linear;
/* -webkit-transition: background .2s linear; */
left: 45%;
}

.zhi {
content: "";
position: absolute;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-bottom: 10px solid #000;
top: 39px;
z-index: 30;
-webkit-transition: left .2s linear;
/* -webkit-transition: background .2s linear; */
left: 10%;
}

.nav .zhi1 {
content: "";
position: absolute;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-bottom: 10px solid #000;
background-color: #fff;
top: 39px;
z-index: 30;
-webkit-transition: left .2s linear;
/* -webkit-transition: background .2s linear; */
left: 1%;
width: 0px;
display: none;
}

.nav >div {
line-height: 50px;
}

.nav .index {
width: 25%;
text-align: center;
position: absolute;
z-index: 10;
background-color: #fff;
}

.nav .nav_list {
height: 50px;
width: 1000%;
margin-left: 25%;
background: red;
-webkit-transition: margin .2s linear;
position: relative;
}

.nav .nav_list >div {
display: inline-block;
width: 2.5%;
text-align: center;
float: left;
}

.cnt:after {
content: '';
display: block;
visibility: hidden;
clear: both;
}

li {
list-style: none;
}

.m-slider {
margin: 0px 20px;
overflow: hidden;
min-height: 100%;
}

.m-slider .cnt {
position: relative;
left: 0;
width: 40000px;
height: 562px;
}

.m-slider .cnt li {
float: left;
width: 600px;
}

.m-slider .cnt img {
display: block;
width: 100%;
height: 450px;
}

.m-slider .cnt p {
margin: 20px 0;
}

.m-slider .icons {
text-align: center;
color: #000;
}

.m-slider .icons span {
margin: 0 5px;
}

.m-slider .icons .curr {
color: red;
}

.f-anim {
-webkit-transition: left .2s linear;
}
</style>
</head>

<body>
<div class="m-slider">
<div class="nav">
<div class="index" data-id='0'>新闻</div>
<div class="nav_list" id="second">
<div data-id='1'>社会</div>
<div data-id='2'>军事</div>
<div data-id='3'>国内</div>
<div data-id='4'>国际</div>
<div data-id='5'>历史</div>
<div data-id='6'>海外趣事</div>
<em class="zhi1" id="zhi1"></em>
</div>
<div class="zhi" id="zhi"></div>
</div>
<ul class="cnt" id="slider">
<li>
<img src="http://imglf1.ph.126.net/qKodH3sZoVbPalKFtHS9mw==/6608946691259322175.jpg">
<p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p>
</li>
<li>
<img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg">
<p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p>
</li>
<li>
<img src="http://imglf0.ph.126.net/Jnmi2y51zVdjKAYlibtpFw==/3068640196117481166.jpg">
<p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p>
</li>
<li>
<img src="http://imglf1.ph.126.net/79GPsjhwiIj8e-0nP5MsEQ==/6619295294699949331.jpg">
<p>海洋星球3重庆天气热得我想卧轨自杀</p>
</li>
<li>
<img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg">
<p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p>
</li>
<li>
<img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg">
<p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p>
</li>
<li>
<img src="http://imglf1.ph.126.net/40-jqH_j6EoCWnZOixY2pA==/4798022453110310215.jpg">
<p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p>
</li>
</ul>
<div class="icons" id="icons">
<span class="curr">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
</div>
</div>
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script>
var dem = document.getElementById('slider');
var slider = {
//判断设备是否支持touch事件
touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
slider: this.dem,
//修改页面状态
page_style:{

},
//事件
events: {
index: 0, //显示元素的索引
slider: this.dem, //this为slider对象
icons: document.getElementById('icons'),
icon: this.icons.getElementsByTagName('span'),
zhi1: document.getElementById("zhi1"),
zhi: document.getElementById("zhi"),
nav: document.getElementById("second"),
handleEvent: function(event) {
console.log('events');
var self = this; //this指events对象
if (event.type == 'touchstart') {
self.start(event);
} else if (event.type == 'touchmove') {
self.move(event);
} else if (event.type == 'touchend') {
self.end(event);
}
},
//滑动开始
start: function(event) {
console.log('strat');
var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
startPos = {
x: touch.pageX,
y: touch.pageY,
time: +new Date
}; //取第一个touch的坐标值
isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
this.slider.addEventListener('touchmove', this, false);
this.slider.addEventListener('touchend', this, false);
},
//移动
move: function(event) {
console.log('move');
//当屏幕有多个touch或者页面被缩放过，就不执行move操作
if (event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
var touch = event.targetTouches[0];
endPos = {
x: touch.pageX - startPos.x,
y: touch.pageY - startPos.y
};
isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动
if (isScrolling === 0) {
event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
this.slider.className = 'cnt';
this.slider.style.left = -this.index * 600 + endPos.x + 'px';
console.log();
}
console.log(this.index + "dd");
},
//滑动释放
end: function(event) {
console.log('end');
var self = this;
var duration = +new Date - startPos.time; //滑动的持续时间
if (isScrolling === 0) { //当为水平滚动时
this.icon[this.index].className = '';
if (Number(duration) > 2) {
//判断是左移还是右移，当偏移量大于10时执行
if (endPos.x > 10) {
/*$("#zhi").css('display', 'block');*/
$('.current').removeClass('current');
if (this.index !== 0) {
this.index -= 1;
};
} else if (endPos.x < -10) {
if (this.index !== this.icon.length - 1) {
this.index += 1;
};
/* $("#zhi").css('display', 'block');*/
$('.current').removeClass('current');
}
}
this.junli = endPos.x;
this.icon[this.index].className = 'curr';
this.slider.className = 'cnt f-anim';
this.slider.style.left = -this.index * 600 + 'px';

//二级列表动
if (this.index >= 3) {
this.nav.style.marginLeft = -(this.index - 3) * 26 - 4 + '%';
var clear1 = setTimeout(function() {
clearTimeout(clear1);
clear = null;
self.zhi1.style.left = (self.index - 1) * 2.5 + 1 + '%';
}, 100);
} else {
//指针效果
if (endPos.x > 0 && this.index == 2) {
this.nav.style.marginLeft = '25%';
}
if (this.index >= 1) {
this.zhi.style.left = (this.index - 1) * 28 + 35 + '%';
if (this.index == 1) {
var clear = setTimeout(function() {
clearTimeout(clear);
clear = null;
$("#zhi").css('display', 'none');
$("#zhi1").css('display', 'block');
}, 300)
}
this.zhi1.style.left = (this.index - 1) * 2.5 + 1 + '%';
} else {
$("#zhi").css('display', 'block');
$("#zhi1").css('display', 'none');
var clear2 = setTimeout(function() {
clearTimeout(clear2);
clear2 = null;
self.zhi.style.left = self.index * 25 + 10 + '%';
}, 100);

}
}

}
//修改标题
if (this.index !== 0) {
$('[data-id="' + this.index + '"]').css('background-color', '#fff').siblings().css('background-color', 'red');
$('.zhi1').css('background', 'none');
$('[data-id="0"]').css('background-color', 'red');
} else {
$('[data-id="' + this.index + '"]').css('background-color', '#fff');
$('.nav_list > div:first').css('background-color', 'red');
}
//修改状态
if (this.index !== 0) {
$('.zhi1').css('display', 'block');
} else {
$('.zhi').css('display', 'block');
}
//解绑事件
this.slider.removeEventListener('touchmove', this, false);
this.slider.removeEventListener('touchend', this, false);

}
},
//点击事件
click_page: function() {
var self = this;
$('.index').on('click', xiu);
$('.nav_list >div').on('click', xiu);

function xiu() {
$("#zhi").css('display', 'none');
$("#zhi1").css('display', 'none');
self.events.index = parseInt($(this).attr('data-id'), 10);
self.events.icon[self.events.index].className = 'curr';
self.events.slider.className = 'cnt f-anim';
self.events.slider.style.left = -self.events.index * 600 + 'px';
//
if ($(this).hasClass('index')) {
$('.nav_list>div').removeClass('current');
} else {
$(this).parent().parent().find('.index').removeClass('current');
if (!$(this).hasClass('current')) {
$(this).addClass('current').siblings().removeClass('current');
}
}
$(this).addClass('current');
//修改标题
if (self.events.index !== 0) {
$('[data-id="' + self.events.index + '"]').css('background-color', '#fff').siblings().css('background-color', 'red');
$('.zhi1').css('background', 'none');
$('[data-id="0"]').css('background-color', 'red');
} else {
$('[data-id="' + self.events.index + '"]').css('background-color', '#fff');
$('.nav_list > div:first').css('background-color', 'red');
}
//修改指针位置
//二级列表动
if (self.events.index >= 3) {
self.events.nav.style.marginLeft = -(self.events.index - 3) * 26 - 4 + '%';
var clear1 = setTimeout(function() {
clearTimeout(clear1);
clear = null;
self.events.zhi1.style.left = (self.events.index - 1) * 2.5 + 1 + '%';
}, 100);
} else {
//指针效果
if (self.events.junli > 0 && self.events.index == 2) {
self.events.nav.style.marginLeft = '25%';
}
if (self.events.index >= 1) {
self.events.zhi.style.left = (self.events.index - 1) * 28 + 35 + '%';
self.events.zhi1.style.left = (self.events.index - 1) * 2.5 + 1 + '%';
} else {
var clear2 = setTimeout(function() {
clearTimeout(clear2);
clear2 = null;
self.events.zhi.style.left = self.events.index * 25 + 10 + '%';
}, 100);

}
}
}
},
//初始化
init: function() {
console.log('init');
var self = this; //this指slider对象
if (!!self.touch) {
self.slider.addEventListener('touchstart', self.events, false);
self.click_page();
console.log('支持');
} //addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性
}
};
slider.init();
</script>
</body>

</html>

0 0