Web前端基础（08）笔记

###事件模拟

模拟触发某个元素的某个事件
格式: 元素对象.trigger(“事件名称”);
$(“input”).trigger(“click”);

###鼠标移入移出事件合并 hover

将鼠标移入和移出两个事件合并到一起
//给元素添加鼠标移入移出合并事件
$(“div”).hover(function(){
//鼠标移入时执行
$(this).css(“color”,“red”);
},function(){
//鼠标移出时执行
$(this).css(“color”,“green”);
});
###动画相关
隐藏元素对象.hide(时间,方法);
显示元素对象.show(时间,方法);
淡出元素对象.fadeOut(时间,方法);
淡入元素对象.fadeIn(时间,方法);
上滑元素对象.slideUp(时间,方法);
下滑元素对象.slideDown(时间,方法);
自定义元素对象.animate({“样式名”:“值”},时间);

练习 1.轮播图

- 锐客网 ="text/css"> div,img{ width: 400px; height: 250px; } div{ position: relative; /* 参照物 */ overflow: hidden; } img{ position: absolute; } 文章图片文章图片文章图片文章图片 ="../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"> ="text/javascript"> //得到所有图片遍历 i代表数组遍历时的下标 $("img").each(function(i){ //this代表当前遍历的数据中的js对象 0*400 1*400 2*400 $(this).css("left",i*400); }) //开启定时器移动图片 setInterval(function(){ //得到所有图片并且遍历 $("img").each(function(){ //得到图片当前的left值 parseInt把px去掉 10px->10 var left = parseInt($(this).css("left")); //让left值减少 left-=1; //判断图片是否移出div if(left<=-400){ //让当前图的位置移动到最后面 left=1200; } //再把减少后的left值赋值给元素 $(this).css("left",left+"px"); }) },10)

文章图片

文章图片

2.hover事件

- 锐客网刘备关羽张飞 ="../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"> ="text/javascript"> //给元素添加鼠标移入移出合并事件 $("div").hover(function(){ //鼠标移入时执行 $(this).css("color","red"); },function(){ //鼠标移出时执行 $(this).css("color","green"); }); setTimeout(function(){ //事件模拟参数为事件名称(没有on) $("input").trigger("click"); },3000);

文章图片

3.动画相关

- 锐客网 ="text/css"> img{ width: 280px; height: 350px; } 文章图片 ="../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"> ="text/javascript"> $("input:eq(0)").click(function(){ //隐藏时间后面的参数是动画完成后执行的 $("img").hide(2000,function(){ alert("隐藏完毕"); }); }) $("input:eq(1)").click(function(){ $("img").show(2000); }) $("input:eq(2)").click(function(){ $("img").fadeOut(2000); //淡出 }) $("input:eq(3)").click(function(){ $("img").fadeIn(2000); //淡入 }) $("input:eq(4)").click(function(){ $("img").slideUp(2000); //上滑 }) $("input:eq(5)").click(function(){ $("img").slideDown(2000); //下滑 }) $("input:eq(6)").click(function(){ //修改元素的显示方式为相对定位 $("img").css("position","relative"); //设置自定义动画 $("img").animate({"left":"200px"},1000) .animate({"top":"200px"},1000) .animate({"left":"0px"},1000) .animate({"top":"0px"},1000) .animate({"width":"520px","height":"630px"},1000) .animate({"width":"280px","height":"350px"},1000) .fadeOut(1000,function(){ ; }); });