原生JS 封装运动函数 - 公司荣誉 - 正定县枫林商贸有限公司
现在的位置: 主页 > 公司荣誉 > 文章正文
原生JS 封装运动函数
作者:正定县枫林商贸有限公司 来源:www.hbflsm.com 发布时间:2017-09-12 16:33:06
原生JS 封装运动函数

在学原生JS之前,一直用jQuery 写运动,各种方便,但是不知其所以然,今天得空看了一个javascript 视频教程(这里不说了,以防广告的嫌疑),只能用一个词语形容之后的感觉-------醍醐灌顶。

/* - obj 指的是DOM对象 - json 指的是 CSS样式 - 例 startMove(oDiv,{width:100,height:100},function(){}) */ function startMove(obj,json,fnEnd){ clearInterval(obj.timer); //先清除之前的定时器 obj.timer = setInterval(function(){ var bStop = true; // 假设所有的值都到了 for( var attr in json ){ //遍历json属性 var cur = (attr == 'opacity') ? Math.round(parseFloat(getStyle(obj,attr))*100) : parseInt(getStyle(obj,attr)); //对opacity 特殊处理 var speed = (json[attr] - cur)/6; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //speed 数字转化,防止不能到达目标的bug if( cur != json[attr]) bStop = false; //如果没有达到目标值,则bStop设为false; if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity='+ (cur + speed) +')'; obj.style.opacity = (cur + speed)/100; }else{ obj.style[attr] = cur + speed + 'px'; } } if(bStop){ clearInterval(obj.timer); if(fnEnd) fnEnd(); //执行回调函数 } },30); } function getStyle(obj,name){ return obj.currentStyle ? obj.currentStyle[name] : window.getComputedStyle(obj,null)[name]; //浏览器兼容性处理,注意getComputedStyle为只读属性 } function getByClass(oParent,sClass){ var aEle = oParent.getElementsByTagName('*'); var aResult =[]; var re = new RegExp('\b' + sClass + '\b','i'); for(var i=0; i

此框架可以实现大部分的运动效果,下面是我写的仿百度首页幻灯片:

\

window.onload = function(){ var oSlide = document.getElementById('slide'); var asmallpicWrap = getByClass(oSlide,'smallpic')[0]; var asmallUl = asmallpicWrap.getElementsByTagName('ul')[0]; var abigpicWrap = getByClass(oSlide,'bigpic')[0]; var asmallpic = asmallpicWrap.getElementsByTagName('li'); var obigpic = abigpicWrap.getElementsByTagName('img'); var oprev = getByClass(oSlide,'prev')[0]; var onext = getByClass(oSlide,'next')[0]; var nowIndex = 2; var now = 0; //大图切换 for(var i=0; i

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:武汉网站建设公司哪家好 https://www.feimao666.com


  • 上一篇:WPF( 数据验证)
  • 下一篇:最后一页
  • 
    COPYRIGHT © 2015 正定县枫林商贸有限公司 ALL RIGHTS RESERVED.
    本站所有原创信息,未经许可请勿任意转载或复制使用 网站地图 技术支持:肥猫科技
    精彩专题:网站建设
    购买本站友情链接、项目合作请联系客服QQ:2500-38-100