how to move/slide an image from left to right

前端 未结 3 1421
耶瑟儿~
耶瑟儿~ 2021-01-03 17:26

I want to slide or move a image from left to right something like in

http://rajeevkumarsingh.wix.com/pramtechnology

The read pentagonal box that moves Ok !<

相关标签:
3条回答
  • 2021-01-03 18:00

    Here is an example of moving an image to the right as well as fading in from a .js file instead of your index page directly:

    ----------My index.html page----------

    <!DOCTYPE html>
    <html>
    <body>
    
    <script src="myJava.js"></script>
    
    <script language="javascript" type="text/javascript">
        //In pixels
        var amountToMoveTotal = 1000;
        var amountToMovePerStep = 10;
        //In milliseconds
        var timeToWaitBeforeNextIncrement = 20;
    
        var amountToFadeTotal = 1.0;
        var amountToFadePerStep = 0.01;
    </script>
    
    <p>This one moves right on hover</p>
    <img onmouseover="moveRight(this, amountToMoveTotal, amountToMovePerStep, timeToWaitBeforeNextIncrement)" src="http://www.w3schools.com/jsref/smiley.gif" style="left:0px;top:50px;position:absolute;opacity:1.0;">
    <br><br>
    <p>This one fades in on hover</p>
    <img onmouseover="fadeIn(this, amountToFadeTotal, amountToFadePerStep, timeToWaitBeforeNextIncrement)" src="http://www.w3schools.com/jsref/smiley.gif" style="left:0px;top:150px;position:absolute;opacity:0.1;">
    
    </body>
    </html>
    

    ----------My myJava.js code----------

    var animate;
    var original = null;
    
    function moveRight(imgObj, amountToMoveTotal, amountToMovePerStep, timeToWaitBeforeNextIncrement)
    {
        //Copy original image location
        if (original === null){
            original = parseInt(imgObj.style.left);
        }
    
        //Check if the image has moved the distance requested
        //If the image has not moved requested distance continue moving.
        if (parseInt(imgObj.style.left) < amountToMoveTotal) {
            imgObj.style.left = (parseInt(imgObj.style.left) + amountToMovePerStep) + 'px';
    
            animate = setTimeout(function(){moveRight(imgObj, amountToMoveTotal, amountToMovePerStep, timeToWaitBeforeNextIncrement);},timeToWaitBeforeNextIncrement);
        }else {
            imgObj.style.left = original;
            original = null;        
            clearTimeout(animate);
        }
    }
    function fadeIn(imgObj, amountToFadeTotal, amountToFadePerStep, timeToWaitBeforeNextIncrement)
    {
        //Copy original opacity
        if (original === null){
            original = parseFloat(imgObj.style.opacity);
        }
    
        //Check if the image has faded the amount requested
        //If the image has not faded requested amount continue fading.
        if (parseFloat(imgObj.style.opacity) < amountToFadeTotal) {
            imgObj.style.opacity = (parseFloat(imgObj.style.opacity) + amountToFadePerStep);
    
            animate = setTimeout(function(){fadeIn(imgObj, amountToFadeTotal, amountToFadePerStep, timeToWaitBeforeNextIncrement);},timeToWaitBeforeNextIncrement);
        }else {
            imgObj.style.opacity = original;
            original = null;
            clearTimeout(animate);
        }
    }
    
    0 讨论(0)
  • 2021-01-03 18:13
    var animate, left=0, imgObj=null;
    
    function init(){
    
       imgObj = document.getElementById('myImage');
       imgObj.style.position= 'absolute';
       imgObj.style.top = '240px';
       imgObj.style.left = '-300px';
       imgObj.style.visibility='hidden';
    
       moveRight();
    }
    
    function moveRight(){
        left = parseInt(imgObj.style.left, 10);
    
        if (10 >= left) {
            imgObj.style.left = (left + 5) + 'px';
            imgObj.style.visibility='visible';
    
            animate = setTimeout(function(){moveRight();},20); // call moveRight in 20msec
    
            //stopanimate = setTimeout(moveRight,20);
        } else {
            stop();
        }
        //f();
    }
    
    function stop(){
       clearTimeout(animate);
    }
    
    window.onload = function() {init();};
    
    0 讨论(0)
  • 2021-01-03 18:23

    Use the jQuery library, is really easy to do what you need

    http://api.jquery.com/animate/

    Follow sample code of page : http://api.jquery.com/stop/

    <!DOCTYPE html>
    <html>
    <head>
      <style>div { 
    position: absolute; 
    background-color: #abc;
    left: 0px;
    top:30px;
    width: 60px; 
    height: 60px;
    margin: 5px; 
    }
    </style>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
      <button id="go">Go</button> 
    <button id="stop">STOP!</button>
    <button id="back">Back</button>
    <div class="block"></div>
    <script>
    /* Start animation */
    $("#go").click(function(){
    $(".block").animate({left: '+=100px'}, 2000);
    });
    
    /* Stop animation when button is clicked */
    $("#stop").click(function(){
    $(".block").stop();
    });
    
    /* Start animation in the opposite direction */
    $("#back").click(function(){
    $(".block").animate({left: '-=100px'}, 2000);
    });
    
    </script>
    
    </body>
    </html>
    
    0 讨论(0)
提交回复
热议问题