js实现修改文件（图片）路径

最新推荐文章于 2023-09-28 22:58:51 发布

因火成烟

最新推荐文章于 2023-09-28 22:58:51 发布

阅读量5.8k

点赞数 1

文章标签： js web前端 css html 修改文件路径

本文链接：https://blog.csdn.net/TheFoma/article/details/45155607

版权

文件路径其实就是一个属性值；修改路径就是修改属性值而已；只不过这个属性值修改起来不只是简单地赋值来进行的修改的；

那修改图片路径来举例，就是先找到需要修改的元素src属性值；

把它用变量保存起来，这里是不修改源文件路径；

把新的路径赋给保存源文件路径的变量；

把这个新路径值传给需要修改的图片路径；

上面说了思路，我用了2种方法来实现，

这个实例是鼠标移过改变图片路径；

第一种方法：

var oImg = document.getElementById("box").getElementsByTagName("img");
var oDiv = document.getElementsByTagName("div")[0];
for (var i = 1; i < oImg.length; i++) {
	oImg[i].onmouseover = function () {
		var img = new Image();
		img.src = oImg[0].src = this.src.replace(/small/, "big");
		oDiv.style.display = "block";
		if (img.complete) {
			oDiv.style.display = "none";
		} else {
			oImg[0].onload = function () {
				oDiv.style.display = "none"
			}
		}
		//		img.complete ? oDiv.style.display = "none" : (oImg[0].onload = function () {
		//			oDiv.style.display = "none"
		//		})
	}
}

创建img对象，利用它的src属性，给它赋值，利用replace方法，改变图片路径，这里图片路径需要说一下，我这个路径是文件夹是同一个，文件名又不一样的地方，使用replace改变它；

这里onload方法是记载图片；

complete属性是判断图片是否加载完；加载完返回true;否则返回false;

第二种方法：

var oLi = document.getElementById("box").getElementsByTagName("li");
for(var i=1;i<oLi.length;i++){
	oLi[i].onmouseover = function(){
		var v = this.getElementsByTagName("img")[0].attributes["src"].value;
		var nv = v.replace(/small/,"big");
		oLi[0].getElementsByTagName("img")[0].attributes["src"].value = nv;
	}
}

找到鼠标当前停留的img的路径；attributes找到元素的某属性；

同样replace改变文件名，相当于新的路径；

把新的路径给需要显示新路径的文件的元素

css代码：

body,ul,li{
	margin: 0;
	padding: 0;
}
body{
	background: #ccc;
}
img{
	border: 0;
	border-radius: 5px;
}
ul{
	list-style-type: none;
}
#box{
	width: 212px;
	border: 5px solid #000;
	overflow: hidden;
	zoom:1;
	background: #fff;
	border-radius: 5px;
	margin: 10px auto;
	padding: 0 0 3px 3px;
}
#box li,
#box li img {
	float: left;
	width: 50px;
	height: 50px;
}
#box li {
	margin: 3px 3px 0 0;
}
#box li.first{
	position: relative;
}
#box li.first,
#box li.first img{
	width: 156px;
	height: 156px;
}
#box li.first div{
	position:absolute;
	top: 0;
	left: 0;
	width: 156px;
	height: 156px;
	display: none;
	opacity: 0.5;
	filter: alpha(opacity=50);
	background: #fff;
}

使用了无序列表，第一个li的大小需要特殊设置,给它添加了first类，包括第一个li里面的img,div。

html5代码：

<!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>
	<link rel="stylesheet" href="y.css">
</head>

<body>
	<ul id="box">
		<li class="first"><img src="img/big_1.jpg">
			<div></div>
		</li>
		<li>
			<a href="javascript:;"><img src="img/small_1.jpg">
			</a>
		</li>
		<li>
			<a href="javascript:;"><img src="img/small_2.jpg">
			</a>
		</li>
		<li>
			<a href="javascript:;"><img src="img/small_3.jpg">
			</a>
		</li>
		<li>
			<a href="javascript:;"><img src="img/small_4.jpg">
			</a>
		</li>
		<li>
			<a href="javascript:;"><img src="img/small_5.jpg">
			</a>
		</li>
		<li>
			<a href="javascript:;"><img src="img/small_6.jpg">
			</a>
		</li>
		<li>
			<a href="javascript:;"><img src="img/small_7.jpg">
			</a>
		</li>
		<li>
			<a href="javascript:;"><img src="img/small_8.jpg">
			</a>
		</li>
		<li>
			<a href="javascript:;"><img src="img/small_9.jpg">
			</a>
		</li>
		<li>
			<a href="javascript:;"><img src="img/small_10.jpg">
			</a>
		</li>
		<li>
			<a href="javascript:;"><img src="img/small_11.jpg">
			</a>
		</li>
	</ul>
	<script src="y.js"></script>
</body>

</html>

因火成烟

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js实现修改文件（图片）路径

文件路径其实就是一个属性值；修改路径就是修改属性值而已；只不过这个属性值修改起来不只是简单地赋值来进行的修改的；那修改图片路径来举例，就是先找到需要修改的元素src属性值；把它用变量保存起来，这里是不修改源文件路径；把新的路径赋给保存源文件路径的变量；把这个新路径值传给需要修改的图片路径；上面说了思路，我用了2种方法来实现，这个实例是鼠标移过改变图片路径；第一种方法：
复制链接

扫一扫