1、编程实现：鼠标经过改变颜色2、点击按钮，切换图片（可以循环一直切换）3、编程实现：跟随鼠标—串的效果

L̶

已于 2023-05-08 14:09:52 修改

阅读量298

点赞数

文章标签： linq html javascript

于 2022-05-04 22:43:43 首次发布

本文链接：https://blog.csdn.net/qq_45151366/article/details/124579413

版权

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>

L̶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1、编程实现：鼠标经过改变颜色2、点击按钮，切换图片（可以循环一直切换）3、编程实现：跟随鼠标—串的效果

1、编程实现：鼠标经过改变颜色假设元素原本为红色，鼠标悬停，改为蓝色，鼠标离开，颜色还原 <title>作业1</title> <style> div{ width: 100px; height: 100px; background-color: red; } </style></head><body>...
复制链接

扫一扫