jQ事件与动画效果

最新推荐文章于 2024-09-10 15:47:12 发布

要讲故事

最新推荐文章于 2024-09-10 15:47:12 发布

阅读量649

点赞数 1

文章标签： jquery css3 前端

本文链接：https://blog.csdn.net/Wzc0720/article/details/126976689

版权

1.当用户通过鼠标或者键盘与页面发生行为操作时，或者当文档载入完毕，或者文档的某些元素发生某些变化或操作时，浏览器都会自动生成一个事件。 2.通过触发事件，然后调用事件处理方法，就可以实现交互。 3.jQuery内置了很多动画效果，通过调用动画方法可以轻松的为网页添加精彩的视觉效果。

内容结构：

1. 鼠标事件

2. 键盘事件

3. HTML事件

4. 合成事件

5. 动画效果

鼠标事件

click()：当单击鼠标左键时触发的事件

dbclick()：当双击鼠标左键时触发的事件

mouseover()：当鼠标指针位于元素上方时触发的事件

mouseout()：当鼠标指针从元素上移开时触发的事件

mousedown()：当鼠标指针移动到元素上方，并且按下鼠标任意一个按键时触发的事件

mouseup() ：当鼠标指针正在元素上方，此时松开鼠标的任意一个按键时触发的事件

键盘事件

keydown()：当键盘上的按键被按下时触发的事件

keyup()：当键盘上的按键被松开时触发的事件

keypress()：当键盘上的按键被按下，并且又被松开了触发的事件它包括了按键被按下和按键被松开两个部分。

HTML事件

ready()：文档加载完毕，即文档就绪时触发的事件。jQuery自定义的方法，一般用于$(document).ready()。

focus()：当元素获得焦点时触发的事件，通过鼠标点击选中元素或通过tab键定位到元素时，都可以让元素获得焦点。

blur()：当元素失去焦点时触发的事件。 change()：当文本框（文本类型的input元素或textarea元素）、下拉列表（select元素）的值发生改变并且失去焦点时触发的事件。

select()：当文本框（文本类型的input元素或textarea元素）中的一个或多个字符被选中时触发的事件。

submit() ：当表单元素提交表单时触发的事件。

事件绑定

bind

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$("button").bind("click",function(){ $("p").slideToggle(); });

事件冒泡及解决方案

详解

事件对象的属性

1、event.type 返回当前的事件类型

2、event.target 返回事件的目标节点,如生成事件的元素、文档或窗口。

3、event.pageX/Y 获取鼠标当前相对于页面的坐标

4、e.which 1鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键或ASCLL

A.事件对象常用属性

一、事件对象常用的属性：

event.type：获取事件的类型，触发元素的事件类型

$("a").click(function(event) { alert(event.type);});

event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标，可以确定元素在当前页面的坐标值，是以页面为参考点,不随滑动条移动而变化

$("a").click(function(event) { alert("Current mouse position: " + event.pageX + ", " + event.pageY ); return false; });

event.target：获取触发事件的元素

this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

this和event.target都是dom对象，可以转换为jquery对象：$(this)和$(event.target)

$("a[href=http://www.baidu.com]").click(function(event) {

alert(event.target.href);

return false;

});

event.which：

获取在鼠标单击事件中鼠标的左、中、右键（左键1，中间键2，右键3），在键盘事件中键盘的键码值

$("a").mousedown(function(e){ alert(e.which); return false; })

event.currentTarget :

获取冒泡前的当前触发事件的DOM对象, 等同于this

二、事件对象常用的方法：

event.preventDefault() ：

阻止默认行为,可以用 event.isDefaultPrevented() 来确定

preventDefault是否被调用过了

event.stopPropagation() ：

阻止事件冒泡，事件是可以冒泡的，为防止事件冒泡到DOM树上，不触发任何前辈元素上的事件处理函数，可以用 event.isPropagationStopped() 来确定stopPropagation是否被调用过了

合成事件

jQuery自定义了两个合成事件，hover()方法和toggle()方法。

1. hover()方法 —— 模拟鼠标的悬停事件

语法结构：hover(function(){}, function(){})

语法解析：当鼠标移动到某元素上时，执行第1个函数；当鼠标移出该元素时，执行第2个函数。这里的hover()方法的第1个函数部分有点类似于CSS中的伪类选择符:hover的作用。

2、toggle()方法 —— 模拟鼠标的连续单击事件[ jq1.8以上版本禁用 ]

语法结构：toggle(function(){}, function(){}, function(){}, ...)

语法解析：当第1次单击某元素时，执行第1个函数；当第2次单击同一元素时，执行第2个函数；当第3次单击该元素时，执行第3个函数；以此类推，直到最后一次单击该元素时，执行最后一个函数。

移除事件绑定

事件解除绑定

$(function() {

   $('#btn').bind("click", myFun1 = function() {

   $('#test').append("<p>我的绑定函数1</p>");

   }).bind("click", myFun2 = function() {

   $('#test').append("<p>我的绑定函数2</p>");

   }).bind("click", myFun3 = function() {

   $('#test').append("<p>我的绑定函数3</p>");

});

$('#delTwo').click(function(){

   //$(slector).unbind(事件,[函数名])

$('#btn').unbind("click", myFun2);

});

})

<button id="btn">点击我</button>

<div id="test"></div>

<button id="delTwo">删除第二个事件</button>

模拟操作

大多数事件需要通过鼠标点击来完成，某些特殊情况需要模拟用户的操作来达到单击或其它的效果，例如用户进入页面就触发单击效果，而不需要用户去主动单击.

trigger() 触发被选元素的指定事件类型。

$(function(){

    $('#btn').bind("myClick", function(event, message1, message2){

    $('#test').append( "<p>"+message1 + message2 +"</p>");

});

   $('#btn').click(function(){

$(this).trigger("myClick",["我的自定义","事件"]);

});

})

动画效果 [实践为主]

1. 隐藏和显示动画 —— show()和hide()

show() ：显示元素。相当于将元素的display属性值设为"block"。

hide() ：隐藏元素。相当于将元素的display属性值设为"none"。

2、滑动动画 —— slideDown() 和 slideUp()

slideDown() ：使用滑动效果，显示隐藏的元素。前提是元素的display属性值为none。

slideUp() ：使用滑动效果，隐藏显示的元素。前提是元素是显示的。

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

3、淡入淡出动画 —— fadeIn() 和 fadeOut()

fadeIn() ：元素淡入，即元素的不透明度逐渐提高，直到完全显现。

fadeOut()：元素淡出，即元素逐渐透明，直到完全透明。

自定义动画效果

$(this).animate({top: "200px" , width :"200px"}, 3000 ,function(){

$(this).css("border","5px solid blue");

})

Animate方法支持的样式名称

backgroundPosition

borderWidth

borderBottomWidth

borderLeftWidth

borderRightWidth

borderTopWidth

borderSpacing

margin

marginBottom

marginLeft

marginRight

marginTop

outlineWidth

padding

paddingBottom

paddingLeft

paddingRight

paddingTop

height

width

maxHeight

maxWidth

minHeight

minWidth

font

fontSize

bottom

left

right

top

letterSpacing

wordSpacing

lineHeight

textIndent

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法

$(selector).stop([stopAll],[goToEnd]);

说明:

stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

goToEnd 参数规定是否立即完成当前动画。默认是 false。默认地，stop() 会清除在被选元素上指定的当前动画。

综合实践

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample036 - 呼吸灯轮播图</title>
<link rel="stylesheet" type="text/css" href="css/basic.css" />
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
.carousel {
margin: 50px auto;
padding: 0px;
width: 790px;
height: 340px;
position: relative;
border: 1px solid #E9E9E9;
}
.carousel-img {
margin: 0px;
padding: 0px;
list-style: none;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0px;
left: 0px;
}
.carousel-img>li {
margin: 0px;
padding: 0px;
list-style: none;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0px;
left: 0px;
display: none;
}
.carousel-img>a>img {
border: none;
outline: none;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.carousel-control {
display: none;
}
.carousel-control-left,
.carousel-control-right {
width: 40px;
height: 90px;
display: block;
background-color: #000;
background-color: rgba(0, 0, 0, .4);
filter: alpha(opacity=40);
position: absolute;
top: 50%;
margin-top: -45px;
color: #FFF;
font-size: 32px;
line-height: 90px;
text-align: center;
cursor: pointer;
}
.carousel-control-left {
left: 0px;
}
.carousel-control-right {
right: 0px;
}
.carousel-control-left:hover,
.carousel-control-right:hover {
background-color: #000;
background-color: rgba(0, 0, 0, .75);
filter: alpha(opacity=75);
}
.carousel-nav {
margin: 0px;
padding: 0px;
list-style: none;
width: 240px;
height: 25px;
display: block;
border-radius: 10px;
background-color: #FFF;
background-color: rgba(255, 255, 255, .25);
filter: alpha(opacity=25);
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -120px;
}
.carousel-nav>li {
width: 20px;
height: 20px;
display: block;
border-radius: 10px;
background-color: #FFF;
background-color: rgba(255, 255, 255, .5);
filter: alpha(opacity=50);
margin: 2.5px 5px;
float: left;
cursor: pointer;
transition: all .25s;
}
.carousel-nav>li.active {
width: 20px;
height: 20px;
display: block;
border-radius: 10px;
background-color: orangered;
margin: 2.5px 5px;
float: left;
}
.carousel:hover .carousel-control {
display: block;
}
</style>
<body>
<div class="carousel">
<ul class="carousel-img">
<li>
<a href="#"><img src="img/1.jpg" /></a>
</li>
<li>
<a href="#"><img src="img/2.jpg" /></a>
</li>
<li>
<a href="#"><img src="img/3.jpg" /></a>
</li>
<li>
<a href="#"><img src="img/4.jpg" /></a>
</li>
<li>
<a href="#"><img src="img/5.jpg" /></a>
</li>
<li>
<a href="#"><img src="img/6.jpg" /></a>
</li>
<li>
<a href="#"><img src="img/7.jpg" /></a>
</li>
<li>
<a href="#"><img src="img/8.jpg" /></a>
</li>
</ul>
<div class="carousel-control">
<div class="carousel-control-left"><</div>
<div class="carousel-control-right">></div>
</div>
<ul class="carousel-nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
// 初始化插件
for(var i = 0; i < $(".carousel-img li").length; i++) {
$(".carousel-nav li").eq(i).attr("index", i);
}
$(".carousel-img li").eq(0).fadeIn(10).siblings("li").fadeOut(10);
$(".carousel-nav li").eq(0).addClass("active").siblings().removeClass("active");
// 图片索引
var index = 0;
// 右边按钮点击事件
$(".carousel-control-right").click(function() {
index++;
if(index == $(".carousel-img li").length) {
index = 0;
}
$(".carousel-img li").eq(index).fadeIn(500).siblings("li").fadeOut(500);
$(".carousel-nav li").eq(index).addClass("active").siblings().removeClass("active");
});
// 左边按钮点击事件
$(".carousel-control-left").click(function() {
index--;
if(index == -1) {
index = $(".carousel-img li").length - 1;
}
$(".carousel-img li").eq(index).fadeIn(500).siblings("li").fadeOut(500);
$(".carousel-nav li").eq(index).addClass("active").siblings().removeClass("active");
});
// 导航栏li
$(".carousel-nav li").mouseover(function() {
index = $(this).attr("index");
$(".carousel-img li").eq(index).fadeIn(500).siblings("li").fadeOut(500);
$(".carousel-nav li").eq(index).addClass("active").siblings().removeClass("active");
});
});
</script>
</html>