道招

javascript让图片来回移动

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

javascript让图片来回移动

本示例中用了四张图片,分别是四个方向,用它们来实现图片向前滚动的效果。 图片滚动
<!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 实现图片走到最右边后转向回走的功能
更新时间:
上一篇:this指针变更,重新bind下一篇:eclipse报错"main" java.lang.NoClassDefFoundError: javax/servlet/http/HttpServletRequest

相关文章

Twitter 更新了图片及影片查看方式

Twitter 刚刚就网内查看多媒体档案的方式作出了一些更新。首先是如上图的图片查看,它让用户在无需打开新页的情况下查看图片,一切就在同一个空间之下发生。另外媒体集亦可以包含 YouTube、 阅读更多…

android手机上网APN设置详解

中国移动上网APN设置 第一个接入点:手机WAP上网接入点设置 名称:cmwap APN:cmwap 代理:10.0.0.172 端口:80 MCC:460 MNC:02 APN类 阅读更多…

自2010起百度在移动方面上涨1000%

作为中国的搜索巨头已经从桌面端过渡到移动互联网的主要领导者了,在2010到目前的这三年里,百度在移动方面导入的流量已经攀上升了1000%,进步显著。 百度在本周三发布了最新一个季度移动 阅读更多…

为什么老有人换手机号码

经常看到朋友QQ个性签名写一个新的手机号码,似乎在告诉全世界“我换号了”,晕,换的那么理直气壮,我不喜欢换号,一个联通号码大学一直用到毕业,到了单位,因为必须用移动,所以我换号了,换成移动的了,以后也 阅读更多…

关注道招网公众帐号