Home > Article > Web Front-end > How to move pictures left and right using javascript

How to move pictures left and right using javascript

一个新手Original: 2017-10-11 10:11:124099browse

The left and right movement of the picture has an animation effect like a swing. The picture itself can be redefined, and the moving speed and distance can also be set in the code. It is a very simple Js-generated animation special effects code. ,for reference only.

<!DOCTYPE html>
<html>
<head> 
<meta charset="UTF-8"> 
<title>自定义动画</title> 
<script type="text/javascript" src="jquery.1.12.4.js"></script> 
<style> * {
    margin: 0;
}
</style> <script type="text/javascript"> var moveToLeft = function () {
    $("#topImg").animate( {
    "left": "0"
}
, "slow", moveToRight);
}
;
    var moveToRight = function () {
    $("#topImg").animate( {
    "left": "100px"
}
, "slow", moveToLeft);
}
;
    $(function () {
    $("button").click(moveToRight);
}
);
    </script></head><body><button>点击我右移100px</button><br/><br/><br/><br/><img id="topImg" style="position: absolute;
    left: 0" src="图片1_30.jpg"/></body></html>

The above is the detailed content of How to move pictures left and right using javascript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use jQuery to achieve a magnifying glass effectNext article：How to use jQuery to achieve a magnifying glass effect

See more

How to move pictures left and right using javascript

Related articles