彼方尚有荣光在|
收藏闪存小组博问

_xiaolin

园龄：2年9个月粉丝：3关注：5

JQuery动画

12、JQuery动画

12.1、基本动画

show() 将隐藏的元素显示

hide() 将可见的元素隐藏

toggle() 可见就隐藏，不可见就显示

以上动画都可以添加参数
	1、第一个参数是动画执行时长，以毫秒为单位
	2、第二个参数是动画的回调函数（动画完成后自动调用的函数）

12.2、淡入淡出动画

fadeln() 淡入，慢慢可见

fadeOut() 淡出，慢慢消失

fadeTo() 在指定时长内慢慢的将透明度修改到指定的值，0透明，1可见，0.5半透明。

fadeToggle() 淡入/淡出 切换

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	
<script type="text/javascript">
	/* 	
		基本
		show([speed,[easing],[fn]]) 
		hide([speed,[easing],[fn]]) 
		toggle([speed],[easing],[fn]) 
		滑动
		slideDown([spe],[eas],[fn]) 
		slideUp([speed,[easing],[fn]]) 
		slideToggle([speed],[easing],[fn]) 
		淡入淡出
		fadeIn([speed],[eas],[fn]) 
		fadeOut([speed],[eas],[fn]) 
		fadeTo([[spe],opa,[eas],[fn]]) 
		fadeToggle([speed,[eas],[fn]])
		*/
		$(function(){
			//显示   show()
			$("#btn1").click(function(){
				$("#div1").show(2000,function () {
					alert("show动画完毕");
				});
			});		
			//隐藏  hide()
			$("#btn2").click(function(){
				$("#div1").hide(1000,function () {
					alert("hide动画完毕");
				});
			});	
			//切换   toggle()
			$("#btn3").click(function(){
				$("#div1").toggle(1000,function () {
					alert("toggle动画完毕");
				});
			});
			/*var abc = function () {
				$("#div1").toggle(1000,abc);
			}
			abc();*/
			
			//淡入   fadeIn()
			$("#btn4").click(function(){
				$("#div1").fadeIn(2000,function () {
					alert("fadeIn动画完毕");
				});
			});	
			//淡出  fadeOut()
			$("#btn5").click(function(){
				$("#div1").fadeOut(2000,function () {
					alert("fadeOut动画完毕");
				});
			});	
			
			//淡化到  fadeTo()
			$("#btn6").click(function(){
				$("#div1").fadeTo(2000,0.5,function () {
					alert("fadeTo动画完毕");
				});
			});	
			//淡化切换  fadeToggle()
			$("#btn7").click(function(){
				$("#div1").fadeToggle(2000,function () {
					alert("fadeToggle动画完毕");
				});
			});
 
 
		});
</script>
	
	</head>
	<body>
		<table style="float: left;">
			<tr>
				<td><button id="btn1">显示show()</button></td>
			</tr>
			<tr>
				<td><button id="btn2">隐藏hide()</button></td>
			</tr>
			<tr>
				<td><button id="btn3">显示/隐藏切换 toggle()</button></td>
			</tr>
			<tr>
				<td><button id="btn4">淡入fadeIn()</button></td>
			</tr>
			<tr>
				<td><button id="btn5">淡出fadeOut()</button></td>
			</tr>
			<tr>
				<td><button id="btn6">淡化到fadeTo()</button></td>
			</tr>
			<tr>
				<td><button id="btn7">淡化切换fadeToggle()</button></td>
			</tr>
		</table>
		
		<div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
			jquery动画定义了很多种动画效果，可以很方便的使用这些动画效果
		</div>
	</body>
 
</html>

13、CSS_动画 品牌展示

需求：
	1.点击按钮的时候，隐藏和显示卡西欧之后的品牌
	2.当显示全部内容的时候，按钮文本为“显示精简品牌”然后，小三角形向上，所有品牌产品为默认颜色
	3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌”，然后小三角形向下，并且把佳能，尼康的品牌颜色改为红色（给li标签添加promoted样式即可）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
 
body {
	font-size: 12px;
	text-align: center;
}
 
a {
	color: #04D;
	text-decoration: none;
}
 
a:hover {
	color: #F50;
	text-decoration: underline;
}
 
.SubCategoryBox {
	width: 600px;
	margin: 0 auto;
	text-align: center;
	margin-top: 40px;
}
 
.SubCategoryBox ul {
	list-style: none;
}
 
.SubCategoryBox ul li {
	display: block;
	float: left;
	width: 200px;
	line-height: 20px;
}
 
.showmore , .showless{
	clear: both;
	text-align: center;
	padding-top: 10px;
}
 
.showmore a , .showless a{
	display: block;
	width: 120px;
	margin: 0 auto;
	line-height: 24px;
	border: 1px solid #AAA;
}
 
.showmore a span {
	padding-left: 15px;
	background: url(img/down.gif) no-repeat 0 0;
}
 
.showless a span {
	padding-left: 15px;
	background: url(img/up.gif) no-repeat 0 0;
}
 
.promoted a {
	color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function() {
		//基本初始状态
		$("li:gt(5):not(:last)").hide();
		$("div div a").click(function(){
			//alert("事件");
			//让某些品牌显示或者隐藏
			$("li:gt(5):not(:last)").toggle();
			//按钮上的文本：1显示全部品牌==角标向下
			//2显示精简品牌==角标向上
			//切换按钮的文本
			/*if($(this).text()=="显示全部品牌"){
				$(this).text("显示精简品牌");
			}else{
				$(this).text("显示全部品牌");
			}*/
			//判断品牌当前是否显示
			if($("li:gt(5):not(:last)").is(":hidden")){
				$("div div a span").text("显示全部品牌");
				//改变图标
				$("div div").removeClass();
				$("div div").addClass("showmore");
				//取消高亮
				$("li:contains('索尼')").removeClass("promoted");
			}else{
				$("div div a span").text("显示精简品牌");
				$("div div").removeClass();
				$("div div").addClass("showless");
				//给一些品牌添加高亮
				$("li:contains('索尼')").addClass("promoted");
			}
			return false;
		});
	});
</script>
</head>
<body>
	<div class="SubCategoryBox">
		<ul>
			<li><a href="#">佳能</a><i>(30440) </i></li>
			<li><a href="#">索尼</a><i>(27220) </i></li>
			<li><a href="#">三星</a><i>(20808) </i></li>
			<li><a href="#">尼康</a><i>(17821) </i></li>
			<li><a href="#">松下</a><i>(12289) </i></li>
			<li><a href="#">卡西欧</a><i>(8242) </i></li>
			<li><a href="#">富士</a><i>(14894) </i></li>
			<li><a href="#">柯达</a><i>(9520) </i></li>
			<li><a href="#">宾得</a><i>(2195) </i></li>
			<li><a href="#">理光</a><i>(4114) </i></li>
			<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
			<li><a href="#">明基</a><i>(1466) </i></li>
			<li><a href="#">爱国者</a><i>(3091) </i></li>
			<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
		</ul>
		<div class="showmore">
			<a href="more.html"><span>显示全部品牌</span></a>
		</div>
	</div>
</body>
</html>

14、JQuery事件操作

14.1、页面加载操作

$(function(){});
和
window.onload=function(){}
的区别？
他们分别是在什么时候触发？
	1.JQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。
	2.原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成。
他们触发的顺序？
	1.JQuery页面加载完成之后先执行
	2.原生js的页面加载完成之后
他们执行的次数？
	1.原生js的页面加载完成之后，只会执行最后一次赋值函数
	2.JQuery的页面加载完成之后是把全部注册的Function函数，依次顺序执行。
	
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"></script>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	window.onload = function () {
		alert("原生js的页面加载完成之后1")
	}
	window.onload = function () {
		alert("原生js的页面加载完成之后2")
	}
	window.onload = function () {
		alert("原生js的页面加载完成之后3")
	}
	//jquery的页面加载完成之后
	$(function () {
		alert("jquery的页面加载完成之后1")
	});
	$(function () {
		alert("jquery的页面加载完成之后2")
	});
	$(function () {
		alert("jquery的页面加载完成之后3")
	});
</script>
</head>
<body>
	<button>我是按钮</button>
	
	<iframe src="http://localhost:8080"></iframe>
	<img src="http://localhost:8080/1.jpg" alt=""/>
 
	
</body>
</html>

14.2、JQuery中其他的事件处理方法

image-20220520131606894

js是onclick、onblur、onchange
click() 它可以绑定单击事件，以及触发单击事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind() 可以给元素一次性绑定一个或多个事件
one() 使用跟bind一样，但是one方法绑定的事件只会响应一次
live() 也是用来绑定事件的，它可以用来绑定选择器匹配的所有元素的事件，哪怕这个元素是后面动态创建出来的也有效。
unbind() 跟bind相反的操作，解除事件的绑定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
		
			$(function(){
				//1.通常绑定事件的方式
				$("h5").click(function(){ //传function是绑定事件
					alert("h5被点击了");
				});
				$("button").click(function(){
					$("h5").click();//不传function是触发事件
				})
 
				//2.jQuery提供的绑定方式：bind()函数
				/*$("h5").bind("click mouseover mouseout",function(){
					$(this).css("background-color","blue");
				});*/
				$("h5").live("click mouseover mouseout",function(){
					$(this).css("color","blue");
				});
				/*$("h5").unbind("mouseover mouseout");
				$("h5").mouseover(function(){
					$(this).css("color","red");
				});
				$("h5").mouseout(function(){
					$(this).css("color","black");
				});
				*/
				$('<h5 class="head">什么是jQuery</h5>').appendTo("#panel");
				//3.合并“鼠标移入”和“鼠标移出”事件
 
				//4.合并单击事件
				//5.切换元素可见状态
				//6.只绑定一次
			});
		
		</script>
	</head>
	<body>
		<div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
			<button>按钮</button>
		</div>
	</body>
 
</html>

14.3、事件的冒泡

什么是事件的冒泡？
事件的冒泡是指，父子元素同时监听同一个事件，当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。
 
那么如何阻止事件冒泡呢？
在子元素事件函数体内，return false 可以阻止事件的冒泡传递。

14.5、JavaScript事件对象

事件对象，是封装有触发的事件信息的一个JavaScript对象。
我们重点关心的是怎么拿到这个JavaScript的事件对象以及使用。
 
如何获取JavaScript事件对象呢？
在给元素绑定事件的时候，在事件的function(event)参数列表中添加一个参数，这个参数名，我们习惯取名为event，这个event就是JavaScript传递参数事件处理函数的事件对象。
 
比如：
    //1.原生javascript获取 事件对象
	/*window.onload = function(){
		document.getElementById("areaDiv").onclick = function(event){
			console.log(event);
		}
	}*/
	//2.JQuery代码获取 事件对象
	$(function(){
		$("#areaDiv").click(function(event){
			console.log(event);
		});
	});
那么这个对象有什么作用-->实现多种操作：
 
//3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$(function(){
   $("#areaDiv").bind("mouseout mouseover",function(event){
      //console.log(event.type);
      if(event.type == "mouseover"){
         $(this).css("background-color","red");
      }else{
         $(this).css("background-color","blue");
      }
   });
});

练习07事件 图片跟随

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
   body {
      text-align: center;
   }
   #small {
      margin-top: 150px;
   }
   #showBig {
      position: absolute;
      display: none;
   }
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
   $(function(){
      $("#small").bind("mouseover mouseout mousemove",function (event) {
         if(event.type == "mouseover"){
            $("#showBig").show();
         }else if(event.type == "mouseout"){
            $("#showBig").hide();
         }else if(event.type == "mousemove"){
            var x = event.pageX+10;
            var y = event.pageY+10;
            $("#showBig").css({
               left:x,
               top:y
            });
         }
      });
   });
</script>
</head>
<body>
 
   <img id="small" src="img/small.jpg" />
   
   <div id="showBig">
      <img src="img/big.jpg">
   </div>
 
</body>
</html>

本文作者：_xiaolin

本文链接：https://www.cnblogs.com/SilverStar/p/17415183.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   _xiaolin  阅读(18)  评论(0)  编辑  收藏  举报
相关博文：
·  JQuery动画
·  jQuery
·  前端三件套系例之JQuery——JQuery动画效果、JQuery插件、
·  2023.3.2 JQuery CSS 样式操作与jQuery 动画
·  前端jquery
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae
评论
收藏
关注
推荐
深色
回顶
收起