JS动态相册--随鼠标所至切换封面图

最新推荐文章于 2022-06-30 13:06:34 发布

缺氧何甘酸

最新推荐文章于 2022-06-30 13:06:34 发布

阅读量271

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_46113894/article/details/109282122

版权

本文介绍如何使用JavaScript实现动态相册功能，当鼠标悬停在小图上时，自动切换下方大图的源并更新图片注释。通过getAttribute和setAttribute方法改变图片属性，同时探讨了不同类型的鼠标样式和鼠标事件的应用。

摘要由CSDN通过智能技术生成

JS动态相册--随鼠标所至切换封面图

- - - 代码

改变节点的属性使用函数getAttribute(‘src’)然后再setAttribute(‘属性名’,属性值)
获得属性时获得的是字符串，处理时与数字等区分
鼠标的样式有（cursor属性）

auto ：标准光标
default ：标准箭头
hand ：手形光标
wait ：等待光标
text ：I形光标
vertical-text ：水平I形光标
no-drop ：不可拖动光标
not-allowed ：无效光标
help ：?帮助光标
all-scroll ：三角方向标
move ：移动标
crosshair ：十字标

鼠标事件汇总.

代码

实现鼠标放在上方小图片后改变下方大图的src（实际网站一般准备缩略图在上方小图并规范文件命名方便修改src），同时修改图片下方的注释（第几张图片）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body{
    
        margin: 20px auto;
        width: 600px;
        border: #dddddd 1px solid;
    }
    .top{
    
        display: flex;
        justify-content: center;

    }
    .content img