125.Python修炼之路【130-前端-JQuery实例1】2018.08.02

其他 2018-08-06 09:06:26 阅读次数: 0

实例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>

猜你喜欢

转载自blog.csdn.net/youyouwuxin1234/article/details/81332081
今日推荐
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
周排行
阿里云短信服务平台注册
Windows下的字符串处理(1)
sqoop: mysql导入数据到hdfs, hive, hbase
commons.lang中常用的工具类
离线安装PostgreSQL11.6
使用PyTorch简单实现卷积神经网络模型
一文彻底搞定谱聚类
一道面试题引发的血案
One Chat for Mac(聊天工具)
TCP/IP的底层队列是如何实现的？
每日归档
更多
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022