1、编程实现:鼠标经过改变颜色
假设元素原本为红色,鼠标悬停,改为蓝色,鼠标离开,颜色还原
<title>作业1</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div οnmοuseοver="f1();" οnmοuseοut="f2();"></div>
<script>
function f1(){
var divs = document.getElementsByTagName("div");
divs[0].style.backgroundColor = "blue";
}
function f2(){
var divs = document.getElementsByTagName("div");
divs[0].style.backgroundColor = "red";
}
</script>
</body>
2、编程实现:点击按钮,切换图片(可以循环一直切换)
<title>点击按钮,切换图片</title>
</head>
<body>
<button οnclick="c();">切换</button><br>
<img id="img" src="img/1.png">
<script>
function test(){
var index = 0;
function change(){
index++;
var img = document.getElementById("img");
img.setAttribute("src" ,"img/" + (index % 2 + 1) + ".png");
}
return change;
}
var c = test();
</script>
</body>
3、编程实现:跟随鼠标—串的效果
即,定义多个div, 鼠标移动时,这几个div就跟着鼠标移动
<title>跟随鼠标—串的效果</title>
<style>
div{
position: absolute;
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
}
</style>
<script>
function move(){
var divs = document.getElementsByTagName("div");
document.onmousemove = function(){
var e = window.event;
for(var i = 1 ; i < divs.length ; i++){
//从下标为1的元素开始,每一个元素的坐标,都跟随期上一个元素
divs[i].style.left = divs[i - 1].offsetLeft + "px";
divs[i].style.top = divs[i - 1].offsetTop + "px";
}
//让下标为0 的元素 跟着鼠标走
divs[0].style.left = e.clientX + "px";
divs[0].style.top = e.clientY + "px";
}
}
</script>
</head>
<body οnlοad="move();">
<div></div>
<div></div>
<div></div>
</body>
1、编程实现:鼠标经过改变颜色2、点击按钮,切换图片(可以循环一直切换)3、编程实现:跟随鼠标—串的效果
于 2022-05-04 22:43:43 首次发布