高级动画(一)
1.图片跟着鼠标飞动画
利用了鼠标的移动事件以及元素的坐标属性。
?
var?imgObj?=?document.querySelector("#imgObj");
??//?鼠标移动事件
??document.onmousemove?=?function?(event)?{
????var?event?=?event?||?window.event;
????var?leftObj?=?event.clientX?-?imgObj.clientWidth?/?2;
????var?topObj?=?event.clientY?-?imgObj.clientHeight?/?2
????imgObj.style.left?=?leftObj?+?"px";
????imgObj.style.top?=?topObj?+?"px";
??}
2.移动产生絮条动画
利用了鼠标的移动事件以及元素的坐标属性以及元素的显示与隐藏。
?
?window.onload?=?function(){
????????//所有的盒子都获取到
????????var?box?=?document.getElementsByTagName("div");
????????????//给文档绑定拖动事件
????????????document.onmousemove?=?function(event){
????????????????var?j=?0;
????????????????//给一个计时器
????????????????var?timer?=?setInterval(function(){
????????????????????j++;
????????????????????//20毫秒显示一个box,然后随着光标移动（给盒子定位）
????????????????????//盒子的left和top值相当于光标的横纵坐标
????????????????????box[j].style.display?=?"block";
????????????????????box[j].style.left?=?(event.clientX-box[j].offsetWidth/2)+"px";
????????????????????box[j].style.top?=?(event.clientY-box[j].offsetHeight/2)+"px";
????????????????????if(j==box[j].length){
????????????????????????clearInterval(timer);
????????????????????}
????????????????},50)
????????????}
????}
3.tab切换动画
?
案例原理(~~~ 给每个要点击标签绑定事件，并且给每一个要点击的标签设置index索引，当点击的时候把其他的class样式移除掉，给当前的点击标签设置样式，下方展示区域其实为四个盒子容器，当我们获取这些盒子容器的时候，实际上可以是一个伪数组，因为标签在点击的时候可以获取到索引，那么就可以与下方的显示容器进行某种关联，从而达到具体控制某一个的目的)
演示示例：tab切换
4.拖拽盒子动画
新增事件：
onmousedown:鼠标按下事件
onmouseup:鼠标抬起事件
?
var?outer?=?document.getElementById("outer");
??var?inner?=?document.getElementById("inner");
??//?var?left?=?0;//横坐标
??//?var?top?=?0;//纵坐标
??//鼠标按下事件
??inner.onmousedown?=?function?()?{
????console.log(11)
????//给文档绑定鼠标移动事件
????document.onmousemove?=?function?(event)?{
??????console.log(222)
??????var?left?=?event.clientX?-?outer.offsetLeft?-?inner.clientWidth?/?2;
??????var?top?=?event.clientY?-?outer.offsetTop?-?inner.clientHeight?/?2;
??????//?判断邻节点
??????if?(left?<=?0)?{
????????left?=?0;
??????}?else?if?(left?>=?outer.clientWidth?-?inner.offsetWidth)?{
????????left?=?outer.clientWidth?-?inner.offsetWidth;
??????}
??????if?(top?<=?0)?{
????????top?=?0;
??????}?else?if?(top?>=?outer.clientHeight?-?inner.offsetHeight)?{
????????top?=?outer.clientHeight?-?inner.offsetHeight;
??????}
??????//给元素定位
??????inner.style.left?=?left?+?"px";
??????inner.style.top?=?top?+?"px";
????}
??}
??//鼠标的松开(抬起来)事件
??document.onmouseup?=?function?()?{
????//鼠标抬起来之后就拖动了。
????document.onmousemove?=?null;
??}
5.碰壁反弹动画
?
代码：
var?timer?=?null;//计时器
??var?leftM?=?0;//移动的水平距离
??var?moveX?=?true;//定义水平正方向，假设moveX=true,就是水平正方向，当moveX=false,就是水平反方向
??var?topM?=?0;//移动的垂直距离
??var?moveY?=?true;//定义垂直方向，假设moveY=true,就是垂直正方向，当moveY=false,就是垂直反方向
??//获取元素
??var?outer?=?document.getElementById("outer");//大盒子
??var?inner?=?document.getElementById("inner");//小盒子
??var?start?=?document.getElementById("start");//开始
??var?stop?=?document.getElementById("stop");//暂停
??//?小盒子移动水平方向的最大距离
??var?maxLeft?=?outer.clientWidth?-?inner.offsetWidth;
??//小盒子移动垂直方向的最大距离
??var?maxTop?=?outer.clientHeight?-?inner.offsetHeight;
??//绑定单击事件
??//单击开始
??start.onclick?=?function?()?{
????//调用计时器
????timer?=?setInterval(move,?5);
????this.disabled?=?true;
????stop.disabled?=?false;
??}
??//?单击结束
??stop.onclick?=?function?()?{
????//?清空计时器
????clearInterval(timer);
????this.disabled?=?true;
????start.disabled?=?false;
??}
??//定义计时器move函数
??function?move()?{
????//?X轴移动
????if?(moveX?==?true)?{
??????if?(leftM?<?maxLeft)?{
????????leftM++;
??????}?else?{
????????//当leftX?达到正方向领界点是，改变反向
????????moveX?=?false
??????}
????}?else?{
??????if?(leftM?>?0)?{
????????leftM--;
??????}?else?{
????????//?当leftX?达到反方向领界点时，改变反向
????????moveX?=?true;
??????}
????}
????//Y轴移动
????//正方向
????if?(moveY?==?true)?{
??????if?(topM?<?maxTop)?{
????????topM++;
??????}?else?{
????????//达到正方向领界点改变方向
????????moveY?=?false;
??????}
????}?else?{
??????//反方向
??????if?(topM?>?0)?{
????????topM--;
??????}?else?{
????????//达到反方向领界点改变方向
????????moveY?=?true;
??????}
????}
????inner.style.left?=?leftM?+?"px";
????inner.style.top?=?topM?+?"px";
??}
6.秒表计时器动画
?
案例原理：单击开始，开始计时，单击暂停，计时结束，单击停止归零，计时结束并时间清零
<div?id="div1">
????<div?id="count">
??????<span?id="id_H">00</span>
??????<span?id="id_M">00</span>
??????<span?id="id_S">00</span>
????</div>
????<input?id="start"?type="button"?value="计时开始">
????<input?id="pause"?type="button"?value="暂停">
????<input?id="stop"?type="button"?value="停止归零">
??</div>
<script>
//可以将查找标签节点的操作进行简化??var?btn?=?getElementById('btn')
????function?$(id)?{
??????return?document.getElementById(id)
????}
????window.onload?=?function?()?{
??????//点击开始建?开始计数
??????var?count?=?0
??????var?timer?=?null?//timer变量记录定时器setInterval的返回值
??????$("start").onclick?=?function?()?{
????????timer?=?setInterval(function?()?{
??????????count++;
??????????//?需要改变页面上时分秒的值
??????????showTime();
????????},?1000)
????????//1000毫秒?=1秒
????????this.disabled?=?true;
??????}
??????$("pause").onclick?=?function?()?{
????????//取消定时器
????????clearInterval(timer)
????????$("start").disabled?=?false;
??????}
??????//停止记数??数据清零??页面展示数据清零
??????$("stop").onclick?=?function?()?{
????????//取消定时器
????????clearInterval(timer)
????????//数据清零??总秒数清零
????????count?=?0
????????//页面展示数据清零
????????showTime();
????????$("start").disabled?=?false;
??????}
??????//封装一个处理单位数字的函数
??????function?showNum(num)?{
????????if?(num?<?10)?{
??????????return?'0'?+?num
????????}
????????return?num
??????}
??????//?封装一个计时数字显示函数
??????function?showTime()?{
????????$("id_S").innerHTML?=?showNum(count?%?60)//秒
????????$("id_M").innerHTML?=?showNum(parseInt(count?/?60)?%?60)//分
????????$("id_H").innerHTML?=?showNum(parseInt(count?/?60?/?60))//小时
??????}
????}
??</script>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
