js运动事件函数详解

本文实例为大家分享了js运动事件函数,供大家参考,具体内容如下

HTML

<div id="breedsdog">
<h2 class="title">The Dog</h2>
<p class="describe">Split between cat,belong to the cat family,cat,cat,is the world's more widely<br>
in the family pet.Cats ancestors is presumably desert cats</p>
<div class="breedsdog1">
<div class="img">
<img src="img2/labrador.jpg"/>
<a class="lookdog" href="#"></a>
</div>
<div class="img_txt">
<p class="chinese">拉布拉多</p>
<p class="english">Labrador</p>
<p class="introduce">
拉布拉多猎犬因原产地在加拿大的纽芬兰与拉布拉多省而得名。拉布拉多犬是一种中大型犬类,个性忠诚、大气、憨厚、温和、阳光、开朗、活泼,智商极高,也对人很友善,是非常适合被选作经常出入公共场合的导盲犬或地铁警犬及搜救犬和其他工作犬的狗品种,跟哈士奇(西伯利亚雪撬犬)和金毛猎犬并列三大无攻击性犬类,拉布拉多智商位列世界犬类第七。
</p>
</div>
</div>

</div>

CSS布局样式省略

现在a.lookdog的样式我设为position:absolutely,宽高设为0。实现的特效:当鼠标移入div.img上,实现a.lookdog的宽高自动展开的缓冲动画,并且展开完毕后,透明度变低的遮罩背景图层。当然我们用css3也能实现这种特效,但是css3的坑是不完全支持IE浏览器,所以用javascript来实现运动缓冲动画是最理想的。

javascript

函数封装部分

//根据类名和父对象ID获取属性节点,解决getelementsByClass对浏览器的兼容性问题

function getbyclass(classname,parent){

    //传入ID获取父节点,如果该参数为空就为document

var oParent=parent?document.getElementById(parent):document;

    //定义一个空数组来存放属性节点
 var els=[];

    //定义一个数组存放父对象的所有子节点

var elements=oParent.getElementsByTagName("*");

    //遍历所有子节点,根据类名把所有的子对象找出来,并且放在els数组内
 for(var i=0;i<elements.length;i++){
 if(elements[i].className==classname){
 els.push(elements[i]);
 }
 }
 return els;
 }

//根据对象要获取的属性名来得到属性值

function getStyle(obj,stylename){

    //针对IE浏览器获取样式方法
if(obj.currentStyle){
return obj.currentStyle[stylename];

    //针对其他浏览器获取样式方法
}else if(getComputedStyle(obj,false)){
return getComputedStyle(obj,false)[stylename];
}
}

//缓冲动画主函数,传参类型:(对象,jaso格式要改变的样式值(可多个),缓冲系数,执行周期时间(值越小速度越快,越大越慢),回调函数(是否有多次动画的播放,可有可无))

function MoveJason(obj,jason,average,cycle,continuefunction){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var stylename in jason){//针对多效果的缓冲动画
// obj.style[stylename]=jason[stylename];
// }
if(stylename=="opacity"){
var offvalue=Math.round(parseFloat(getStyle(obj,stylename))*100);
var speed=(jason[stylename]-offvalue)/average;
  speed=speed>0?Math.ceil(speed):Math.floor(speed);
  if(speed==0){
clearInterval(obj.timer);
if(continuefunction) continuefunction();//回调函数,判断是否有多次执行
  }else{
obj.style[stylename]=(offvalue+speed)/100;
obj.style.filter="alpha(opacity:"+(offvalue+speed)+")";
  }
}else{
var offvalue=parseInt(getStyle(obj,stylename));
var speed=(jason[stylename]-offvalue)/average;
  speed=speed>0?Math.ceil(speed):Math.floor(speed);
  if(speed==0){
clearInterval(obj.timer);
if(continuefunction) continuefunction();
  }else{
obj.style[stylename]=offvalue+speed+"px";
  }
  }
}
},cycle);
}

页面初始化函数,方法调用

window.onload=function(){

var imgdog=getbyclass("img","breedsdog");//在父对象breedsdog上找到所有的div.img

    //给所有的div.img添加鼠标移入,鼠标移出事件
for(var i=0;i<imgdog.length;i++){

imgdog[i].onmouseover=function(){
var obj=this.children[1];
            MoveJason(obj,{"height":376,"width":206},5,30,function(){//缓冲动画的函数调用,当执行完宽高值的缓冲变化,再回调函数执行透明度缓冲变化。以下同理,可以多层嵌套实现多个回调。
        MoveJason(obj,{"opacity":30},5,30);
    });
}
imgdog[i].onmouseout=function(){
var obj=this.children[1];
            MoveJason(obj,{"height":0,"width":0},5,30,function(){
        MoveJason(obj,{"opacity":80},5,30);
    });
}
}

}

鼠标移入移出效果图如下,我多加个了几个div.img,可以看到等宽高变完,然后透明度发生变化。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • js+html5实现的自由落体运动效果代码

    本文实例讲述了js+html5实现的自由落体运动效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

  • 原生JS实现风箱式demo,并封装了一个运动框架(实例代码)

    声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的框架. function getStyle(obj,attr) { if(obj.currentStyle){ return obj.currentStyle[attr];//为了获取IE下的属性值 }else{ return window.getComputedStyle(obj,null)[at

  • Js实现简单的小球运动特效

    废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=utf-"/> </head> <body style="background:pink;"

  • 原生javascript实现匀速运动动画效果

    本文向大家介绍一个javascript实现的动画.点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动.请看下面代码: <html> <head> <meta charset="gb2312"> <head> <title>javascript实现的简单动画</title> <style type="text/css"> #mydiv { width:50px;

  • JS弹性运动实现方法分析

    本文实例分析了JS弹性运动实现方法.分享给大家供大家参考,具体如下: 描述:像弹簧一样左右弹动,最后缓慢停下来 一.加减速运动 1.加速运动 var iSpeed=0; iSpeed++; 速度越来越快,最后冲出去 2.减速运动 var iSpeed=20; iSpeed--; 速度越来越慢,降到0后开始变负值往反方向运动 二.弹性运动 1.在目标点左边,加速:目标点右边,减速,如 if(div1.offsetLeft<300){ iSpeed=iSpeed+1; //等同iSpeed++; }

  • JS碰撞运动实现方法详解

    本文实例分析了JS碰撞运动实现方法.分享给大家供大家参考,具体如下: 描述:撞到目标点弹回来(速度反转) 一.无重力的漂浮div var div1=document.getElementById("div1"); var iSpeedX=6; var iSpeedY=8; setInterval(function(){ var l=div1.offsetLeft+iSpeedX; var t=div1.offsetTop+iSpeedY; if(t>=document.docum

  • javascript运动效果实例总结(放大缩小、滑动淡入、滚动)

    本文实例总结了javascript运动效果实现与用法.分享给大家供大家参考,具体如下: 一.图片放大缩小效果: <!doctype html> <html> <head> <meta charset="utf-8"> <title>图片放大缩小</title> <style> *{ margin:0; padding:0; list-style:none;} #ulList{ margin:50px;}

  • javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)

    运动除了直线运动和曲线运动两种运动形式外,还有一种运动形式是鼠标跟随运动,而这种跟随运动需要用到三角函数的相关内容或者需要进行比例运算.本文将以几个小实例来介绍角度运动的相关内容 眼球转动 在很多网页中,都存在着跟随运动,比如眼球转动.鼠标在网页中移动时,眼球也会跟着朝相应方向转动 上面是眼球转动的示意图,(x0,y0)是眼球的位置,而(x,y)是鼠标的位置.设直线与垂直方向的夹角为a,假设圆心点坐标为(0,0),可以得到以下公式 tan(a) = x/y = x0/y0 x0 = r*sin(

  • js多个物体运动功能实例分析

    本文实例分析了js实现的多个物体运动功能.分享给大家供大家参考,具体如下: 与单个的区别:得知道哪个在动,所以运动函数需要两个参数,出了目标iTarget之外,还要obj.另外需要多个计数器,否则当一个还没运动完就移入另一个物体会发生卡壳 window.onload=function(){ var aDiv=document.getElementsByTagName("div"); var timer=null; var i; for(i=0;i<aDiv.length;i++)

  • JS高级运动实例分析

    本文实例分析了JS高级运动.分享给大家供大家参考,具体如下: 一.链式运动框架 1.他需要一个回调函数,在运动停止时,开始下一次运动(执行函数) 多物体运动框架改为如下: function startMove(obj,attr,iTarget,fn){ ... if(iCur==iTarget){ clearInterval(obj.timer); fn(); }... }; 然后就可以用它,比如先变宽再变高最后变透明度 startMove(this,'width',300,function()

  • JS控制层作圆周运动的方法

    本文实例讲述了JS控制层作圆周运动的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; char

  • javascript弹性运动效果简单实现方法

    本文实例讲述了javascript弹性运动效果简单实现方法.分享给大家供大家参考,具体如下: 弹性运动实现原理:加速运动+减速运动+摩擦运动 运行效果截图如下: 实例代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px

随机推荐