css层叠样式表(用来装饰网页界面)
js代码操作css
css代码
目录
在style(样式)里面进行操作
标签选择器(直接通过标签点击)
<head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 100; height: 100; position: absolute; top: 20px; right: 600px; }
</style>
</head>
<div id="b" class="a">
<img id="i1" src="images/show1_big.jpg" >
</div>
class(类)选择器
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.a{
width: 100;
height: 100;
position: absolute;
top: 20px;
right: 600px;
}
</style>
</head>
<div id="b" class="a">
<img id="i1" src="images/show1_big.jpg" >
</div>
id选择器(给标签设置个id然后通过id去点击)
<style type="text/css">
div{
width: 100px;
height: 100px;
position: absolute;
top: 30px;
right: 200px;
transition: .1s;
}
</style>
</head>
<body>
<div id="b">
<img src="img/1.gif" id="ad" >
</div>
案例
window(窗口)的滚动条事件(图形跟随滚动条移动)
<head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; position: absolute; top: 30px; right: 200px; transition: .1s; } </style> </head>
<body>
<div id="b">
<img src="img/1.gif" id="ad" >
</div>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<p>riueriytyiureyu</p>
<script >
window.onscroll=()=> {
//获取到窗口滚动的距离 scrollTop
b.style.top=30+document.documentElement.scrollTop+"px"
console.log(b.style.top)
}
</script>
</body>
</html>
鼠标移动事件(图形跟随鼠标移动)
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<div id="a">
</div>
<script type="text/javascript">
window.onmousemove=(e)=>{
a.style.left=e.clientX+"px"
a.style.top=e.cliY+"px"
}
</script>
</body>