js运动事件函数详解


Posted in Javascript onOctober 21, 2016

本文实例为大家分享了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,可以看到等宽高变完,然后透明度发生变化。

js运动事件函数详解

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

Javascript 相关文章推荐
jQuery 使用手册(七)
Sep 23 Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
jQuery图片播放8款精美插件分享
Feb 17 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
Vue声明式渲染详解
May 17 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
vue实现select下拉显示隐藏功能
Sep 30 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 Javascript
javascript轮播图算法
Oct 21 #Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
Oct 21 #Javascript
javascript简易画板开发
Apr 12 #Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 #Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 #Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 #Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 #Javascript
You might like
Php中使用Select 查询语句的实例
2014/02/19 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
项目实践之javascript技巧
2007/12/06 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
2012/02/03 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
用js编写的简单的计算器代码程序
2015/08/04 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
python实现超简单端口转发的方法
2015/03/13 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
python3处理含有中文的url方法
2018/05/10 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
C#笔试题集合
2013/06/21 面试题
四风问题自查自纠工作情况报告
2014/10/28 职场文书
婚宴邀请函
2015/01/30 职场文书
工作调动申请报告
2015/05/18 职场文书
党小组鉴定意见
2015/06/02 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers
分享几种python 变量合并方法
2022/03/20 Python
Java无向树分析 实现最小高度树
2022/04/09 Javascript