您的位置：首页 > 其它

完成一个个人博客，博客头像可上传本地图片；部分图片实现点击看大图功能

2017-04-24 21:08 776 查看
完成一个个人博客，博客头像可上传本地图片；部分图片实现点击看大图功能



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="boke">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jiangsir</title>
<link rel="stylesheet" href="style.css">
<style type="text/css">
/*css层叠样式列表  css样式*/
*{  /* * 通配符 所有元素  为了减少元素默认边距的干扰  直接全部归为零*/
margin: 0;
padding:0;

}

#Main{
width: 1000px;
height: 640px;
/*background: red;*/
margin: 30px auto 0px ;/*上外边距 左右 下*/

}
#Main  ul li{
list-style: none;/*列表样式*/
width: 288px;
height: 180px;
/*border: /*粗细 样式（实线）颜色 */
float: left;/*左浮动*/
margin: 10px 17px;
box-shadow:5px 5px 10px #000;
/*css3盒子阴影 ：水平偏移 垂直偏移 阴影边距 颜色*/
border: 4px solid #fff;
cursor: pointer;/*鼠标样式*/
}
.gray{
width:100%;
height: 100%;
background: rgba(0,0,0,0.5);/*rgb 红 绿 蓝 a透明度（0-1）*/
position: absolute;/*绝对定位 改变盒子的位置*/
left: 0px;
top:0px;
display: none;
/*定位 1、找到需要改变位置的盒子 给它一个绝对定位
2、找到这个盒子改变位置的参照物 给它一个相对定位（如果此盒子有定位属性 那么则不需要给）,如果往父级一直找不到定位属性，那么定位的父级盒子是body
*/
}
.showImg{
width: 650px;
height: 405px;
position: absolute;
top: 100px;
left:50%;
margin-left: -325px;
padding:10px;
background:white;
display: none;
}
.showImg img.but_l{position: absolute;top:170px;left: -70px;cursor: pointer;}
.showImg img.but_r{position: absolute;top:170px;right:-70px;cursor: pointer;}
</style>
<script src="jquery-3.2.0.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="wrap">

<div id="heading">
<h1>jiangsir</h1>
</div>
<div id="user">
<img src="images/s8.jpg" alt="用户头像" width="160" height="160">
<span>点击更换头像</span>
</div>

</div>
<div id="cover">
<div class="bg"></div>
<div class="bp">
<div id="preview">
<span class="close-cover">×</span>
<img id="imghead" src="images/s8.jpg" alt="用户头像" width="200" height="200">
<p>
<span>更换头像：</span>
<input type="file" onchange="previewImage(this)">
</p>
</div>
</div>
</div>
<div id="Main">
<ul>
<!--bigSrc 是自定义属性-->
<li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s1.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big1.jpg" alt=""></li>
<li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s2.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big2.jpg"alt=""></li>
<li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s3.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big3.jpg"alt=""></li>
<li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s4.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big4.jpg"alt=""></li>
<li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s5.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big5.jpg"alt=""></li>
<li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s6.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big6.jpg"alt=""></li>
<li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s7.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big7.jpg"alt=""></li>
<li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s8.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big8.jpg"alt=""></li>
<li><img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/s9.jpg" bigSrc="http://ftp6132179.host532.zhujiwu.me/2.15/images/big9.jpg"alt=""></li>
</ul>
</div>
<div class="gray"><!--灰色幕布--></div>
<div class="showImg"><!--大图展示-->
<img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/big1.jpg" class="show_img">
<img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/dirl.png" class="but_l">
<img src="http://ftp6132179.host532.zhujiwu.me/2.15/images/dirr.png" class="but_r">
</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
var bImg = "";
var index = 0;//初始化下标
$("#Main ul li").click(function(){
index = $(this).index();
//alert();
$(".gray").show();
$(".showImg").show();
bImg = $(this).find("img").attr("bigSrc");
$(".showImg img.show_img").attr("src",bImg);
});
$(".gray").click(function(){
$(".gray").hide();/*隐藏元素*/
$(".showImg").hide();
})
$(".but_l").click(function(){
index --;//下标逐渐减小
if (index<0) {
alert("这是第一张图片");
index = 0;
}

bImg = $("#Main ul li").eq(index).find("img").attr("bigSrc");
$(".showImg img.show_img").attr("src",bImg);
})
$(".but_r").click(function(){
index ++;
if (index>8) {
alert("这是最后一张图片");
index = 8;
}
bImg = $("#Main ul li").eq(index).find("img").attr("bigSrc");
$(".showImg img.show_img").attr("src",bImg);
})
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航