实例1.JQuery-动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery-动画效果</title>
<script src="../jquery-3.3.1.js" type="javascript"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<!--网络调用，简单方便，如果没网就无法使用-->
<style>
* {
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center
}
.flex {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 900px;
}
.content {
flex: 24%;
margin-right: 10px;
margin-top: 10px;
height: 200px;
display: flex;
flex-flow: column;
position: relative;
}
button {
width: 100%;
border: none;
height: 30px;
line-height: 30px;
font-size: 16px;
}
.content > div {
background-color: red;
width: 100%;
height: 170px;
position: absolute;
top: 30px;
}
</style>
</head>
<body>
<div class="flex">
<div class="content">
<button class="btn1">点我隐藏</button>
<div class="box1">可以使用 hide() 方法来隐藏 HTML 元素</div>
</div>
<div class="content">
<button class="btn2">点我显示</button>
<div class="box2">可以使用 show() 方法来显示 HTML 元素</div>
</div>
<div class="content">
<button class="btn3">事件切换</button>
<div class="box3">通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。</div>
</div>
<div class="content">
<button class="btn4">淡入动画</button>
<div class="box4">fadeIn()动作</div>
</div>
<div class="content">
<button class="btn5">淡出动画</button>
<div class="box5">fadeOut()动作</div>
</div>
<div class="content">
<button class="btn6">淡入淡出切换</button>
<div class="box6">fadeToggle()事件</div>
</div>
<div class="content">
<button class="btn7">设置透明度</button>
<div class="box7">格式：<br>$(元素).fadeTo(时长,透明度,callback);<br>
效果的时长可取以下值："slow"、"fast" 或毫秒。<br>
淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
</div>
</div>
<div class="content">
<button class="btn8">上滑动方法</button>
<div class="box8">slideUp() 方法用于向上滑动元素。</div>
</div>
<div class="content">
<button class="btn9">下滑动方法</button>
<div class="box9">slideDown() 方法用于向下滑动元素。</div>
</div>
<div class="content">
<button class="btn10">滑动切换方法</button>
<div class="box10">slideToggle() 方法用于滑动动画切换。</div>
</div>
<div class="content">
<button class="btn11">动画方法</button>
<div class="box11"> animate() 方法用于创建自定义动画。<br>
animate({params},speed,callback);<br>
必需的 params 参数定义形成动画的 CSS 属性。<br>
可选的 speed 参数规定效果的时长<br>
可选的 callback 参数是动画完成后所执行的函数名称。
</div>
</div>
<div class="content">
<button class="btn12">停止动画方法</button>
<div class="box12"> stop() 方法用于停止动画。</div>
</div>
<div class="content">
<button class="btn13">Callback 方法</button>
<div class="box13"> Callback 函数在当前动画 100% 完成之后执行。</div>
</div>
</div>
<script>
$(function () {
$('.box2').hide();
$('.box4').hide();
$('.box9').hide();
$('.btn1').click(function () {
$('.box1').hide();
});
$('.btn2').click(function () {
$('.box2').show();
});
$('.btn3').click(function () {
$('.box3').toggle();
});
$('.btn4').click(function () {
$('.box4').fadeIn();
});
$('.btn5').click(function () {
$('.box5').fadeOut();
});
$('.btn6').click(function () {
$('.box6').fadeToggle();
});
$('.btn7').click(function () {
$('.box7').fadeTo(2000, 0.5);
});
$('.btn8').click(function () {
$('.box8').slideUp();
});
$('.btn9').click(function () {
$('.box9').slideDown();
});
$('.btn10').click(function () {
$('.box10').slideToggle();
});
$('.btn11').click(function () {
$('.box11').animate({opacity: '0.5', width: '100px', height: '100px', left: '95px', top: '65px'});
});
$('.box12').slideUp(5000);
$('.btn12').click(function () {
$('.box12').stop();
});
$('.btn13').click(function () {
$('.box13').slideUp(1500,function () {
alert('动画已完成');
});
});
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>补作业-JQuery-钟表盘</title>
<script src="../jquery-3.3.1.js" type="javascript"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<!--网络调用，简单方便，如果没网就无法使用-->
<style>
* {
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center
}
.pan {
background-image: url("http://demo.54moto.com/1-24/images/clock.jpg");
width: 600px;
height: 600px;
position: relative;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.img-hou {
background-image: url("http://demo.54moto.com/1-24/images/hour.png");
width: 30px;
height: 600px;
position: absolute;
}
.img-min {
background-image: url("http://demo.54moto.com/1-24/images/minute.png");
width: 30px;
height: 600px;
position: absolute;
}
.img-sec {
background-image: url("http://demo.54moto.com/1-24/images/second.png");
width: 30px;
height: 600px;
position: absolute;
}
</style>
</head>
<body>
<div class="pan">
<div class="img-hou"></div>
<div class="img-min"></div>
<div class="img-sec"></div>
</div>
<script>
$(function () {
function tiem() {
var mydate = new Date();
var hou = mydate.getHours();
var min = mydate.getMinutes();
var sec = mydate.getSeconds();
var h = hou * 6 + min / 2;
var m = min * 6 + sec / 10;
var s = sec * 6;
$('.img-hou').css('transform', 'rotate(' + h + 'deg)');
$('.img-min').css('transform', 'rotate(' + m + 'deg)');
$('.img-sec').css('transform', 'rotate(' + s + 'deg)');
}
setInterval(tiem, 1000);
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例3.JQuery-顶部渐隐渐显导航效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery-实例-导航条</title>
<script src="../jquery-3.3.1.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1030938_w2os3gpgxz.css">
</head>
<style>
* {
padding: 0;
margin: 0;
}
.topbox {
width: 100%;
background-color: #f5f5f5;
padding: 15px 0;
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.2);
position: relative;
top: -60px;
}
form {
position: relative;
width: 700px;
padding: 0;
margin: 0 auto;
}
.icon-fangdajing {
font-size: 25px;
color: #aaa;
position: absolute;
top: 5px;
left: 5px;
}
input {
width: 100%;
height: 35px;
line-height: 35px;
border: 1px solid #e5e5e5;
border-radius: 5px;
padding-left: 35px;
}
.img, .img2 {
font-size: 45px;
color: #ccc;
position: absolute;
right: 50px;
top: 63px;
}
/*上，下方向的两个图标重叠在一起*/
.img2 {
opacity: 0;
/*上图标透明度默认为0*/
}
.boxshadw {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset;
/*内阴影样式*/
}
</style>
<body>
<div class="topbox">
<form action="">
<input type="text" placeholder="#请输入需要查询的关键词。#">
<i class="iconfont icon-fangdajing "></i>
</form>
<i class="img iconfont icon-down-circle-fill"></i>
<i class="img2 iconfont icon-up-circle-fill"></i>
</div>
<script>
$('input').hover(function () {
/*hover()事件，鼠标划过输入框，加上内阴影样式，划出则删除该样式*/
$(this).addClass('boxshadw');
}, function () {
$(this).removeClass('boxshadw');
});
$('.topbox').hover(function () {
//当鼠标划过顶部导航时，
$('.topbox').stop().animate({top: '0px'});
//顶部导航回到top原点动画
// $('.img').removeClass('icon-down-circle-fill');
//删除下箭头的类
// $('.img').addClass('icon-up-circle-fill');
//增加上箭头的类
$('.img').stop().animate({opacity: '0'}, 1000);
//下图标透明度动画变0，1秒时间
$('.img2').stop().animate({opacity: '1'}, 1000);
//给上图标透明度为1，1秒动画
}, function () {
//当鼠标划出时
$('.topbox').stop().animate({top: '-60px'});
//导航回到原起点
$('.img').stop().animate({opacity: '1'}, 1000);
//下图标透明度动画变1，1秒时间
$('.img2').stop().animate({opacity: '0'}, 1000);
//给上图标动画透明度为0，1秒时间
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
学习思路
使用JQuery中的hover()方法，鼠标滑入，滑出就有两种动作可以实现。
图标全部是使用啊里字体，方便好用。
布局定位很简单，图标的定位是使用绝对定位实现。
导航背景做为父元素，使用相对定位，图标子元素以绝对定位，那么图标的定位就以是父元素的位置进行定位的。
表单输入框滑入时有内阴影，使用的是addClass()方法，增加内阴影的样式，鼠标滑出时，删除增加的内阴影样式即可。
导航默认定位为负值，鼠标划过时，使用animate()动画方法，设置定位，以动画的方式呈现，滑出时也是以动画形式返回。
上下箭头的一开始也是使用addClass()方法，滑入删除下箭头样式，增加上箭头样式，滑出反之。
后来想以动画的方式呈现，就将上下箭头做成两个图标，相同的定位，默认上箭头透明度为0。
鼠标滑入时，下箭头透明度动画变0，上箭头透明度动画变1，滑出时动画反之。
实例4.JQuery-添加样式导航背景变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery-实例-导航条2</title>
<script src="../jquery-3.3.1.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1030938_w2os3gpgxz.css">
<style>
nav {
position: relative;
top: 100px;
width: 900px;
height: 35px;
display: flex;
margin: 0 auto;
justify-content: space-around;
}
a {
flex: 1;
line-height: 35px;
text-align: center;
text-decoration: none;
color: #000;
background: #f5f5f5;
}
.red{
background-color: indianred;
}
</style>
</head>
<body>
<nav>
<a href="">栏目</a>
<a href="">栏目</a>
<a href="">栏目</a>
<a href="">栏目</a>
<a href="">栏目</a>
<a href="">栏目</a>
<a href="">栏目</a>
<a href="">栏目</a>
<a href="">栏目</a>
<a href="">栏目</a>
</nav>
<script>
$(function () {
$('a').hover(function () {
$(this).addClass('red')
}, function () {
$(this).removeClass('red')
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例5.JQuery-导航下线跟随动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery-实例-导航条3</title>
<script src="../jquery-3.3.1.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1030938_w2os3gpgxz.css">
<style>
* {
padding: 0;
margin: 0;
}
nav {
position: relative;
top: 100px;
width: 1000px;
height: 35px;
margin: 0 auto;
}
a {
display: inline-block;
width: 100px;
line-height: 35px;
text-align: center;
text-decoration: none;
color: #000;
background: #f5f5f5;
}
.line {
position: absolute;
height: 3px;
width: 100px;
top: 32px;
background-color: red;
}
.red {
background-color: indianred;
}
</style>
</head>
<body>
<nav>
<a href="" name="0">主页</a><a href="" name="1">新闻</a><a href="" name="2">国内</a><a href="" name="3">社会</a><a href=""
name="4">军事</a><a
href="" name="5">娱乐</a><a href="" name="6">体育</a><a href="" name="7">汽车</a><a href="" name="8">科技</a><a href=""
name="9">其他</a>
<div class="line"></div>
</nav>
</body>
<script>
$(function () {
$('a').hover(function () {
$x = parseInt($(this).attr('name') * 100);
/* parseInt() 函数可解析一个字符串，并返回一个整数。
将每个a中的namew值取出来，转换成整数，*100，就是对应每个导航所在的X坐标位置。
*/
$('.line').stop().animate({left: $x + 'px'}, 300)
// 设置线条的动画，左边位置为刚刚计算的坐标
}, function () {
$('.line').stop().animate({left: '0'}, 300)
//鼠标滑出时，线条的左边位置为0
})
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例6.下拉菜单导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery-实例-导航条4</title>
<script src="../jquery-3.3.1.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="//at.alicdn.com/t/font_1030938_82sn09xfzbv.css">
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: relative;
top: 100px;
width: 1000px;
height: 35px;
margin: 0 auto;
}
ul {
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
li {
flex: 1;
list-style-type: none;
position: relative;
}
dl {
width: 100px;
position: absolute;
display: none;
border: 1px solid #eee;
top: 31px;
}
dd {
line-height: 30px;
text-align: center;
}
a {
display: inline-block;
width: 100px;
line-height: 35px;
text-align: center;
text-decoration: none;
color: #000;
}
li > a {
background: #eee;
}
dl > dd:nth-child(1) a {
padding-top: 5px;
}
dd>a:hover{
background: palevioletred;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="" name="0">主页</a></li>
<li><a href="" name="1">新闻</a></li>
<li><a href="" name="2">国内</a></li>
<li><a href="" name="3">社会</a></li>
<li><a href="" name="4">军事</a></li>
<li><a href="" name="5">娱乐</a></li>
<li><a href="" name="6">体育</a></li>
<li><a href="" name="7">汽车</a></li>
<li><a href="" name="8">科技</a></li>
<li class="xiala"><a href="" name="9">其他<i class="ico iconfont icon-shang"></i></a>
<dl>
<dd><a href="">子菜单</a></dd>
<dd><a href="">子菜单</a></dd>
<dd><a href="">子菜单</a></dd>
<dd><a href="">子菜单</a></dd>
</dl>
</li>
</ul>
</nav>
</body>
<script>
$(function () {
$('.xiala').hover(function () {
/* 鼠标划过时，删除上箭头图标，添加上箭头图标样式，设置下拉菜单的下拉动画，鼠标滑出时，动画反过来*/
$('.xiala i').removeClass('icon-shang');
$('.xiala i').addClass('icon-xia');
$('.xiala dl').slideDown(300);
}, function () {
$('.xiala i').removeClass('icon-xia');
$('.xiala i').addClass('icon-shang');
$('.xiala dl').slideUp(300);
})
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
