                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /用JavaScript實(shí)現(xiàn)圖片緩慢縮放效果

js無法形成連續(xù)移動(dòng)的效果，求解

有高人能指點(diǎn)下嗎？?

如下為js部分的代碼，可是無法形成連續(xù)右移效果：

window.onload = function(){

var img = document.getElementById("myImage");

var btn = document.getElementById("btn");

//綁定點(diǎn)擊事件

btn.onclick = function(){

?imgSlide(); //點(diǎn)擊按鈕時(shí)執(zhí)行滑動(dòng)函數(shù)

}

var maxLeft = 700;//向右滑動(dòng)的極限值

var imgLeft=img.offsetLeft;

//實(shí)現(xiàn)滑動(dòng)函數(shù)

function imgSlide(){

var endLeft=300; ? //每次點(diǎn)擊后向右滑動(dòng)300px ??

var ?slideTimer = setInterval(function(){

? ? ? ?//現(xiàn)在距離左邊的距離

? ? ? ?if(imgLeft < endLeft){

? ? ? ? ?if(imgLeft < maxLeft){

? ? ? ? ? ?//將圖片的左偏移（left值）增加20px，注意單位

? ? ? ? ? ?img.style.left=(imgLeft+20)+'px' ? ? ??

? ? ? ? ?}

? ? ? ? ? else{

? ? ? ? ? ? ? ?clearInterval(slideTimer);

? ? ? ? ? ? ? ?alert("已經(jīng)移動(dòng)到最右邊");

? ? ? ? ? }

? ? ? ?}

? ? ?else{

? ? ? ? clearInterval(slideTimer);

? ? ?}

? ? },10);

}

?

小室友

2015-02-25

源自：用JavaScript實(shí)現(xiàn)圖片緩慢縮放效果 5-1

關(guān)注問題我要回答

1137

操作

收起

1 回答

法王2024
2015-02-25

<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<title>移動(dòng)測試</title>
</head>

<body>
The?content?of?the?document......
<div?style="padding:20px;?width:10px;?background:red;?position:absolute"?id="myImage"></div><button?id="btn"?style="padding:10px">move</button>
</body>
<script?type="text/javascript">
window.onload?=?function(){
????var?img?=?document.getElementById("myImage");
????var?btn?=?document.getElementById("btn");
????//綁定點(diǎn)擊事件
????var?maxLeft?=?700;//向右滑動(dòng)的極限值
????//實(shí)現(xiàn)滑動(dòng)函數(shù)
????function?imgSlide(){
????????var?imgLeft=img.offsetLeft;
????????var?endLeft=imgLeft+300;???//每次點(diǎn)擊后向右滑動(dòng)300px?
????????var??slideTimer?=?setInterval(function(){
????????????//現(xiàn)在距離左邊的距離
????????????if(imgLeft?<?maxLeft){
????????????????if(imgLeft?<?endLeft){
????????????????????//將圖片的左偏移（left值）增加20px，注意單位
????????????????????img.style.left=(imgLeft+20)+'px'?;
????????????????????imgLeft+=20;??????
????????????????}else{
????????????????????clearInterval(slideTimer);
????????????????}
????????????}else{
????????????????alert("已經(jīng)移動(dòng)到最右邊");
????????????????clearInterval(slideTimer);
????????????}
????????},100);
????}
????btn.onclick=function(){
????????imgSlide();?//點(diǎn)擊按鈕時(shí)執(zhí)行滑動(dòng)函數(shù)
????}
}
</script>
</html>