javascript实现网页中涉及的简易运动（改变宽高、透明度、位置）

平时工作中写网页涉及的运动往往都非常简单，比如改变宽高，透明度，位置，是最常用的几种形式，为了省事，整合了下，于是就有了下面这个东东：

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

/*
 javascript简易运动

 Move.action(dom对象,json格式属性值对，缓动参考值，回调方法)

 示例：
　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',

 //判断是否空对象
 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];
 }
 },
 //运动
 action: function(obj, json, sv, callback) {

 _this = this;

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

 //运动开始
 clearInterval(obj.timer);
 obj.timer = setInterval(function() {
 var isAllCompleted = true, //假设全部运动都完成了
 speed, //速度
 attrValue, //当前值
 targetV; //目标值
 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);
 //如果循环过程中存在尚未结束的运动，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';
 }
 }

 //所有循环结束后，只有当全部运动结束后（isAllCompleted=true）时才关闭定时器
 if (isAllCompleted) {
 clearInterval(obj.timer);

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

 }
 }, 30);
 }

};

以上就是描述了javascript实现网页中涉及的简易运动的方法，希望对大家实现javascript简易运动有所启发。

赞 (0)

相关推荐

  • JavaScript通过改变文字透明度实现的文字闪烁效果实例

    JavaScript通过改变文字透明度实现的文字闪烁效果实例

    本文实例讲述了JavaScript通过改变文字透明度实现的文字闪烁效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <html> <head> <meta charset="utf-8"> <title>JS文字闪烁</title> <style type="text/css"> .title { font-size:50px; font-family:Arial b

  • javascript感应鼠标图片透明度显示的方法

    本文实例讲述了javascript感应鼠标图片透明度显示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>感应鼠标的图片透明度显示效果</title> <head> <script language="JavaScript1.2"> function makevisible(cur,which){ if (which==0) cur.filters.alpha.opacity=

  • 原生js和jquery中有关透明度设置的相关问题

    在日常开发的网站中,常常会用到设置透明度问题,最简单的就是图片的淡入淡出效果.下面我介绍一下在原生js和jQuery中设置透明度的相关问题和注意点: 1 透明度样式设置 透明度在IE浏览器和其他相关浏览器中的设置方法不太相同,IE使用filter:alpha属性,firefox使用opactiy属性,下面示例设置透明度为30%: IE:filter: alpha(opacity:30): firefox:opacity(0.3): 2 原生js设置透明度 为了兼容IE与其他浏览器对透明度的设置,

  • js实现鼠标划过给div加透明度的方法

    本文实例讲述了js实现鼠标划过给div加透明度的方法.分享给大家供大家参考.具体实现方法如下: <script language="javascript"> <!-- Begin if ((navigator.appName.indexOf('Microsoft')+1)) { document.write('<style type="text/css"> #div2 a img{ filter:alpha(opacity=100)}

  • JS实现浏览器状态栏文字闪烁效果的方法

    JS实现浏览器状态栏文字闪烁效果的方法

    本文实例讲述了JS实现浏览器状态栏文字闪烁效果的方法.分享给大家供大家参考,具体如下: 这里演示为你的IE浏览器状态栏增加文字闪烁效果,请看下面的状态栏中的文字一直不停的闪烁,火狐下可能效果不正常,本代码只针对IE浏览器. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-status-bar-txt-blink-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tra

  • js实现感应鼠标图片透明度变化的方法

    本文实例讲述了js实现感应鼠标图片透明度变化的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>感应鼠标图片透明度变化</title> <SCRIPT language="JavaScript"> <!-- function makevisible(cur,which){ if (which==0) cur.filters.alpha.opacity=100

  • JavaScript 平滑文字闪烁

    colors2 = new Array(6); colors2[0]="#fef4d9"; colors2[1]="#333300"; colors2[2]="#665500"; colors2[3]="#997700"; colors2[4]="#CC9900"; colors2[5]="#FFCC00"; var i=0; function fLi2() { line2.style.

  • 原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)

    经常看到网页里图片渐变显示,自己写一个. 原理很简单就是修改元素的css透明度. 在线预览效果:http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/ 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <

  • js实现透明度渐变效果的方法

    本文实例讲述了js实现透明度渐变效果的方法.分享给大家供大家参考.具体分析如下: 这里可实现一开始元素的透明度是30,鼠标移上的时候,透明度慢慢增加,到透明度100停止.鼠标移出,透明度慢慢减少,减少到30的效果. 要点一:因为无法直接获取和改变透明度的值,可以把透明度值赋给一个变量,让变量变化,最后把变量的值再赋给元素的透明值. var alpha=30; 要点二:判断目标值和目前透明值,来判定是正向速度还是负向速度. if(target > alpha){ speed = 2; }else{

  • js改变透明度实现轮播图的算法

    前面有分享过改变层级的轮播图算法,今天继续利用透明度来实现无位移的轮播图算法. 实现逻辑:将所有要轮播的图片全部定位到一起,即一层一层摞起来,并且利用层级的属性调整正确的图片顺序,将图片的透明度全部设置为0,然后在让初始的第一张图片的透明度为1即可,具体算法如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>改变透明度算法(经典)</title&

  • JS CSS制作饱含热情的镶边文字闪烁特效

    文字闪烁 function glowit(which){ if (document.all.glowtext[which].filters[0].strength==2) document.all.glowtext[which].filters[0].strength=1 else document.all.glowtext[which].filters[0].strength=2 } function glowit2(which){ if (document.all.glowtext.filt

  • js实现文字闪烁特效的方法

    js实现文字闪烁特效的方法

    本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下: 运行效果图: 实现原理:使用style对象来设置css属性,结合定时器就可以实现js实现文字闪烁特效. 具体代码如下 <html> <head> <meta charset="gb2312" /> <title>js实现文字闪烁特效</title> </head> <script> var flag = 0; fun

随机推荐