鼠标点击切换四张图片的排列方向

最新推荐文章于 2021-04-12 15:17:33 发布

livezingy

最新推荐文章于 2021-04-12 15:17:33 发布

阅读量308

点赞数

分类专栏：龟速自学JS_练习册文章标签： JavaScript ViewUI

本文链接：https://blog.csdn.net/southgater/article/details/84360456

版权

龟速自学JS_练习册专栏收录该内容

1 篇文章 0 订阅

订阅专栏

set picture's position.html


<!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>set picture's position</title>
<style>
#changecss{
	top:0;
	left:400px;
	width:80px;
	height:30px;
	background-color:#00ff00;
	position:absolute;
}
</style>
</head>

<body>
<div id="one">
</div>

<div id="two">
</div>

<div id="three">
</div>

<div id="four">
</div>

<span id="changecss">click</span>
<script>
var newCss = document.createElement('link');
newCss.href="vertical.css";
newCss.rel="stylesheet";
newCss.type="text/css";
document.body.appendChild(newCss);


function changeCss(){
	if(newCss.href.search(/vertical.css/) != -1)
	{
		newCss.href="horizontal.css";
	}
	else
	{
		newCss.href="vertical.css";
	}
}

document.getElementById('changecss').onclick=changeCss;


</script>
</body>
</html>

vertical.css：


@charset "utf-8";
/* CSS Document */
#one{
 top:0px;
 left:0px;
 width:100px;
 height:100px;
 background-color:red;
 position:absolute;

 background-image:url(one.png);
 background-position:0px,0px;
}
#two{
 top:100px;
 left:0px;
 width:100px;
 height:100px;
 background-color:yellow;
 position:absolute;


 background-image:url(two.png);
 background-position:0px,100px;
}
#three{
 top:200px;
 left:0px;
 width:100px;
 height:100px;
 background-color:blue;
 position:absolute;


 background-image:url(three.png);
 background-position:0px,200px;

}
#four{
	 top:300px;
 left:0px;
 width:100px;
 height:100px;
 background-color:green;
 position:absolute;


 background-image:url(four.png);
 background-position:0px,300px;
}

vertical.css:


@charset "utf-8";
/* CSS Document */
#one{
 top:0px;
 left:0px;
 width:100px;
 height:100px;
 background-color:red;
 position:absolute;

 background-image:url(one.png);
 background-position:0px,0px;
}
#two{
 top:100px;
 left:0px;
 width:100px;
 height:100px;
 background-color:yellow;
 position:absolute;


 background-image:url(two.png);
 background-position:0px,100px;
}
#three{
 top:200px;
 left:0px;
 width:100px;
 height:100px;
 background-color:blue;
 position:absolute;


 background-image:url(three.png);
 background-position:0px,200px;

}
#four{
	 top:300px;
 left:0px;
 width:100px;
 height:100px;
 background-color:green;
 position:absolute;


 background-image:url(four.png);
 background-position:0px,300px;
}

livezingy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标点击切换四张图片的排列方向

set picture's position.html[code="java"]set picture's position#changecss{ top:0; left:400px; width:80px; height:30px; background-color:#00ff00; position:absolute;}...
复制链接

扫一扫