评论资讯 [ 总 913 则 ]
·马黑 - 2024-12-19 08:19
·马黑 - 2024-12-16 23:53
·马黑 - 2024-12-15 22:34
·马黑 - 2024-12-14 23:53
·马黑 - 2024-12-13 18:38
·悄然 - 2024-12-7 06:47
·马黑 - 2024-12-5 23:17
·马黑 - 2024-12-1 17:26
·马黑 - 2024-11-28 11:41
·悄然 - 2024-11-24 21:37
·马黑 - 2024-12-16 23:53
·马黑 - 2024-12-15 22:34
·马黑 - 2024-12-14 23:53
·马黑 - 2024-12-13 18:38
·悄然 - 2024-12-7 06:47
·马黑 - 2024-12-5 23:17
·马黑 - 2024-12-1 17:26
·马黑 - 2024-11-28 11:41
·悄然 - 2024-11-24 21:37
友情链接
网站统计
js教程五——童年图片响应实例
锚不好使,就用JS来设定响应机制。和此前的帖子有所不同,一个 div 都不用,也不用 table,用的是自定义列表标签 dl及其子元素dt和dd。全帖代码如下:
<style type="text/css">
.pic-dl {
margin: 0 auto;
padding: 0;
width: 700px;
height: 580px;
position: relative;
border: 10px solid #d2c48c;
}
.pic-dt {
position: absolute;
width: 700px;
height: 30px;
right: 0;
bottom: 0;
background: #faebd7;
text-align: center;
}
.pic-dt span {
margin: 1px;
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
font-size: 12px;
text-decoration: none;
text-align: center;
color: #eee;
background: rgba(0,0,0,.8);
border-radius: 50%;
cursor: pointer;
}
.pic-dt span:hover { opacity: 0.8; }
.pic-dt iframe {
position: absolute;
left: -50px;
top: -50px;
clip-path: circle(33px at 43px 43px);
opacity: 0.8;
}
.pic-dd {
margin: 0; padding: 0;
width: 700px;
height: 540px;
display: flex;
overflow: hidden;
background: #eee;
}
.pic-dd img {
width: 696px;
height: 536px;
border:2px solid #666;
object-fit: cover;
}
</style>
<dl class="pic-dl">
<dt class="pic-dt">
<! 这一部分代码请复制十楼的 -->
<iframe class="wyy" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=109530&auto=1&height=66"></iframe>
</dt>
<dd class="pic-dd">
<img id="my_pic" src="https://638183.freep.cn/638183/Pic/2022/tn1_132880702463183593.jpg" alt="" />
</dd>
</dl>
<script language="javascript">
var ar_pic = [
"https://638183.freep.cn/638183/Pic/2022/tn1_132880702463183593.jpg",
"https://638183.freep.cn/638183/Pic/2022/tn2.jpg",
"https://pic.imgdb.cn/item/61f775e62ab3f51d91944802.jpg",
"https://pic.imgdb.cn/item/61f7767c2ab3f51d9194cbd1.jpg",
"https://pic.imgdb.cn/item/61f7772e2ab3f51d9195669c.jpg",
"https://pic.imgdb.cn/item/61f777c02ab3f51d9195e21b.jpg"
];
function showpic(flag) {
document.getElementById('my_pic').src = ar_pic[flag-1];
}
</script>
使用此代码,如果不需要更改外观,则只需两步:
一、img 标签填上一张图片地址,可以是6张图片以外的图片;
二、JS代码中小心一一填上6张图片的地址,不要破坏代码结构。
如果希望贴出更多的图片,则:① 参照span的HTML代码样式添加 span 标签;② 参照JS代码样式添加图片地址,中括号里,图片地址不是最后一个的都要有小角逗号收尾,最后一个不能有逗号。
<style type="text/css">
.pic-dl {
margin: 0 auto;
padding: 0;
width: 700px;
height: 580px;
position: relative;
border: 10px solid #d2c48c;
}
.pic-dt {
position: absolute;
width: 700px;
height: 30px;
right: 0;
bottom: 0;
background: #faebd7;
text-align: center;
}
.pic-dt span {
margin: 1px;
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
font-size: 12px;
text-decoration: none;
text-align: center;
color: #eee;
background: rgba(0,0,0,.8);
border-radius: 50%;
cursor: pointer;
}
.pic-dt span:hover { opacity: 0.8; }
.pic-dt iframe {
position: absolute;
left: -50px;
top: -50px;
clip-path: circle(33px at 43px 43px);
opacity: 0.8;
}
.pic-dd {
margin: 0; padding: 0;
width: 700px;
height: 540px;
display: flex;
overflow: hidden;
background: #eee;
}
.pic-dd img {
width: 696px;
height: 536px;
border:2px solid #666;
object-fit: cover;
}
</style>
<dl class="pic-dl">
<dt class="pic-dt">
<! 这一部分代码请复制十楼的 -->
<iframe class="wyy" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=109530&auto=1&height=66"></iframe>
</dt>
<dd class="pic-dd">
<img id="my_pic" src="https://638183.freep.cn/638183/Pic/2022/tn1_132880702463183593.jpg" alt="" />
</dd>
</dl>
<script language="javascript">
var ar_pic = [
"https://638183.freep.cn/638183/Pic/2022/tn1_132880702463183593.jpg",
"https://638183.freep.cn/638183/Pic/2022/tn2.jpg",
"https://pic.imgdb.cn/item/61f775e62ab3f51d91944802.jpg",
"https://pic.imgdb.cn/item/61f7767c2ab3f51d9194cbd1.jpg",
"https://pic.imgdb.cn/item/61f7772e2ab3f51d9195669c.jpg",
"https://pic.imgdb.cn/item/61f777c02ab3f51d9195e21b.jpg"
];
function showpic(flag) {
document.getElementById('my_pic').src = ar_pic[flag-1];
}
</script>
使用此代码,如果不需要更改外观,则只需两步:
一、img 标签填上一张图片地址,可以是6张图片以外的图片;
二、JS代码中小心一一填上6张图片的地址,不要破坏代码结构。
如果希望贴出更多的图片,则:① 参照span的HTML代码样式添加 span 标签;② 参照JS代码样式添加图片地址,中括号里,图片地址不是最后一个的都要有小角逗号收尾,最后一个不能有逗号。
前一篇: JS教程四——动态创建元素
下一篇: JS教程之六——for语句
发表评论:
评论列表 [0条]