重庆制作网站培训机构,wordpress 页头,关于网站建设的话术,wordpress 图标不显示实现效果#xff1a;
当鼠标悬停在小图#xff08;缩略图#xff09;上时#xff0c;大图#xff08;预览图#xff09;会随之更新为相应的小图#xff0c;并高亮当前悬浮的小图的父元素。 代码#xff1a;
1. HTML部分
!DOCTYPE html
html langz…实现效果
当鼠标悬停在小图缩略图上时大图预览图会随之更新为相应的小图并高亮当前悬浮的小图的父元素。 代码
1. HTML部分
!DOCTYPE html
html langzhheadmeta charsetUTF-8title图像放大效果示例/titlelink relstylesheet hrefstyles.css/headbodydivimg src./image/image1.jpg idbigImg alt大图展示ulli classactiveimg src./image/image1.jpg alt小图1 classsmallImg/liliimg src./image/image2.jpg alt小图2 classsmallImg/liliimg src./image/image3.jpg alt小图3 classsmallImg/liliimg src./image/image4.jpg alt小图4 classsmallImg/liliimg src./image/image5.jpg alt小图5 classsmallImg/li/ul/divscript srcscript.js/script/body
/html
2. CSS部分 * {padding: 0;margin: 0;}body {background-color: #f5f5f5;text-align: center;}#bigImg {width: 300px;height: 300px;border: 2px solid #ccc;margin-bottom: 20px;}ul {list-style: none;overflow: hidden;padding: 0;}ul li {float: left;width: 60px;height: 60px;margin: 10px;border: 2px solid #fff;cursor: pointer;}ul li.active {border-color: red;}ul li img {width: 100%;height: 100%;} 3. js部分 注采用方式一 或 方式二 中的一种方式即可。
方式一
var bigImg document.getElementById(bigImg);
var smallImgs document.getElementsByClassName(smallImg);for (var i 0; i smallImgs.length; i) {smallImgs[i].onmouseover function() {// 清除所有li的active类var liElements document.querySelectorAll(ul li);for (var j 0; j liElements.length; j) {liElements[j].classList.remove(active);}// 修改大图的src属性var smallImgSrc this.getAttribute(src);bigImg.setAttribute(src, smallImgSrc);// 为当前悬浮的img父li添加active类this.parentNode.classList.add(active);}
}
代码解析
1. 变量定义:
bigImg: 通过 document.getElementById(bigImg) 获取 ID 为 bigImg 的元素通常是一个用于显示大图的 img 标签。smallImgs: 通过 document.getElementsByClassName(smallImg) 获取所有类名为 smallImg 的元素通常是小图片的 img 标签集合。
2. 循环遍历小图片:
for (var i 0; i smallImgs.length; i) {使用 for 循环遍历每一个小图片。
3. 鼠标悬停事件:
smallImgs[i].onmouseover function() {为每个小图片绑定 onmouseover 事件当鼠标悬停在小图片上时执行以下代码
4. 清除所有 li 的 active 类:
var liElements document.querySelectorAll(ul li);
for (var j 0; j liElements.length; j) {liElements[j].classList.remove(active);
}通过 document.querySelectorAll(ul li) 获取所有 ul 内的 li 元素并遍历它们移除每个 li 的 active 类确保只有当前的图片有高亮效果。
5. 更新大图的 src 属性:
var smallImgSrc this.getAttribute(src);
bigImg.setAttribute(src, smallImgSrc);获取当前悬停小图片的 src 属性然后将大图的 src 属性更新为该小图片的 src以便显示对应的图片。
6. 为当前悬浮的 img 的父 li 添加 active 类:
this.parentNode.classList.add(active);获取当前小图片的父元素通常是 li并为其添加 active 类以突出显示当前选中的小图片。 方式二
var bigImg document.getElementById(bigImg);
var smallImgs document.querySelectorAll(ul li img);smallImgs.forEach(function(smallImg) {smallImg.onmouseover function() {// 清除所有li的active类document.querySelectorAll(ul li).forEach(function(li) {li.classList.remove(active);});// 修改大图的src属性var smallImgSrc this.getAttribute(src);bigImg.setAttribute(src, smallImgSrc);// 为当前悬浮的img父li添加active类this.parentNode.classList.add(active);}
});
代码解析
1. 获取元素
var bigImg document.getElementById(bigImg);
var smallImgs document.querySelectorAll(ul li img);bigImg获取大图的元素假设这个元素的 ID 是 bigImg。smallImgs获取所有小图的元素这些元素是位于一个无序列表 ul 中的列表项 li 内的图片 img。
2. 对小图应用事件监听
smallImgs.forEach(function(smallImg) {smallImg.onmouseover function() {通过 forEach 遍历所有的小图smallImgs。对于每一个小图设置 onmouseover 事件即当鼠标悬停在小图上时触发的函数。
3. 清除所有 li 的 active 类
document.querySelectorAll(ul li).forEach(function(li) {li.classList.remove(active);
});在鼠标悬停时先清除所有列表项li的 active 类名确保只保留当前被悬停的图像的样式。
4. 修改大图的 src 属性
var smallImgSrc this.getAttribute(src);
bigImg.setAttribute(src, smallImgSrc);this 代表当前悬浮的小图对象。通过 getAttribute(src) 获取当前小图的 src 属性。将获取到的小图的 src 赋值给大图的 src从而实现大图更新。
5. 为当前悬浮的 img 的父 li 添加 active 类
this.parentNode.classList.add(active);获取当前小图的父元素即 li并为其添加 active 类以便可以通过 CSS 对该元素进行特殊的样式处理比如高亮显示。
