meta charset="UTF-8"> title>自定义动画title> script type="text/javascript" src="jquery.1.12."/> meta charset="UTF-8"> title>自定义动画title> script type="text/javascript" src="jquery.1.12.">
cari

Rumah >hujung hadapan web >tutorial js >javascript实现图片左右移动的方法

javascript实现图片左右移动的方法

一个新手
一个新手asal
2017-10-11 10:11:124197semak imbas

图片的左右移动，具备像荡秋千一样的动画效果，图片自己可重新定义，移动速度和距离也可在代码内设定，挺简单的Js生成动画的特效代码，仅供参考。

<!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>

Atas ialah kandungan terperinci javascript实现图片左右移动的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何用jQuery实现放大镜效果 Artikel seterusnya：在Angular组件中引入外部样式的方法

Artikel berkaitan

Lihat lagi