您的位置：首页 > Web前端 > CSS

html+css实现图片展示桌面

2015-02-25 21:58 453 查看 
<strong><span style="font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
*{margin:0px 0px; padding:0px 0px;}
body{background:url("img/bg.jpg");position:relative;}
#main{width:1186px;height:788px;
border:1px solid #66FF33;margin:50px auto;box-shadow:1px 1px 8px #FFCC66;border-radius:9px;background:rgba(234,234,234,0.6);
position:relative;}
#main ul{display:block;}
#main ul li{list-style:none;margin:15px;width:260px;height:160px;
border-radius:7px;box-shadow:1px 1px 6px #000;overflow:hidden;
border:2px solid #FFFF33;float:left;}
#main ul li:hover img{transform:scale(1.3);transition:transform 800ms;}
#main ul li img{display:block;width:260px;height:160px;}
#gray{width:650px;height:406px;POSITION:absolute;top:173px;
left:260px;
border:3px solid rgba(255,255,255,.5);box-shadow:0px 0px 24px #000;border-radius:6px;
background:rgba(0,0,0,0.6);display:none;}
#gray .IMG{width:600px;height:346px;margin:30px auto;opacity:0.9;
#000;border-radius:6px;position:relative;overflow:HIDDEN;}
#gray .IMG img{width:600px;height:346px;position:relative;
position:absolute;left:0px;top:0px;}
#gray .IMG:hover img{transform:scale(1.3);transition:transform 800ms;}
.l-but{width:41px;height:71px;position:absolute;
/*border:1px solid #FFF;*/top:330px;border-radius:6px;
left:200px;background:url("img/arrow.png");
background-position:-85px center;display:none;}
.r-but{width:41px;height:71px;position:absolute;
/*border:1px solid #FFF;*/top:330px;left:930px;
background:url("img/arrow.png");border-radius:6px;
background-position:-123px center;display:none;}
.l-but:hover{background-position:-1px center;}
.r-but:hover{background-position:-41px center;}
</style>
</head>

<body>
<div id="main">
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/8.jpg"/></li>
<li><img src="img/11.jpg"/></li>
<li><img src="img/13.jpg"/></li>
<li><img src="img/23.jpg"/></li>
<li><img src="img/b.jpg"/></li>
<li><img src="img/f.jpg"/></li>
<li><img src="img/h.jpg"/></li>
<li><img src="img/u.jpg"/></li>
<li><img src="img/15.jpg"/></li>
<li><img src="img/16.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/11.jpg"/></li>
</ul>
<div>
<div id="gray">
<div class="IMG">
<img src="img/11.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>
<img src="img/8.jpg"/>
<img src="img/11.jpg"/>
<img src="img/13.jpg"/>
<img src="img/23.jpg"/>
<img src="img/b.jpg"/>
<img src="img/f.jpg"/>
<img src="img/h.jpg"/>
<img src="img/u.jpg"/>
<img src="img/15.jpg"/>
<img src="img/16.jpg"/>
<img src="img/3.jpg"/>
<img src="img/1.jpg"/>
</div>
</div>
<div class="r-but"></div>
<div class="l-but"></div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var i =0;
$("#main ul li").click(function(){
$("#gray").show();
$(".l-but").show();
$(".r-but").show();
/*var _bigSrc=$(this).find("img").attr("src");
alert(_bigSrc);
$("#gray .IMG img").attr("src",_bigSrc);*/
index=$(this).index();
/*alert(index);*/
i=index;
$("#gray .IMG img").eq(i).fadeIn().siblings().fadeOut();
/*alert(i);*/
});
$(".r-but").click(function(){
/*
index++;
alert(index);
_bigSrc=$(#Main ul li).eq().find("img").attr("bigSrc");
$(".gray .IMG img .BIGIMG").attr("src",_bigSrc);
*/
i++;
if(i<16 && i>0){
/*$(".pic img").eq(i).show().siblings().hide();*/
$("#gray .IMG img").eq(i).fadeIn().siblings().fadeOut();
/*alert(i);*/
}else{
i=0;
$("#gray .IMG img").eq(i).fadeIn().siblings().fadeOut();
}14-12-10
});
$(".l-but").click(function(){
i--;
if(i<16 && i>0){
/*$(".pic img").eq(i).show().siblings().hide();*/
$("#gray .IMG img").eq(i).fadeIn().siblings().fadeOut();
/*alert(i);*/
}else{
i=16;
$("#gray .IMG img").eq(i).fadeIn().siblings().fadeOut();
}
});
$("#gray").click(function(){
$(this).hide();
$(".l-but").hide();
$(".r-but").hide();
});
</script>
</body>
</html>
</span></strong>





内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航