<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>無標題文檔</title>
</head>
<body>
<!--頁面布局-->
????<!--圖片相關屬性設置-->
????
????<img?style="position:absolute;left:0;top:0"?src="./mynameyy.jpg"?id="myImage"?/>
<!--滑動按鈕設置-->
<input?type?="button"?id="btnright"?value="向右滑動"?style="margin-top:250px;"/>
<input?type?="button"?id="btnleft"?value="向左滑動"?style="margin-top:250px;"/>
</div>
<script>
????window.onload?=?function(){
????????var?img?=?document.getElementById("myImage");
????????var?btnright?=?document.getElementById("btnright");
????????var?btnleft=document.getElementById("btnleft");
????????
????????//綁定點擊右移事件
????????btnright.onclick?=?function(){
????????????imgSlideRight();????//點擊按鈕時執(zhí)行滑動函數(shù)
????????}
????????//綁定點擊左移事件
????????btnleft.onclick=function(){
????????????imgSlideLeft();?//點擊按鈕時執(zhí)行滑動函數(shù)
????????}
????????
????????var?maxLeft?=?700;//向右滑動的極限值
????????//var?maxRight=?800;//向左劃
????????//實現(xiàn)滑動函數(shù)
????????????//得到網(wǎng)頁的寬度
????????????var?bodyWidth=document.body.clientWidth;?
????????????//得到圖片的寬度
????????????var?imgWidth=parseInt(img.width);
????????
????????????
????????????alert(endRight);
????????function?imgSlideRight(){
????????????var?endLeft=img.offsetLeft?+?200;?
????????????var?slideTimer?=?setInterval(function(){
????????????var?imgLeft=img.offsetLeft;??????//現(xiàn)在距離左邊的距離
????????????//得到圖片現(xiàn)在距離右邊的距離
????????????var?imgRight=parseInt(bodyWidth-endLeft-imgWidth);
????????????????//alert(imgRight);
????????????????if(imgLeft?<?endLeft){
????????????????????if(imgRight>0){
????????????????????//將圖片的左偏移（left值）增加20px，注意單位
????????????????????img.style.left=imgLeft+20+'px';
????????????????????}else{
????????????????????alert("已經(jīng)到了最大值,不能在移動了");
????????????????//終止定時器函數(shù)
????????????????????clearInterval(slideTimer);????
????????????????????}
????????????????}else{
????????????????clearInterval(slideTimer);????
????????????????}
????????????},20);????
????????}
????
????????function?imgSlideLeft(){
????????//每一次左移多少
????????//var?imgRight=parseInt(bodyWidth-endLeft-imgWidth);
????????????var?imgLeft=img.offsetLeft;?
????????????var?endLeft=img.offsetLeft-200;?
????????????//alert(endLeft);
????????????var?slideTimer=setInterval(function(){
????????????????img.style.left=parseInt((imgLeft-200))+'px'
????????????},20);
????????}
????????
????}
</script>
</body>
</html>
2015-11-25
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<!--頁面布局-->
??? <!--圖片相關屬性設置-->
?? ?
?? ?<img style="position:absolute;left:0;top:0" src="./mynameyy.jpg" id="myImage" />
<!--滑動按鈕設置-->
<input type ="button" id="btnright" value="向右滑動" style="margin-top:250px;"/>
<input type ="button" id="btnleft" value="向左滑動" style="margin-top:250px;"/>
</div>
<script>
?? ?window.onload = function(){
?? ??? ?var img = document.getElementById("myImage");
?? ??? ?var btnright = document.getElementById("btnright");
?? ??? ?var btnleft=document.getElementById("btnleft");
?? ??? ?
?? ??? ?//綁定點擊右移事件
?? ??? ?btnright.onclick = function(){
?? ??? ??? ?imgSlideRight();?? ?//點擊按鈕時執(zhí)行滑動函數(shù)
?? ??? ?}
?? ??? ?//綁定點擊左移事件
?? ??? ?btnleft.onclick=function(){
?? ??? ??? ?imgSlideLeft(); //點擊按鈕時執(zhí)行滑動函數(shù)
?? ??? ?}
?? ??? ?
?? ??? ?var maxLeft = 700;//向右滑動的極限值
?? ??? ?//var maxRight= 800;//向左劃
?? ??? ?//實現(xiàn)滑動函數(shù)
?? ??? ??? ?//得到網(wǎng)頁的寬度
?? ??? ??? ?var bodyWidth=document.body.clientWidth;
?? ??? ??? ?//得到圖片的寬度
?? ??? ??? ?var imgWidth=parseInt(img.width);
?? ??? ?
?? ??? ??? ?
?? ??? ??? ?alert(endRight);
?? ??? ?function imgSlideRight(){
??????????? var endLeft=img.offsetLeft + 200;
?? ??? ??? ?var slideTimer = setInterval(function(){
?? ??? ???? var imgLeft=img.offsetLeft;????? //現(xiàn)在距離左邊的距離
?? ??? ??? ?//得到圖片現(xiàn)在距離右邊的距離
?? ??? ??? ?var imgRight=parseInt(bodyWidth-endLeft-imgWidth);
?? ??? ??? ??? ?//alert(imgRight);
?? ??? ??? ??? ?if(imgLeft < endLeft){
?? ??? ??? ??? ??? ?if(imgRight>0){
?? ??? ??? ??? ??? ?//將圖片的左偏移（left值）增加20px，注意單位
?? ??? ??? ??? ??? ?img.style.left=imgLeft+20+'px';
?? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?alert("已經(jīng)到了最大值,不能在移動了");
?? ??? ??? ??? ?//終止定時器函數(shù)
?? ??? ??? ??? ??? ?clearInterval(slideTimer);?? ?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ?clearInterval(slideTimer);?? ?
?? ??? ??? ??? ?}
?? ??? ??? ?},20);?? ?
?? ??? ?}
?? ?
?? ??? ?function imgSlideLeft(){
?? ??? ??? ?var endLeft=img.offsetLeft-200;
?? ??? ??? ?var slideTimer=setInterval(function(){
?? ??? ??? ??? ?//移動了多少
?? ??? ??? ??? ? var imgLeft=img.offsetLeft;
?? ??? ??? ??? ?if(imgLeft>endLeft){
?? ??? ??? ??? ??? ?if(endLeft>0){
?? ??? ??? ??? ?img.style.left=parseInt((imgLeft-20))+'px'
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ?alert("到最左邊了，搞不的了");
?? ??? ??? ??? ?clearInterval(slideTimer);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ?clearInterval(slideTimer);
?? ??? ??? ??? ?}
?? ??? ??? ?},20);
?? ??? ?}
?? ??? ?
?? ?}
</script>
</body>
</html>
2015-11-25
定義的變量沒有寫在函數(shù)里面。只能執(zhí)行一次定位