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;
- 分类：
- Web前端
更新时间：
相关文章
Twitter 更新了图片及影片查看方式
Twitter 刚刚就网内查看多媒体档案的方式作出了一些更新。首先是如上图的图片查看，它让用户在无需打开新页的情况下查看图片，一切就在同一个空间之下发生。另外媒体集亦可以包含 YouTube、 阅读更多…
网址改用七牛云存储图片
本站上传的图片不多，但是为了以后的站点扩展，鉴于七牛云现在每月还有免费流量，最终决定迁移到七牛云去，并准备删除vps里面的图片了。 免费真香！ 迁移步骤 将网址的历史图片上传至七 阅读更多…
android手机上网APN设置详解
中国移动上网APN设置 第一个接入点：手机WAP上网接入点设置 名称：cmwap APN：cmwap 代理：10.0.0.172 端口：80 MCC：460 MNC：02 APN类 阅读更多…
为什么老有人换手机号码
经常看到朋友QQ个性签名写一个新的手机号码，似乎在告诉全世界“我换号了”，晕，换的那么理直气壮，我不喜欢换号，一个联通号码大学一直用到毕业，到了单位，因为必须用移动，所以我换号了，换成移动的了，以后也 阅读更多…
自2010起百度在移动方面上涨1000%
作为中国的搜索巨头已经从桌面端过渡到移动互联网的主要领导者了，在2010到目前的这三年里，百度在移动方面导入的流量已经攀上升了1000%，进步显著。 百度在本周三发布了最新一个季度移动 阅读更多…
