【自定义动画】
《简介》
这是jquery当中最强大的动画类型,它可以做一切其他动画的效果。它有一个外号,号称动态的css。
《基本结构》
animate({k:v,k:v,k:v},500) 作用:这个函数可以实现css中一切以数字为值的属性的过渡动画效果。 是数字的值可以直接省略掉px来书写。
参数1:表示要修改的css属性集,前提只能是值为数字的属性。带有破折线的属性写为驼峰式命名法。 例如marginTop;
参数2:表示控制动画的时间。
总结:它的使用方式特别像css函数的多属性修改的使用方式。
参数3:可以不写,作用是用来设置动画的缓动效果,默认jquery提供了两个值’linear’,’swing’
参数4:也可不写,参数4学名叫做回调函数,什么是回调函数,就是指动画执行完了以后才执行的指令。
***参数1当中一些特殊值,jquery为css属性准备了3个特殊值表示两种极端的切换。
K:’hide’ 表示最小;
K:’show’ 表示当前;
K:’toggle’ 表示在两个极端切换。
【加工函数】
*****简介:jquery当中加工函数可以人为是最有用最有价值的函数,他能帮我们做很多css的重复性工作。它的用处类似于for循环但是使用起来更简单。
《基本结构》
$(‘div’).each(function(index,element){}) 作用:对选中的每个元素一次进行加工。
重点参数:index参数:表示当次被加工元素的索引值。就是一个数字;
element参数:表示当次被加工元素本身。注意用的时候需要写成$(element);
总结:工作当中对于精灵图的坐标经常会使用加工函数来计算得出,最省事。
案例总结:
第一:如果希望制作所有浏览器都兼容的半透明效果只能借助fadeTo;其中制作透明背景要更麻烦一些,只能借助两个标签绝对定位设置z-index从新组成一个盒子。
第二:大量重复性工作多用each
手风琴案例总结:
只有一件事需要你注意,当容器中每个元素的宽度固定并且排列在一排为了保证不向下掉,可以使用一个非常好用的办法。给出父级足够大的宽度例如9999px;让他足以容纳所有的子级将来的宽度变化。然后通过父级的父级指定一个较为合理的宽度并且添加溢出隐藏修剪掉多余的尺寸。
【事件对象】
什么是事件对象?
任何的事件在执行的指令里面填写一个e作为参数,将来这个e就表示事件本身。它可以代表当前任何发生的事件类型。这个e是一个对象它的内部就理所应当的有很多数据和功能,其中 e.pageX 表示发生事件的横坐标。 e.pageY表示发生事件的纵坐标。
知识点:
对于网页来讲最大的事件源就是document。
新的事件类型:
mousemove 表示当鼠标移动的时候触发执行指令,这个事件有一个与众不同的特点就是它会连续出发执行多次指令。 原理是当鼠标在事件源上任何方向只要移动1像素的距离就会出发执行一次。连续移动就会连续触发。
网友评论