01

Can solve the movement

  • The element moves up, down, left, and right at a uniform speed
  • The opacity of the image changes
  • The picture by
  • Element height width border pixel changes
  • Suitable for multiple object motion and chain motion
  • Change the position of the element

02

Auxiliary function

The one little function we need to use is when we get a style, we can only get an interline style using Elements. Style. attribute, and most of what we need to do is inside CSS code, so we use this function

  • Parameters:
    • Obj elements
    • Attr attribute
    • Return value: property value
function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; }}Copy the code

03

Movement framework

  • Parameters:
    • Obj elements
    • {width: 300, height: 300}
    • EndFun A function to execute after the current movement completes
  • As an attribute of OBJ, timer can avoid closing timer error and motion termination when multiple objects move.
  • Json arrays can pass multiple parameters and can change multiple property values at the same time
  • EndFun allows you to do chain movements, with one movement ending to open up other movements
Function startMove(obj, json, endFun) {// Close the obJ timer clearInterval(obj.timer); // timer obj.timer = setInterval(function() {var bStop = true; If (attr == 'opacity') {var cur = 0 Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { var cur = parseInt(getStyle(obj, attr)); } var speed = (json[attr] - cur) / 6; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // If (cur! = json[attr]) bStop = false; Opacity = (cur + speed) / 100; opacity = (cur + speed); obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')'; } else { obj.style[attr] = cur + speed + 'px'; If (bStop) {clearInterval(obj.timer); if(endFun) endFun(); }}, 30); }Copy the code

04

use

  1. The introduction of JS
  2. Use the startMove () function where you need it
  3. I’m just showing you a simple little example, but you can do a lot more than that, you can move the picture from height, you can make it look like it’s going up and down and so on
#div1 { height: 50px; width: 50px; background: red; Opacity: 0.5; filter: alpha(opacity: 50); position: absolute; top: 0; border: 1px solid black; } window.onload = function() { var oDiv = document.getElementById('div1'); oDiv.onmouseover = function() { startMove(oDiv, {width: 100,height: 150,opacity: 100}, function() { startMove(oDiv, {width: 150}); }); }; oDiv.onmouseout = function() { startMove(oDiv, {borderWidth:10}); }; };
     

    
Copy the code

05

Move.js framework download