24-[jQuery]-案例
1、仿淘宝导航栏案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿淘宝导航栏案例</title>
<style type="text/css">
*{padding: 0;margin: 0;}
div{width: 100%;}
div img{width: 100%;}
.nav{display: none;}
</style>
</head>
<body>
<div class="top">
<img src="data:images/top.jpg" alt="" /> </div>
<div class="nav">
<img src="data:images/nav.jpg"/>
</div>
<div class= 'taobao'>
<img src="data:images/taobao1.png"/>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
var h = $('.top').height();
$(document).scroll(function () {
var scrollTop = $(document).scrollTop(); if(h<scrollTop){
$('.nav').css({display:'block',position:'fixed',top:0});
}else{
$('.nav').css({display:'none',position:'static',top:0});
}
})
}) </script>
</html>
2、选项卡嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡嵌套</title>
<style type="text/css">
*{padding: 0;margin: 0;}
ul{
list-style: none;
}
/*清除浮动产生的问题*/
#box:after{
content: "";
display: block;
clear: both;
}
#box{width: 800px;border: 1px solid black;margin: 20px auto;background: blue;}
#leftBox{width: 200px;float: left;}
#leftBox li{width: 200px;height: 89px;background: red;margin-bottom: 2px;color: white;font: 50px/89px "黑体"; text-align: center;}
#rightBox div{display: none;float: left; width: 600px;}
#rightBox p{width:100%;height: 325px;font: 100px/325px "黑体";text-align: center;background: greenyellow } /*父元素设置display：table使它成为一个块级表格元素 * 子元素设置display：table-cell使子元素成为表格单元格，就好比是在表格中一样*/
#rightBox ul{width: 600px;display: table;} #rightBox li{display: table-cell;background: purple;height: 40px;border-right: 2px solid blue;
font: 30px/40px "黑体";text-align: center;color: white;}
#leftBox .active{background: yellow;color: black;}
#rightBox .active{background: white;color: black;} </style>
</head>
<body>
<div id="box">
<ul id="leftBox">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<div id="rightBox">
<div style="display: block">
<p>a1</p>
<ul>
<li class="active">a1</li>
<li>a2</li>
<li>a3</li>
<li>a4</li>
</ul>
</div>
<div>
<p>b1</p>
<ul>
<li class="active">b1</li>
<li>b2</li>
<li>b3</li>
<li>b4</li>
</ul>
</div>
<div>
<p>c1</p>
<ul>
<li class="active">c1</li>
<li>c2</li>
<li>c3</li>
<li>c4</li>
<li>c5</li>
<li>c6</li>
</ul>
</div>
<div>
<p>d1</p>
<ul>
<li class="active">d1</li>
<li>d2</li>
<li>d3</li>
<li>d4</li>
</ul>
</div>
</div>
</div> </body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
//鼠标移入得时候
$('#leftBox li').mouseover(function () {
$(this).addClass('active').siblings('li').removeClass('active'); //修改右边得div
$('#rightBox div').eq($(this).index()).show().siblings('div').hide();
}); $('#rightBox li').click(function () {
$(this).addClass('active').siblings('li').removeClass('active'); $(this).parent().prev().html($(this).html()); }) </script>
</html>
3、小米官网案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米官网手风琴</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{list-style: none;}
.wrap{width: 980px;height: 612px;margin: 20px auto;background: #f4f3f4;border: 1px solid gray;}
ul li{float: left;margin-left: 10px;position: relative;overflow: hidden;width: 233px;height: 300px;}
ul li p{
width: 233px;
height: 100px;
background: rgba(245,102,51,.7);
position: absolute;
bottom: -100px;
text-align: center;
color: white;
line-height: 100px; }
</style>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="#"><img src="data:images/xiaomi_01.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="data:images/xiaomi_02.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="data:images/xiaomi_03.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="data:images/xiaomi_04.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="data:images/xiaomi_05.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="data:images/xiaomi_07.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="data:images/xiaomi_08.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="data:images/xiaomi_09.png"/></a><p>百度一下，你就知道</p></li>
</ul>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript"> //mouserenter 进入 mouseleave 离开 $('.wrap li').hover(function () {
$(this).children('p').stop(true).animate({bottom:'0px'},100); // 先停止 在启动动画
},function () {
$(this).children('p').stop(true).animate({bottom:'-100px'},100)
}) </script>
</html>
4、焦点轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点轮播图</title>
<style type="text/css">
*{padding: 0;margin: 0;}
ul,ol{list-style: none;} #wrap{width: 650px;height: 250px;margin: 100px auto 0;background: red;overflow: hidden;position: relative;}
/*#wrap img{display: block;}*/
#wrap ul{height: 250px;position: relative;z-index: 1;}
#wrap ol{height: 30px;position: absolute;z-index: 2;bottom: 0;right: 0;} #wrap>ul>li{
position: absolute;
top:0;
left: 0;
} #wrap>ol>li{
float: left;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border: 1px solid white;
background: gray;
margin-right: 5px;
}
#wrap>ol>li:hover{
/*设置鼠标形状*/
cursor: pointer;
} #wrap li.active{
padding: 2px;
color: orange;
margin-top: -4px;
border: 1px solid orange;
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<!--设置绝对定位之后 脱离标准流 最后一个盒子层级提升了-->
<li style="z-index: 1;"><a href="#"><img src="./images/01.jpg"/></a></li>
<li><a href="#"><img src="./images/02.jpg"/></a></li>
<li><a href="#"><img src="./images/03.jpg"/></a></li>
<li><a href="#"><img src="./images/04.jpg"/></a></li>
<li><a href="#"><img src="./images/05.jpg"/></a></li> </ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
//控制层级关系得索引
var index = 0;
$('#wrap>ol>li').mouseenter(function () {
index++;
//修改下标class
$(this).addClass('active').siblings('li').removeClass('active'); //修改图片
$('#wrap>ul>li').eq($(this).index()).css({'left':'650px','z-index':index}).animate({'left':'0'},1000) })
})
</script>
</html>
5、动态实现轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
ul{list-style: none;} #box{
/*图片的宽高 240px 180px*/
width: 240px;
height: 180px;
position: relative;
margin: 50px auto;
overflow: hidden; } ul{
width: 960px;
position: absolute;
}
ul li{
float: left; } p{
position: absolute;
left: 80px;
bottom: 30px;
}
p span{
color: red;
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
cursor: pointer; }
p span.active{
color: white;
background: greenyellow;
} </style>
</head>
<body>
<div id="box">
<ul>
<!--显示轮播的图片-->
<!--<li><img src="01.jpg" alt="" /></li>
<li><img src="01.jpg" alt="" /></li>
<li><img src="01.jpg" alt="" /></li>
<li><img src="01.jpg" alt="" /></li>-->
</ul>
<p>
<!--显示索引-->
</p> </div>
<button id="play">轮播吧！</button>
<button id="stop">暂停！</button> </body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function(){ //1.获取本地的图片数据 以后再后面的课程中这些数据会从后端服务器获取
var imgArr = ['./01.jpg','./02.jpg','./03.jpg','./04.jpg']; //2.动态的生成图片
for(var i = 0; i < imgArr.length;i++){ $('ul').append("<li><img src="+imgArr[i]+"></li>")
} //3.生成索引
var str = '';
$('li').each(function(i,ele){ str += "<span>"+(i+1)+"</span>" });
console.log(str);
$('p').html(str); //4.默认设置索引的第一个active
$('span:first').addClass('active'); var index = 0;
//5.点击索引
$('span').click(function(){ $(this).addClass('active').siblings('span').removeClass('active'); //获取我当前点击的索引
index = $(this).index(); // $('ul').css("left",-240*index); $('ul').animate({
left:-240*index
},100) }); var timer = null;
$('#play').click(function(){ //0.开启定时器 1.索引跟着走 2.图片跟着走
timer = setInterval(next,1000) function next(){ if(index == $('li').length-1){ //图片到头了了 到第四张
index = 0; //修改span的第一个active
$('p span').eq(index).addClass('active').siblings('span').removeClass('active'); //修改ul的样式
$('ul').css('left',0); }else{
index++;
console.log(index);
//修改后三个span标签的active
$('p span').eq(index).addClass('active').siblings('span').removeClass('active');
$('ul').css('left',-240*index); } }
}); //6.关闭定时器
$("#stop").click(function(){
clearInterval(timer);
}) }) </script>
</html>
24-[jQuery]-案例的更多相关文章
- python 学习笔记十四 jQuery案例详解（进阶篇）
1.选择器和筛选器 案例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- Python之路【第十二篇续】jQuery案例详解
jQuery 1.jQuery和JS和HTML的关系 首先了HTML是实际展示在用户面前的用户可以直接体验到的,JS是操作HTML的他能改变HTML实际展示给用户的效果! 首先了解JS是一门语言,他是 ...
- JQuery案例一：实现表格隔行换色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery案例2
$(this).index用来获取取到的所有元素的序号 省市联动 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xh ...
- jquery案例
调用js成员 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>& ...
- 黑马day16 jquery案例演示
案例一: <html> <head> <meta http-equiv="Content-Type" content="text/html; ...
- JQuery案例：折叠菜单
折叠菜单(jquery) <html> <head> <meta charset="UTF-8"> <title>accordion ...
- Jquery案例——某网站品牌列表的效果
一下是效果图.点击"显示全部品牌",高亮推荐品牌,并显示全部品牌. HTML文件: <!DOCTYPE html> <html lang="en&quo ...
- 24 AIDL案例
服务端 MainActivity.java package com.qf.day24_aidl_wordserver; import android.app.Activity; import andr ...
- JQuery案例二：实现全选、全不选和反选
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- 转：未能打开编辑器：Unmatched braces in the pattern.
原文地址:http://blog.csdn.net/hytdsky/article/details/4736462 Eclipse出现这个问题而不能查看源代码 原因就是语言包的问题 出现这个问题了 ...
- IntelliJ IDEA2017/2018 激活方法 破解补丁激活(亲测可用)（注册码方法以和谐）
IntelliJ IDEA2017 激活方法(注册码方法以和谐): 搭建自己的授权服务器,对大佬来说也很简单,我作为菜鸟就不说了,网上有教程. 我主要说第二种,现在,直接写入注册码,是不能成功激活的( ...
- .net 和 core 数据库连接字符串
Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\aspnet-xxxx.mdf;Initial Catalog= ...
- My Heart Will Go On（我心永恒）
My Heart Will Go On(我心永恒) 歌词(英文) 歌词(中文) 简介:电影<泰坦尼克号>插曲 歌手:Celine Dion(席琳·迪翁) 词作:韦尔·杰宁斯(Wil ...
- jetbrains全家桶永久激活大法
不得不说jetbrains的产品真的挺好用的,比如耳熟能详的idea和pycharm等等,但正版的费用真的非我等学生党所能承担,网上也有一些注册码的教程,原理是通过服务器进行注册认证,但貌似目前用的比 ...
- tomcat 开启远程debug
修改 tomcat 目录下 /bin/catelina.sh # execution immediately after startup. Default is ...
- php魔术变量
__LINE__ 文件中的当前行号 __FILE__ 文件的完整路径和文件名 __DIR__ 文件所在的目录 __FUNCTION__ 自 PHP 5 起本常量返回该函数被定义时的名字 __C ...
- 《网络安全编程基础》之Socket编程
<网络安全编程基础>之Socket编程 我的代码 server.c // server.cpp : Defines the entry point for the console appl ...
- virtualbox+vagrant学习-4-Vagrantfile-6-SSH Settings
SSH Settings 配置命名空间:config.ssh config.ssh的设置涉及到将如何配置vagrant使其通过ssh访问你的计算机.与大多数vagrant设置一样,默认设置通常都很好, ...
- (未解决)记录一次登录&jmeter，留下的一地鸡毛
一般的登录校验过程是这样的:客户端发起请求,拿到服务器给的“令牌”,再次发起请求,服务器验证“令牌”是否正确,从而返回给客户端是登录成功还是登录失败.然后我按照这个流程,用jmeter去模拟了登录过程 ...