本示例中用了四张图片,分别是四个方向,用它们来实现图片向前滚动的效果。
图片滚动

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片移动</title>
</head>
<body>
<img id ="ren" border ="0" style="position:absolute;left:10px;top:150px;width=180px" src="favicon1.png">

<script>
//获取图片名称
function basename(url) {
  var loc = url.lastIndexOf("/") + 1;
  return url.substr(loc);
}

//创建图片对象
var ren = document.getElementById("ren");

function changetu() {
  var ind = basename(ren.src).charAt(7);
  if (ind == "1") {
    ren.src = "favicon" + "2" + ".png";
  } else if (ind == "2") {
    ren.src = "favicon" + "3" + ".png";
  } else if (ind == "3") {
    ren.src = "favicon" + "4" + ".png";
  } else {
    ren.src = "favicon" + "1" + ".png";
  }
}

var x = 0;
x向前进距离
var xs = 20; //x向前进加速度

function run() {
  var winWidth = 0;
  if (window.innerWidth) {
    winWidth = window.innerWidth;
  } else if ((document.body) && (document.body.clientWidth)) {
    winWidth = document.body.clientWidth;
  }

  x += xs;
  if (x >= winWidth - parseInt(ren.width) - 13 || x <= 0) { //用parseInt可以让获取的值不含有"px";-13是用来修正

    xs = (-1) * xs;
  }
  ren.style.left = x + "px";
}

setInterval(function() {
  changetu();
  run();
}, 500)
</script>
</body>
</html>

看看代码实现起来其实很简单。需要稍微提一下的是:

if( x>= winWidth - parseInt(ren.width) -13 || x<=0){ //用parseInt可以让获取的值不含有"px";-13是用来修正

xs = (-1)*xs;

利用 xs= (-1)*xs 实现图片走到最右边后转向回走的功能

分类: Javascript

发表评论

电子邮件地址不会被公开。 必填项已用*标注