jQuery --- 第四期 (jQuery动效)
欢迎访问我的个人博客,获取更多有用的东西
也可以关注我的微信订阅号:CN丶Moti
学习笔记
1.JQuery显示和隐藏动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery显示和隐藏动画</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
background: green;
display: none;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
$("div").show(1000);
});
$("button").eq(1).click(function () {
$("div").hide(1000);
});
$("button").eq(2).click(function () {
$("div").toggle(1000);
});
});
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
</body>
</html>
2.JQuery对联广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery对联广告</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
display: none;
}
.left{
width: 100px;
height: 200px;
float: left;
position: fixed;
top: 100px;
left: 0;
background: purple;
}
.right{
width: 100px;
height: 200px;
float: right;
position: fixed;
top: 100px;
right: 0;
background: purple;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//监听滑轮滚动事件
$(window).scroll(function () {
//获得滑轮滚动的距离
var offset = $("html,body").scrollTop();
if(offset >= 200){
$("div").show(1000);
}else{
$("div").hide(1000);
}
});
});
</script>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
3.jQuery展开和收起动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery展开和收起动画</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 200px;
background: blue;
display: none;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
//向下展开
$("div").slideDown(1000);
});
$("button").eq(1).click(function () {
//向上收起
$("div").slideUp(1000);
});
$("button").eq(2).click(function () {
//展开与收起的切换
$("div").slideToggle(1000);
});
});
</script>
</head>
<body>
<button>展开</button>
<button>收起</button>
<button>切换</button>
<div></div>
</body>
</html>
4.JQuery折叠菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery折叠菜单</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
margin: auto 600px;
margin-top: 100px;
border: 1px solid #000;
list-style: none;
}
.nav>li{
border: 1px solid #000;
}
div{
width: auto;
height: 100px;
background: blue;
display: none;
}
.current{
background: gray;
}
.red{
background: red;
}
.orange{
background: orange;
}
.yellow{
background: yellow;
}
.green{
background: green;
}
.purple{
background: purple;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
$(".nav>li").click(function () {
$(this).children("div").slideDown(1000);
$(this).siblings().children("div").slideUp(1000);
});
});
</script>
</head>
<body>
<ul class="nav">
<li>红
<div class="red"></div>
</li>
<li>橙
<div class="orange"></div>
</li>
<li>黄
<div class="yellow"></div>
</li>
<li>绿
<div class="green"></div>
</li>
<li>紫
<div class="purple"></div>
</li>
</ul>
</body>
</html>
5.jQuery下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery下拉菜单</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
margin: 50px auto;
width: 300px;
height: 50px;
background: red;
}
.sub{
background: orange;
display: none;
}
.sub>li{
list-style: none;
}
.nav>li{
width: 100px;
height: 50px;
list-style: none;
text-align: center;
line-height: 50px;
float: left;
}
.current{
background: gray;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
/*
在jQuery中如果想要执行动画,那么需要在之前调用动画元素的stop方法
*/
$(".nav>li").hover(function () {
$(this).addClass("current");
$(this).siblings().removeClass("current");
$(this).children("ul").stop();
$(this).children("ul").slideDown(500);
},function () {
$(this).removeClass("current");
$(this).children("ul").stop();
$(this).children("ul").slideUp(500);
});
$(".sub>li").hover(function () {
$(this).addClass("current");
$(this).siblings().removeClass("current");
},function () {
$(this).removeClass("current");
});
});
</script>
</head>
<body>
<ul class="nav">
<li>一级菜单
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>二级菜单
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>三级菜单
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
</html>
6.jQuery动画的淡入淡出
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery动画的淡入淡出</title>
<style>
body{background-color: #EBEBEB}
div{
width :200px;
height :200px;
background-color :red;
display :none;
}
</style>
<!--引用jquery库-->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//动画淡入
$("button").eq().click(function(){
$("div").eq().fadeIn(,function(){
});
});
//动画淡出
$("button").eq().click(function(){
$("div").eq().fadeOut(,function(){
});
});
//淡出入切换
$("button").eq().click(function(){
$("div").eq().fadeToggle(,function(){
})
});
//允许渐变为指定的不透明度（0-1）
$("button").eq().click(function(){
$("div").eq().fadeTo(,0.5,function(){
})
});
});
</script>
</head> <body>
<button>fadeIn</button>
<button>fadeOut</button>
<button>fadeToggle</button>
<button>fadeTo</button>
<div></div>
</body>
</html>
7.jQuery广告弹窗
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery弹窗广告</title>
<!--适应移动端-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--css样式-->
<style>
body{background-color: #EBEBEB}
div{
width :200px;
height :200px;
background-color :red;
position :fixed;
right :;
bottom :;
display:none;
}
.span{
width:40px;
height:20px;
position:absolute;
background-color:green;
right:;
top:;
}
</style>
<!--引用jquery库-->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//监听关闭span
$(".span").click(function(){
$("div").fadeOut();
});
//按照动画队列依次执行
$("div").stop().slideDown().fadeOut().fadeIn();
});
</script>
</head> <body>
<div>
<span class="span">关闭</span>
</div>
</body>
</html>
8.JQuery自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery自定义动画</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: red;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//操作属性
$("button").eq(0).click(function () {
$("div").stop().animate({
width:300,
height:300,
marginLeft:100
},1000,function () {
});
});
//累加属性
$("button").eq(1).click(function () {
$("div").stop().animate({
width:"+=100"
},1000,function () {
});
});
//关键字
$("button").eq(2).click(function () {
$("div").stop().animate({
// width:"hide"
width:"toggle"
},1000,function () {
});
});
});
</script>
</head>
<body>
<button>操作属性</button>
<button>累加属性</button>
<button>关键字</button>
<div></div>
</body>
</html>
9.jQuery的stop方法和delay方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的stop方法和delay方法</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: green;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () { $("div").animate({// 增加高度动画
height:400
},1000).delay(1000).animate({// 增加宽度动画,延迟一秒
width:400
},1000).delay(1000).animate({// 减少高度动画,延迟一秒
height:100
},1000).delay(1000).animate({// 减少宽度动画,延迟一秒
width:100
},1000);
});
$("button").eq(1).click(function () {
/**
* stop()方法:
* 第一个参数:是否停止所有动画
* 第二个参数:是否立即完成当前动画
*/
//立即结束当前动画,继续下一个动画
// $("div").stop();
//停止所有动画
// $("div").stop(true);
$("div").stop(true,false);
//停止所有动画,并立即完成当前动画
// $("div").stop(true,true);
//立即完成当前动画,并继续下一个动画
// $("div").stop(false,true);
});
});
</script>
</head>
<body>
<button>开始动画</button>
<button>停止动画</button>
<div></div>
</body>
</html>
10.JQuery无限循环滚动广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery无限循环滚动广告</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
height: 400px;
margin: 100px auto;
border: 1px solid #000;
overflow: hidden;
}
ul{
width: 1200px;
height: 400px;
background: black;
}
ul>li{
list-style: none;
float: left;
}
.one{
width: 200px;
height: 400px;
background: green;
}
.two{
width: 200px;
height: 400px;
background: orange;
}
.three{
width: 200px;
height: 400px;
background: red;
}
.fore{
width: 200px;
height: 400px;
background: yellow;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
var offect = 0;
var timer;
function autoPlay() {
timer = setInterval(function () {
offect += -10;
if(offect <= -800){
offect = 0;
}
$("ul").css("marginLeft",offect);
},0.01);
}
autoPlay();
$("li").hover(function () {
//停止滚动
clearInterval(timer);
//为所有未被选中的添加蒙版
$(this).siblings().fadeTo(100,0.5);
//去除当前的蒙版
$(this).fadeTo(100,1);
},function () {
//恢复滚动
autoPlay();
//去除所有蒙版
$("li").fadeTo(100,1);
});
});
</script>
</head>
<body>
<div>
<ul class="ad">
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
<li class="fore"></li>
<li class="one"></li>
<li class="two"></li>
</ul>
</div>
</body>
</html>
jQuery --- 第四期 (jQuery动效)的更多相关文章
- 【技术分享会】 @第四期 JQuery插件
本讲内容 JavaScript JQuery JQuery插件 实例 JavaScript 前端开发工程师必须掌握的三种技能 描述内容的HTML 描述网页样式的CSS 描述网页行为的JavaScrip ...
- jquery第四期：对象转换的小实例
为了更清晰的看懂jquery对象是一个数组,我们这一期来改变每一个<li>中的值,在前面加上序号. 代码如下: <!DOCTYPE html PUBLIC "-//W3C/ ...
- JQuery --- 第五期 (JQuery节点操作)
学习笔记 1.JQuery添加节点相关方法 <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 【js】插件—动效Velocity.js
Velocity.js——加速JavaScript动画 一款替代jQuery的$ .animate()动效的插件.兼容IE8和Android2.3及以上. 相比较优点: 1.它比JQuery更快,并实 ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...
- 添加新内容的四个 jQuery 方法：append，prepend，after，before
添加新内容的四个 jQuery 方法区别如下: append() - 在被选元素(里面)的结尾插入内容prepend() - 在被选元素(里面)的开头插入内容 //jQuery append() 方法 ...
- 【Python之路】第十四篇--jQuery
jquery简介 1.jquery是什么 ☛ 参考用法 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery ...
- Web前端基础(17):jQuery基础(四)
1. jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...
随机推荐
- 【ASP.NET Core】JSON Patch 使用简述
JSON Patch 是啥玩意儿?不知道,直接翻译吧,就叫它“Json 补丁”吧.干吗用的呢?当然是用来修改 JSON 文档的了.那咋修改呢?比较常见有四大操作:AMRR. 咋解释呢? A—— Add ...
- 闲聊 “今日头条Go建千亿级微服务的实践”
背景 今天跟同事偶然看到<今日头条Go建千亿级微服务的实践>文章,故做了一些探讨,与大家分享下,也欢迎大家多多共同探讨!. 其他资料: 如何理解 Golang 中“不 ...
- Linux 操作系统基础知识
1.操作系统总体介绍 •CPU: 就像人的大脑,主要负责相关事情的判断以及实际处理的机制.查询指令: cat /proc/cpuinfo•内存: 大脑中的记忆区块,将皮肤.眼睛等所收集到的信息记录起来 ...
- 【原】fetch跨域请求附带cookie（credentials）
HTTP访问控制 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 解决跨域的方式有很多种,本文介绍" ...
- Java 8 异常该进
try-with-resources 这个特性是在JDK7中出现的,我们在之前操作一个流对象的时候大概是这样的: try { // 使用流对象 stream.read(); stream.write( ...
- API Gateway性能比较：NGINX vs. ZUUL vs.Cloud Gateway vs. Linkerd[译]
2018-03-04 15:07 联发科的反思 前几天拜读了 OpsGenie 公司(一家致力于 Dev & Ops 的公司)的资深工程师 Turgay elik 博士写的一篇文章(链接在 ...
- 《Redis入门指南》第2版 读书笔记
读第二遍了,感觉和几年前读时的收获不一样了.送上门来当树洞的独自承担一切 Redis以简洁为美Redis通信协议是Redis客户端与Redis之间交流的语言,通信协议规定了命令和返回值的格式.Redi ...
- 监控与管理dubbo服务
Dubbo是阿里多年前开源的一套服务治理框架,在众多互联网企业里应用广泛.本文介绍了一些如何监控与管理dubbo服务.使用的工具与<dubbox 的各种管理和监管>大致相同,本文更侧重于命 ...
- Python模拟登陆万能法-微博|知乎
Python模拟登陆让不少人伤透脑筋,今天奉上一种万能登陆方法.你无须精通HTML,甚至也无须精通Python,但却能让你成功的进行模拟登陆.本文讲的是登陆所有网站的一种方法,并不局限于微博与知乎,仅 ...
- bzoj 3167 SAO
树dp 定义f[i][j]为i在其已合并子树内排名为j的方案数 O(n2)进行子树合并 转移时枚举他在已合并子树中的排名j和新合并子树中的排名k+1 当他比他儿子大的时候$f[x][j+k]=f[x] ...