Jquery 简单实现点击图片全屏预览效果!

作者: pengpeng 分类: 所有文章 发布时间: 2017-11-23 14:54

本文标题:Jquery 简单实现点击图片全屏预览效果!
阿偶,老衲真的是不发文章就不发,一发就不可收拾,今天再来一篇吧,自己写的一个点击图片实现图片全屏查看。效果请看下面的GIF,gif录制的有点卡顿,具体体验请下载或者点击最下方的在线预览!


上代码:index.html

<!DOCTYPE html>
<html>
<head>
<title>jquery点击图片全屏效果</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maxinum-scale=1,mininum-scale=1">
<!-- bootstrap cdn -->
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
<!-- jquery cdn -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
.title {
height: 50px;
line-height: 50px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #eee;
}
.imgs ul {
list-style: none;
}
.imgs li {
float: left;
width: 30%;
margin-left: 2%;
}
.im {
width: 100%;
}
.fei {
display: none;
width: 100%;
height: 100%;
position: fixed;
top:0;
left: 0;
background-image: url(1.jpg);
background-size: 100 100;
}
.fei-back {
height: 30px;
min-width: 60px;
padding-left: 8px;
padding-right: 8px;
background-color: #fff;
color: blue;
opacity: 0.5;
border-radius: 5px;
text-align: center;
line-height: 30px;
font-weight: bold;
position: fixed;
top:10px;
left: 10px;
}
.fei-like {
height: 30px;
min-width: 40px;
padding-left: 8px;
padding-right: 8px;
background-color: #fff;
color: blue;
opacity: 0.5;
border-radius: 5px;
text-align: center;
line-height: 30px;
font-weight: bold;
position: fixed;
top:10px;
left:100px;
}		
.fei-back:hover,.fei-like:hover {
opacity: 1;
}
.fei-jieshao {
width: 100%;
min-height: 60px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 8px;
padding-right: 8px;
background-color: #000;
color: #fff;
position: fixed;
bottom: 0;
left: 0;
opacity: 0.5;
text-indent: 2em;
line-height: 22px;
}
.fei-jieshao p {
opacity: 1;
font-weight: bold;
color: #fff;
}
.im,.fei-back,.fei-like {
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="title">
jquery点击图片全屏效果
</div>
<div class="imgs">
<ul>
<li>
<img src="1.jpg" class="im">
<span class="xf">
好美的山啊!
</span>
</li>
<li>
<img src="2.jpg" class="im">
<span class="xf">
这小蘑菇真有趣
</span>
</li>
<li>
<img src="3.jpg" class="im">
<span class="xf">
下雪啦下雪啦,我却不怎么开心!
</span>
</li>
</ul>
</div>
</div>
<!-- 飞出悬浮层 -->
<div class="fei">
<!-- 最顶部返回按钮 -->
<div class="fei-back">
←BACK
</div>
<!-- 爱心 -->
<div class="fei-like">
♥
</div>
<!-- 介绍层 -->
<div class="fei-jieshao">
<p>
这个是是是 啥啦啦啦啦绿绿啦啦啦啦绿多付多军付绿扩多军扩军扩绿军付绿多军付接口记得你才多久发链接都放假论文就发进来的非处女链接答非所问发66 双方各大赛发v
</p>
</div>
</div>
<script type="text/javascript">
$(function(){
var im = $('.im');
var xf = $('.xf');
var jieshao = $('.fei-jieshao p');
var fei = $('.fei');
var back = $('.fei-back');
// 点击图片跳出悬浮
im.bind('click',function(){
// 获取属性
var srcs = this.src;
var jieshaoTxt = $(this).next('.xf').html();
// 设置背景图片
fei.css('background-image','url(' + srcs +')');
// 设置介绍文字
jieshao.html(jieshaoTxt);
// 显示
fei.fadeIn(800);
});
// 点击back
back.bind('click',function(){
fei.fadeOut(800);
});
})
</script>
</body>
</html>

预览:点我预览

文件下载:

  Jquery 简单实现点击图片全屏预览效果.zip (999.0 KB, 17 次)

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

一条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注