125.Python修炼之路【130-前端-JQuery实例1】2018.08.02
丌官嘉良
实例1
1、层级菜单 2、选项卡 3、置顶菜单-滚动到顶部 4、整屏滚动 5、无缝滚动 6、手风琴效果
01、层级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级菜单</title>
<style type="text/css">
body{
font-family:'Microsoft Yahei';
}
body,ul{
margin:0px;
padding:0px;
}
ul{list-style:none;}
.menu{
width:200px;
margin:20px auto 0;
}
.menu .level1,.menu li ul a{
display:block;
width:200px;
height:30px;
line-height:30px;
text-decoration:none;
background-color:#3366cc;
color:#fff;
font-size:16px;
text-indent:10px;
}
.menu .level1{
border-bottom:1px solid #afc6f6;
}
.menu li ul a{
font-size:14px;
text-indent:20px;
background-color:#7aa1ef;
}
.menu li ul li{
border-bottom:1px solid #afc6f6;
}
.menu li ul{
display:none;
}
.menu li ul.current{
display:block;
}
.menu li ul li a:hover{
background-color:#f6b544;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
/*
$('.level1').click(function() {
$(this).next().toggleClass('current');
});
*/
/*
$('.level1').click(function() {
$(this).next().slideToggle();
});
*/
$('.level1').click(function() {
$(this).next().slideDown().parent().siblings().children('ul').slideUp();
});
});
</script>
</head>
<body>
<ul class="menu">
<li>
<a href="#" class="level1">水果</a>
<ul class="current">
<li><a href="#">苹果</a></li>
<li><a href="#">梨子</a></li>
<li><a href="#">葡萄</a></li>
<li><a href="#">火龙果</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">海鲜</a>
<ul>
<li><a href="#">蛏子</a></li>
<li><a href="#">扇贝</a></li>
<li><a href="#">龙虾</a></li>
<li><a href="#">象拔蚌</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">肉类</a>
<ul>
<li><a href="#">内蒙古羊肉</a></li>
<li><a href="#">进口牛肉</a></li>
<li><a href="#">野猪肉</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">蔬菜</a>
<ul>
<li><a href="#">娃娃菜</a></li>
<li><a href="#">西红柿</a></li>
<li><a href="#">西芹</a></li>
<li><a href="#">胡萝卜</a></li>
</ul>
</li>
<li>
<a href="#" class="level1">速冻</a>
<ul>
<li><a href="#">冰淇淋</a></li>
<li><a href="#">湾仔码头</a></li>
<li><a href="#">海参</a></li>
<li><a href="#">牛肉丸</a></li>
</ul>
</li>
</ul>
</body>
</html>
02、选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.btns{
width:500px;
height:50px;
}
.btns input{
width:100px;
height:50px;
background-color:#ddd;
color:#666;
border:0px;
}
.btns input.cur{
background-color:gold;
}
.contents div{
width:500px;
height:300px;
background-color: gold;
display:none;
line-height:300px;
text-align:center;
}
.contents div.active{
display: block;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btns input').click(function() {
// this是原生的对象
$(this).addClass('cur').siblings().removeClass('cur');
//$(this).index() 获取当前按钮所在层级范围的索引值
$('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
});
})
</script>
</head>
<body>
<div class="btns" id="btns">
<input type="button" value="tab01" class="cur">
<input type="button" value="tab02">
<input type="button" value="tab03">
</div>
<div class="contents" id="contents">
<div class="active">tab文字内容一</div>
<div>tab文字内容二</div>
<div>tab文字内容三</div>
</div>
</body>
</html>03、整屏滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>整页滚动</title>
<link rel="stylesheet" type="text/css" href="css/test.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function(){
var $h = $(window).height();
var $pages = $('.pages');
$pages.css({height:$h});
var $points = $('.points li');
var nowscreen = 0;
var timer = null;
$pages.eq(0).addClass('moving');
$(window).mousewheel(function(ev,dat){
clearTimeout(timer);
timer = setTimeout(function(){
if(dat==-1)
{
nowscreen++;
}
else
{
nowscreen--;
}
if(nowscreen<0)
{
nowscreen=0;
}
if(nowscreen>4)
{
nowscreen=4
}
$('.pages_con').animate({top:-nowscreen*$h},300);
$pages.eq(nowscreen).addClass('moving').siblings().removeClass('moving');
$points.eq(nowscreen).addClass('active').siblings().removeClass('active');
},200)
})
$points.click(function(event) {
var nowindex = $(this).index();
$('.pages_con').animate({top:-nowindex*$h},300);
$pages.eq(nowindex).addClass('moving').siblings().removeClass('moving');
$points.eq(nowindex).addClass('active').siblings().removeClass('active');
});
})
</script>
</head>
<body>
<div class="pages_con">
<div class="pages page1">
<div class="main_con">
<div class="left_img"><img src="images/001.png"></div>
<div class="right_info">
Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
</div>
</div>
</div>
<div class="pages page2">
<div class="main_con">
<div class="right_img"><img src="images/002.png"></div>
<div class="left_info">
2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
</div>
</div>
</div>
<div class="pages page3">
<div class="main_con">
<div class="left_img"><img src="images/004.png"></div>
<div class="right_info">
以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
</div>
</div>
</div>
<div class="pages page4">
<div class="main_con">
<div class="left_img"><img src="images/003.png"></div>
<div class="right_info">
Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
</div>
</div>
</div>
<div class="pages page5">
<div class="main_con">
<div class="center_img"><img src="images/005.png"></div>
</div>
</div>
</div>
<ul class="points">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>04、置顶菜单-滚动到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>置顶菜单</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function() {
var nowTop = $(document).scrollTop();
if(nowTop>200){
$('.menu').css({
position:'fixed',
left:'50%',
top:0,
marginLeft:-480
});
$('.menu_pos').show();
}
else{
$('.menu').css({
position:'static',
marginLeft:'auto'
});
$('.menu_pos').hide();
}
if(nowTop>400){
$('.totop').fadeIn();
}
else{
$('.totop').fadeOut();
}
});
$('.totop').click(function() {
$('html,body').animate({'scrollTop':0});
});
})
</script>
<style type="text/css">
body{margin:0px;}
.logo_bar{
width:960px;
height:200px;
background-color:#f0f0f0;
margin:0 auto;
}
.menu,.menu_pos{
width:960px;
height:50px;
margin:0 auto;
background-color:gold;
text-align:center;
line-height:50px;
}
.menu_pos{
display:none;
}
.down_con{
width:960px;
height:1800px;
margin:0 auto;
}
.down_con p{
margin-top:100px;
text-align:center;
}
.totop{
width:50px;
height:50px;
background:url(images/up.png) center center no-repeat #000;
border-radius:50%;
position:fixed;
right:50px;
bottom:50px;
display:none;
}
</style>
</head>
<body>
<div class="logo_bar">顶部logo</div>
<div class="menu">置顶菜单</div>
<div class="menu_pos"></div>
<div class="down_con">
<p style="color:red">网站主内容</p>
<p>网站主内容</p>
<p>网站主内容</p>
<p>网站主内容</p>
<p>网站主内容</p>
</div>
<a href="javascript:;" class="totop"></a>
</body>
</html>05、无缝滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
body,ul,li{margin:0;padding:0}
ul{list-style:none;}
.slide{
width:500px;
height:100px;
border:1px solid #ddd;
margin:20px auto 0;
position:relative;
overflow:hidden;
}
.slide ul{
position:absolute;
width:1000px;
height:100px;
left:0;
top:0;
}
.slide ul li{
width:90px;
height:90px;
margin:5px;
background-color:#ccc;
line-height:90px;
text-align: center;
font-size:30px;
float:left;
}
.btns{
width:500px;
height:50px;
margin:10px auto 0;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $ul = $('#slide ul');
var left = 0;
var deraction = 2;
$ul.html($ul.html()+$ul.html());
var timer = setInterval(move,30);
function move(){
left-=deraction;
if(left<-500){
left = 0;
}
if(left>0){
left=-500;
}
$ul.css({left:left});
}
$('#btn1').click(function(){
deraction = 2;
});
$('#btn2').click(function(){
deraction = -2;
})
$('#slide').mouseover(function(){
clearInterval(timer);
})
$('#slide').mouseout(function(){
timer = setInterval(move,30);
})
})
</script>
</head>
<body>
<div class="btns">
<input type="button" name="" value="向左" id="btn1">
<input type="button" name="" value="向右" id="btn2">
</div>
<div class="slide" id="slide">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>06、手风琴效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<style>
*{margin:0;padding:0;}
body{font-size:12px;}
#accordion{width:727px; height:350px; margin:100px auto 0 auto; position:relative; overflow:hidden; border:1px solid #CCC;}
#accordion ul{list-style:none;}
#accordion ul li{width:643px;height:350px; position:absolute; background:#FFF;}
#accordion ul li span{display:block;width:20px; height:350px; float:left; text-align:center; color:#FFF; padding-top:5px; cursor:pointer;}
#accordion ul li img{display:block; float:right;}
.bar01{left:0px;}
.bar02{left:643px;}
.bar03{left:664px;}
.bar04{left:685px;}
.bar05{left:706px;}
.bar01 span{background:#09E0B5;}
.bar02 span{background:#3D7FBB;}
.bar03 span{background:#5CA716;}
.bar04 span{background:#F28B24;}
.bar05 span{background:#7C0070;}
</style>
<script type="text/javascript">
$(function(){
$('#accordion li').click(function() {
$(this).animate({left:$(this).index()*21});
$(this).prevAll().each(function(){
$(this).animate({left:$(this).index()*21});
});
$(this).nextAll().each(function(){
$(this).animate({left:(727-(5-$(this).index())*21)});
});
});
})
</script>
<title>手风琴效果</title>
</head>
<body>
<div id="accordion">
<ul>
<li class="bar01"><span>非洲景色01</span><img src="images/001.jpg" /></li>
<li class="bar02"><span>非洲景色02</span><img src="images/002.jpg" /></li>
<li class="bar03"><span>非洲景色03</span><img src="images/003.jpg" /></li>
<li class="bar04"><span>非洲景色04</span><img src="images/004.jpg" /></li>
<li class="bar05"><span>非洲景色05</span><img src="images/005.jpg" /></li>
</ul>
</div>
</body>
</html>
类似资料：