美味甜点网页选择更改图片练习

本博客链接：
https://blog.csdn.net/qq_44419470/article/details/103506624

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片轮播切换</title>
<link rel="stylesheet" type="text/css" href="../css/tupianlunboxiaoguo.css"/>
<link rel="stylesheet" type="text/css" href="../css/mycss.css"/>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
</head><body>
<div id="box" class="box"><h1>美味甜点</h1><div class="flex_box"><div id="img_box" class="img_box"> <img src="../images/heisenlin.jpg" alt="黑森林"> <span>黑森林</span></div><ul id="img_list" class="img_list"><li><a href="#"> <img src="../images/heisenlin.jpg" alt="黑森林"/> <span>黑森林</span> </a></li><li><a href="#"> <img src="../images/makalong.jpg" alt="马卡龙"/> <span>马卡龙</span> </a></li><li><a href="#"> <img src="../images/mucaidangao.jpg" alt="木材蛋糕"/> <span>木材蛋糕</span> </a></li><li><a href="#"> <img src="../images/paofu.jpeg" alt="泡芙"/> <span>泡芙</span> </a></li><li><a href="#"> <img src="../images/shahedangao.jpg" alt="沙河蛋糕"/> <span>沙河蛋糕</span> </a></li><li><a href="#"> <img src="../images/tilamisu.jpg" alt="提拉米苏"/> <span>提拉米苏</span> </a></li></ul></div>
</div>
<script src="../js/tupianlunboxiaoguo.js"></script>
</body>
</html>

@charset "utf-8";
/* CSS Document */
body{display: flex;justify-content: center;
}
.box{background-color:aquamarine;height: 800px;flex-basis: 1000px;/*设置第二个弹性盒元素的初始长度*/
}
.box h1{padding: 20px 0;text-align: center;color:#CC5AF3;letter-spacing: 6px;/*设置为h1元素的字母间距*/
}
.flex_box{display: flex;flex-flow: row wrap;justify-content: center;align-items: center;background-color:aqua;padding-bottom: 20px;
}
.img_box{flex-basis: 800px;height: auto;position: relative;
}
.img_box img{width: 100%;height: auto;
}
.img_box span{position: absolute;bottom: -20px;left: -30px;color:#000000;font-size: 30px;text-shadow: 5px 5px 5px #181617;/*基本文字阴影*/
}
.img_list{margin: 50px;/*border: 1px solid #000;*/flex-basis: 1000px;justify-content: space-around;align-items: center;display: flex;
}
.img_list li{flex-basis: 180px;height: auto;/*border: 1px solid #000;*/
}
.img_list li a{width: 100%;height: auto;display: block;border: 1px solid #c4c4c4;background-color: #ff5a37;color: white;
}
.img_list li a img{width: 100%;height: auto;
}
.img_list li a span{display: block;/*border: 1px solid #000;*/text-align: center;/*设置文本的对齐方式*/
}@media (max-width: 800px) {.img_box{order: 0;margin:0 10px;}.img_list{order: 0;margin: 0 10px 0 0;flex-direction: column;flex-basis: 300px;margin-top: 0;}.flex_box{flex-flow: row nowrap;}.img_box span{bottom: -20px;left: -5px;}
}

@charset "utf-8";
/* CSS Document */html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;border-width: 0;}
body{font-family:"楷体","黑体";
}
ul{list-style: none;
}
a{text-decoration: none;color: black;
}

$(function () {var $as = $("#img_list").find("a");var $imgs = $as.find("img");var $bigImg = $("#img_box img");var $bigImgSpan = $("#img_box span");//设置每一个小图的监听事件$as.each(function (index) {$(this).on('click', function () {$bigImg.fadeOut(1000, function () {$bigImg.attr("src", $imgs.eq(index).attr("src"));$bigImgSpan.text($imgs.eq(index).attr("alt"));});$bigImg.fadeIn(1000);});});
});

美味甜点网页选择更改图片练习相关推荐

基于html2canvas实现网页保存为图片及图片清晰度优化
一.实现HTML页面保存为图片 1.1 已知可行方案现有已知能够实现网页保存为图片的方案包括: **方案1:**将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输 ...
h5跨域访问图片_网页保存为图片及高清截图的优化 | canvas跨域图片配置
本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能,常见于H ...
网页保存为图片及高清截图的优化 | canvas跨域图片配置
本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能,常见于H ...
如何将网页保存为图片_如何用浏览器插件一键批量下载网页图片？
如果你看到一个网页上的图片想要全部下载下来,你是如何下载的?一个一个下载太慢了,并且有的图片还有水印,没有水印的不让你下载,比如,阿里巴巴里的产品详情页.那么,有什么办法能一键下载网页上的图片呢?准备 ...
html给网页加图片背景颜色,0035 如何设置网页背景图和在网页中插入图片
上节课讲了关于表格的一些更多知识和用表格配合div来进行网页排版. 这节课开始讲关于网页图片的相关知识. 上节课的课后练习 1.去网上搜索2个自己喜欢的图片,1个图片用来作为整个网页的背景,另一个图片 ...
更改图片位置_如何轻松快速地将图片转换到JPG/JPEG/PNG/BMP/TIFF
万兴优转可用作为图片转换器,帮助您批量更改图片格式,且不会丢失任何质量.例如,您可以将PNG转换到JPG或其他格式,反之亦然.您还可以通过更改图片宽度和高度来调整图片大小,或者通过裁剪,旋转,添加效果 ...
电脑打开html不显示图片,网页不显示图片,详细教您网页不显示图片怎么解决
在使用电脑浏览网页的时候是不是有碰到过网页不显示图片的时候呢?有的时候可能是因为电脑网速慢.所以加载图片不成功!而有的时候是因为有些地方需要设置.那网页不显示图片怎么解决?下面,小编跟大家介绍网页不显 ...
网页怎么在图片上添加文字_教你同时将图片水印和文字水印添加到视频画面
随着剪辑软件的层出不穷,现在会制作创意视频的人越来越多.今天小编给大家分享一款剪辑软件--视频剪辑高手,以同时给视频添加图片水印和文字水印的效果为例,教大家如何操作. 编辑文字水印命令勾选视频剪辑高 ...
PhotoShop更改图片背景色
PhotoShop更改图片背景色操作步骤如下所示: 打开图片==>图像/调整/替换颜色==>选择颜色==>选择油漆桶工具==>点击需要被替换的图片背景色注:不知道什么原因 ...

美味甜点网页选择更改图片练习

美味甜点网页选择更改图片练习相关推荐

最新文章

热门文章

美味甜点网页 选择更改图片练习

美味甜点网页 选择更改图片练习相关推荐

最新文章

热门文章

美味甜点网页选择更改图片练习

美味甜点网页选择更改图片练习相关推荐