亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

javascript實(shí)現(xiàn)網(wǎng)頁(yè)中涉及的簡(jiǎn)易運(yùn)動(dòng)(改變寬高、透明度、位置)

 更新時(shí)間:2015年11月29日 10:12:35   作者:坐觀風(fēng)云  
這篇文章主要介紹了javascript實(shí)現(xiàn)網(wǎng)頁(yè)中涉及的簡(jiǎn)易運(yùn)動(dòng),比如改變寬高、透明度、位置等,感興趣的小伙伴們可以參考一下

平時(shí)工作中寫(xiě)網(wǎng)頁(yè)涉及的運(yùn)動(dòng)往往都非常簡(jiǎn)單,比如改變寬高,透明度,位置,是最常用的幾種形式,為了省事,整合了下,于是就有了下面這個(gè)東東:

兼容:IE系列、chrome、firefox、opera、Safari、360

/*
 javascript簡(jiǎn)易運(yùn)動(dòng)
 
 Move.action(dom對(duì)象,json格式屬性值對(duì),緩動(dòng)參考值,回調(diào)方法)

 示例:
 var box = document.getElementById('Ele');
 Move.action(box,{width:500,height:200,left:200,top:100,marginLeft:10,opacity:.5},5,function(){
  console.log('end');
 });

*/


var Move = {

 version: '1.5',

 //判斷是否空對(duì)象
 isEmptyObject: function(obj) {
 for (var attr in obj) {
 return false;
 }
 return true;
 },
 //取CSS樣式值
 getStyle: function(obj, attr) {
 if (obj.currentStyle) { //IE
 return obj.currentStyle[attr];
 } else {
 return getComputedStyle(obj, null)[attr];
 }
 },
 //運(yùn)動(dòng)
 action: function(obj, json, sv, callback) {

 _this = this;

 //obj是否為空
 if (_this.isEmptyObject(obj)) {
 return false;
 }

 //運(yùn)動(dòng)開(kāi)始 
 clearInterval(obj.timer);
 obj.timer = setInterval(function() {
 var isAllCompleted = true, //假設(shè)全部運(yùn)動(dòng)都完成了
 speed, //速度
 attrValue, //當(dāng)前值
 targetV; //目標(biāo)值
 for (attr in json) {
 attrValue = _this.getStyle(obj, attr);
 switch (attr) {
  case 'opacity':
  attrValue = Math.round((isNaN(parseFloat(attrValue)) ? 1 : parseFloat(attrValue)) * 100);
  speed = (json[attr] * 100 - attrValue) / (sv || 4);
  targetV = json[attr] * 100;
  break;
  default:
  attrValue = isNaN(parseInt(attrValue)) ? 0 : parseInt(attrValue);
  speed = (json[attr] - attrValue) / (sv || 4);
  targetV = json[attr];
 }

 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 //如果循環(huán)過(guò)程中存在尚未結(jié)束的運(yùn)動(dòng),isAllCompleted為假
 if (attrValue != targetV) {
  isAllCompleted = false;
 }

 switch (attr) {
  case 'opacity':
  {
  obj.style.filter = "alpha(opacity=" + (attrValue + speed) + ")";
  obj.style.opacity = (attrValue + speed) / 100;
  };
  break;
  default:
  obj.style[attr] = attrValue + speed + 'px';
 }
 }

 //所有循環(huán)結(jié)束后,只有當(dāng)全部運(yùn)動(dòng)結(jié)束后(isAllCompleted=true)時(shí)才關(guān)閉定時(shí)器
 if (isAllCompleted) {
 clearInterval(obj.timer);

 if (typeof callback === 'function') {
  callback();
 }

 }
 }, 30);
 }

};

以上就是描述了javascript實(shí)現(xiàn)網(wǎng)頁(yè)中涉及的簡(jiǎn)易運(yùn)動(dòng)的方法,希望對(duì)大家實(shí)現(xiàn)javascript簡(jiǎn)易運(yùn)動(dòng)有所啟發(fā)。

相關(guān)文章

最新評(píng)論