图片切换特效

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>05 图片切换</title><style type="text/css">*{padding: 0;margin: 0;}#box{border: 1px solid #ccc;width: 430px;height: 70px;padding-top: 430px;background: url('images/big_pic1.jpg') no-repeat;}#box ul li{display: inline-block;margin-right: 15px;}</style>
</head>
<body><div id="box"><ul><li class="item"><img src="images/pic1.jpg"></li><li class="item"><img src="images/pic2.jpg"></li><li class="item"><img src="images/pic3.jpg"></li><li class="item"><img src="images/pic4.jpg"></li><li class="item"><img src="images/pic5.jpg"></li></ul></div><script type="text/javascript">// 1.获取事件源function $(id){return typeof id === 'string' ? document.getElementById(id) : null;}var items = document.getElementsByClassName('item');for(var i = 0;i < items.length; i++){var item  = items[i];item.index = i+1;items[i].onmouseover = function(){$('box').style.background = ` url('images/big_pic${this.index}.jpg') no-repeat`;}}</script></body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/724890.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

进程间通信---管道题目练习

进程间通信---管道题目练习

实现AB进程对话。 A进程发送一句话后&#xff0c;B进程接收到打印。然后B进程发送一句话&#xff0c;A进程接收后打印 重复上述步骤。直到AB接收或者发送完quit后&#xff0c;结束AB进程 A进程 #include <stdio.h> #include <sys/types.h> #include <sys/stat.…
阅读更多...
解决DBeaver执行脚本报错No active connection

解决DBeaver执行脚本报错No active connection

解决DBeaver执行脚本报错No active connection 1、报错问腿 2、问题解决 2.1、右键点击该数据库&#xff0c;选择SQL编辑器&#xff0c;选择新建SQL编辑器&#xff0c;然后将sql语句复制过去。 或者左击选中数据库后直接使用快捷键 Ctrl] 2.2、在Project-General中找到Scr…
阅读更多...
k8s运维问题整理

k8s运维问题整理

1.宕机或异常重启导致etcd启动失败 服务器非正常关机&#xff08;意外掉电、强制拔电&#xff09;后 etcd 数据损坏。 查看apiserver日志发现出现报错Error while dialing dial tcp 127.0.0.1:2379: connect: connection refused&#xff0c;2379是etcd的端口&#xff0c;那么a…
阅读更多...
mybatis 数据库缓存的原理

mybatis 数据库缓存的原理

MyBatis 是一个流行的 Java 持久层框架&#xff0c;它封装了 JDBC&#xff0c;使数据库交互变得更简单、直观。MyBatis 支持两级缓存&#xff1a;一级缓存&#xff08;Local Cache&#xff09;和二级缓存&#xff08;Global Cache&#xff09;&#xff0c;通过这两级缓存可以有…
阅读更多...
Javaweb之SpringBootWeb案例之自动配置案例的自定义starter测试的详细解析

Javaweb之SpringBootWeb案例之自动配置案例的自定义starter测试的详细解析

3.2.4.3 自定义starter测试 阿里云OSS的starter我们刚才已经定义好了&#xff0c;接下来我们就来做一个测试。 今天的课程资料当中&#xff0c;提供了一个自定义starter的测试工程。我们直接打开文件夹&#xff0c;里面有一个测试工程。测试工程就是springboot-autoconfigurat…
阅读更多...
常见排序算法解析

常见排序算法解析

芝兰生于深林&#xff0c;不以无人而不芳&#xff1b;君子修道立德&#xff0c;不为穷困而改节 文章目录 插入排序直接插入排序希尔排序 选择排序直接选择排序堆排序 交换排序冒泡排序快速排序优化挖坑法前后指针法非递归版 归并排序递归非递归 总结 插入排序 插入排序&#…
阅读更多...
Nginx使用—基础应用

Nginx使用—基础应用

Nginx日志配置 1.mkdir /etc/nginx/logs2.server{listen 80;server_name nrj.test.com;access_log logs/acess-test.log; #正确日志error_log logs/error-test.log; #错误日志root /www;index index.html; } Nginx目录索引 语法&#xff1a;autoindex on | off 默认&#x…
阅读更多...
【编程小记】在Windows下使用C/C++代码判断一个文件是否被其他进程占用

【编程小记】在Windows下使用C/C++代码判断一个文件是否被其他进程占用

在Windows下使用C/C代码判断文件是否被占用 一、原理二、函数简单介绍三、实例代码 一、原理 在Windows下有一个Windows API叫做CreateFile&#xff0c;通过这个接口我们可以创建或打开文件&#xff0c;我们打开文件时可以采用独占模式进行打开&#xff0c;如果能够打开文件说…
阅读更多...
Word Game

Word Game

题目链接&#xff1a;Problem - C - Codeforces 解题思路&#xff1a; 用map存字母和出现的次数&#xff0c;然后遍历三个字母数组&#xff0c;如果map值为1&#xff0c;则加三分&#xff0c;为2加1分&#xff0c;否则不加分。 下面是c代码&#xff1a; #include<iostrea…
阅读更多...
第41期 | GPTSecurity周报

第41期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以找…
阅读更多...
Linux学习-二级指针的使用

Linux学习-二级指针的使用

目录 ###指针传参时要用二级指针 ###函数体内部想要修改函数外部指针变量值的时候需要使用二级指针(指针变量的地址) ###指针传参时要用二级指针 char *str[5]; int Fun(char **ppstr,int len); ###函数体内部想要修改函数外部指针变量值的时候需要使用二级指针(指针变量的…
阅读更多...
#微信小程序创建（获取onenet平台数据）

#微信小程序创建（获取onenet平台数据）

1.IDE&#xff1a;微信开发者工具 2.实验&#xff1a;创建一个小程序&#xff08;http get获取onenet平台数据&#xff09; 3.记录&#xff1a; 百度网盘链接&#xff1a;https://pan.baidu.com/s/1eOd-2EnilnhPWoGUMj0fzw 提取码: 2023 &#xff08;1&#xff09;新建一个工…
阅读更多...
【C++STL详解 —— string类】

【C++STL详解 —— string类】

【CSTL详解 —— string类】 CSTL详解 —— sring类一、string的定义方式二、string的插入三、string的拼接四、string的删除五、string的查找六、string的比较七、string的替换八、string的交换九、string的大小和容量十、string中元素的访问十一、string中运算符的使用十二、…
阅读更多...
2024年腾讯云发红包了，可用于抵扣订单金额，你们领了吗？

2024年腾讯云发红包了，可用于抵扣订单金额，你们领了吗？

在2024年腾讯云新春采购节优惠活动上&#xff0c;可以领取新年惊喜红包&#xff0c;打开活动链接 https://curl.qcloud.com/oRMoSucP 会自动弹出红包领取窗口&#xff0c;如下图&#xff1a; 腾讯云2024新春采购节红包领取 如上图所示&#xff0c;点击“领”红包&#xff0c;每…
阅读更多...
回溯算法01-组合(Java)

回溯算法01-组合(Java)

1.组合 题目描述 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;n 4, k 2 输出&#xff1a; [[2,4],[3,4],[2,3],[1,2],[1,3],[1,4]]示例 2&#xff1a; 输入&#x…
阅读更多...
VMware虚拟机安装Centos7图解，提供软件包镜像(详细安装，小白入门必看)

VMware虚拟机安装Centos7图解，提供软件包镜像(详细安装，小白入门必看)

目录 1. 安装vmware软件 2. 下载centos7镜像 3. 使用镜像安装centos操作系统 3.1 创建新的虚拟机 3.2 开机安装系统 4. 尝试网络连通性 5. 配置静态ip地址 1. 安装vmware软件 下载链接&#xff08;包含激活码&#xff09;&#xff1a;VMware https://www.alipan…
阅读更多...
C语言初学10：共同体

C语言初学10：共同体

一、共同体作用 提供一种在相同内存位置存储不同数据类型的有效方式 二、共同体定义 union [union tag] //tag是可选参数 {member definition;member definition;...member definition; } [one or more union variables]; // 共同体变量是可选的 三、共同体占用空间大小 #…
阅读更多...
vCity 2.8 – 在线浏览器元宇宙游戏平台（虚拟现实网页游戏平台）可获取现实金钱对接贝宝

vCity 2.8 – 在线浏览器元宇宙游戏平台（虚拟现实网页游戏平台）可获取现实金钱对接贝宝

vCity Nulled 是一个采用最新网络技术开发的在线浏览器游戏平台。vCity Free Download Scripts 是多功能游戏脚本&#xff0c;可帮助您根据自己的喜好创建自己的在线浏览器游戏&#xff0c;因为它有许多选项和设置&#xff0c;可以通过这些选项和设置来修改和创建您想要的浏览器…
阅读更多...
亚信安慧AntDB：编织数据丝路，缔造创新篇章

亚信安慧AntDB：编织数据丝路，缔造创新篇章

亚信安慧AntDB作为一款具备国产化升级改造经验的数据库系统&#xff0c;在15年的平稳运行中积累了丰富经验。通过持续的创新和技术进步&#xff0c;AntDB不断优化性能和功能&#xff0c;满足用户的需求&#xff0c;与国际先进数据库系统保持竞争力。 AntDB秉承着与用户和行业保…
阅读更多...
【广度优先搜索】【堆】【C++算法】407. 接雨水 II

【广度优先搜索】【堆】【C++算法】407. 接雨水 II

作者推荐 【二分查找】【C算法】378. 有序矩阵中第 K 小的元素 本文涉及知识点 广度优先搜索 堆 LeetCoce407. 接雨水 II 给你一个 m x n 的矩阵&#xff0c;其中的值均为非负整数&#xff0c;代表二维高度图每个单元的高度&#xff0c;请计算图中形状最多能接多少体积的雨…
阅读更多...
最新文章

Copyright @ 2022~2023