web前端技术应用 课件 项目四 任务二 完成动画与鼠标交互效果

项目四任务二

完成动画与鼠标交互效果

目录说出setTimeout()函数的语法牢记常见鼠标事件函数及键盘事件的语法说出表单事件的语法应用鼠标事件函数正确使用键盘事件熟练使用表单事件通过制作动画与鼠标交互效果提升逻辑思维能力和合作学习能力预期呈现效果1.setTimeout()函数setTimeout()方法在若干毫秒后调用函数，只执行一次。setTimeout(()=>{$(".loader").remove()；}，1600)1.setTimeout()函数setTimeout()方法在若干毫秒后调用函数，只执行一次。setTimeout(()=>{$(".loader").remove()；}，1600)2.事件HTML事件可以是浏览器行为，也可以是用户行为。jQuery基本事件有以下6种：①页面加载事件；②鼠标事件；③键盘事件；④表单事件；⑤编辑事件；⑥滚动事件。2.事件（1）常见的鼠标事件事件说明click鼠标单击事件mouseover鼠标移入事件mouseout鼠标移出事件mousedown鼠标按下事件mouseup鼠标松开事件mousemove鼠标移动事件2.事件（2）hover()hover()方法规定了当鼠标指针悬停在被选元素上时要运行的两个函数。$().hover(fn1,fn2)$(".page1_tab.ul-1li").hover(function(){代码1}，function(){代码2})2.事件（3）比较：mouseenter、mouseleave和mouseover、mouseoutmouseentermouseleavemouseovermouseout鼠标移入鼠标移出2.事件（3）比较：mouseenter、mouseleave和mouseover、mouseoutmouseentermouseover只要鼠标指针移入事件所绑定的元素或其子元素，都会触发该事件只有鼠标指针移入事件所绑定的元素时，才会触发该事件2.事件（3）比较：mouseenter、mouseleave和mouseover、mouseoutmouseleavemouseout只要鼠标指针移出事件所绑定的元素或其子元素，都会触发该事件只有鼠标指针移出事件所绑定的元素时，才会触发该事件2.事件（4）单击事件①给轮播图的按钮绑定单击事件$(".silie-btn").click(function(){}$(".silie-yuan.yuan").click(function(){}②给新闻中心的每个选项卡绑定单击事件$(".page3_tab.tab").click(function(){})3.数组及index()（1）定义数组varx=newArray()；varx=newArray(size)；varx=newArray(element0,element1,...,elementN)；3.数组及index()（2）数组下标与长度数组元素的个数即为数组长度数组下标是对数组元素的编号，从0开始，最大下标为数组长度减13.数组及index()（3）index()index()返回指定元素相对于其他指定元素的index位置。这些元素可通过jQuery选择器或DOM元素来指定。如果未找到元素，index()将返回-1。varindex=$(this).index()；3.this在JS中，this的意思为“这个；当前”，是一个指针型变量，它动态地指向当前函数的运行环境。例：在$("div").click(function(){……}中，$(this)等价于$("div")。而在$("p").click(function(){…