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 相关文章推荐
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
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
深入PHP5中的魔术方法详解
2013/06/17 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
让IE8支持DOM 2(不用框架!)
2009/12/31 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
2018/12/12 Javascript
JavaScript HTML DOM元素 节点操作汇总
2019/07/29 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
python解析xml模块封装代码
2014/02/07 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
python正则实现计算器功能
2017/12/14 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
什么是python的列表推导式
2020/05/26 Python
Python容器类型公共方法总结
2020/08/19 Python
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
建筑节能汇报材料
2014/08/22 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
思想品德评语大全
2014/12/31 职场文书
不同意离婚上诉状
2015/05/23 职场文书