以下是 jQuery相册图片滤镜效果 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery相册图片滤镜效果 </title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<ul class="gallery">
<li class="portrait">
<span class="date">7 Octobre 2013</span>
<img class="pic" src="images/621b77142f7411e39a8f22000a9f195b_6.jpg" data-src-wide="images/621b77142f7411e39a8f22000a9f195b_8.jpg" alt="BINGOO" />
<div class="foot">
<span class="entypo-comment comment">100</span>
<span class="entypo-heart heart">100</span>
</div>
</li>
<li class="portrait">
<span class="date">7 Octobre 2013</span>
<img class="pic" src="images/f3f72dc42f3111e3ba2c1231391eb9f5_6.jpg" data-src-wide="images/f3f72dc42f3111e3ba2c1231391eb9f5_8.jpg" alt="BINGOO" />
<div class="foot">
<span class="entypo-comment comment">100</span>
<span class="entypo-heart heart">100</span>
</div>
</li>
<li class="portrait">
<span class="date">7 Octobre 2013</span>
<img class="pic" src="images/d720325c2f3311e3b41222000a1f8cb0_6.jpg" data-src-wide="images/d720325c2f3311e3b41222000a1f8cb0_8.jpg" alt="BINGOO" />
<div class="foot">
<span class="entypo-comment comment">100</span>
<span class="entypo-heart heart">100</span>
</div>
</li>
<li class="portrait">
<span class="date">7 Octobre 2013</span>
<img class="pic" src="images/666afbec30d111e396cd22000a1fd1c2_6.jpg" data-src-wide="images/666afbec30d111e396cd22000a1fd1c2_8.jpg" alt="BINGOO" />
<div class="foot">
<span class="entypo-comment comment">100</span>
<span class="entypo-heart heart">100</span>
</div>
</li>
<li class="portrait">
<span class="date">7 Octobre 2013</span>
<img class="pic" src="images/9bc489481ace11e3aca322000a1fa76a_6.jpg" data-src-wide="images/9bc489481ace11e3aca322000a1fa76a_7.jpg" alt="BINGOO" />
<div class="foot">
<span class="entypo-comment comment">100</span>
<span class="entypo-heart heart">100</span>
</div>
</li>
<li class="portrait">
<span class="date">7 Octobre 2013</span>
<img class="pic" src="images/961ff1b04a0a11e3b98b126fa4e6a4fb_6.jpg" data-src-wide="images/961ff1b04a0a11e3b98b126fa4e6a4fb_8.jpg" alt="BINGOO" />
<div class="foot">
<span class="entypo-comment comment">100</span>
<span class="entypo-heart heart">100</span>
</div>
</li>
<li class="portrait">
<span class="date">7 Octobre 2013</span>
<img class="pic" src="images/a85cca1c2a7d11e39bf922000ab5b971_6.jpg" data-src-wide="images/a85cca1c2a7d11e39bf922000ab5b971_8.jpg" alt="BINGOO" />
<div class="foot">
<span class="entypo-comment comment">100</span>
<span class="entypo-heart heart">100</span>
</div>
</li>
<li class="portrait">
<span class="date">7 Octobre 2013</span>
<img class="pic" src="images/0dab58047ed211e39686129d69e7bd65_6.jpg" data-src-wide="images/0dab58047ed211e39686129d69e7bd65_8.jpg" alt="BINGOO" />
<div class="foot">
<span class="entypo-comment comment">100</span>
<span class="entypo-heart heart">100</span>
</div>
</li>
</ul>
<div class="carrousel">
<span class="close entypo-cancel"></span>
<!-- <span class="entypo-arrows-ccw loanding"> Loading large photo</span> -->
<div class="wrapper">
<img src="images/" alt="BINGOO" />
</div>
</div>
<script src='js/jquery.js'></script>
<script src="js/index.js"></script>
</body>
</html>JS代码(index.js):
var carrousel = $( ".carrousel" );
$( ".portrait" ).click( function(e){
var src = $(this).find(".pic").attr( "data-src-wide" );
carrousel.find("img").attr( "src",src );
carrousel.fadeIn( 200 );
}
);
carrousel.find( ".close" ).click( function(e){
carrousel.find( "img" ).attr( "src",'' );
carrousel.fadeOut( 200 );
}
);
CSS代码(style.css):
@import url(http://weloveiconfonts.com/api/?family=entypo);[class*="entypo-"]:before{font-family:'entypo',sans-serif;}
body{background-color:#eaeaea;font-family:'Roboto';}
.center-block,.carrousel,.carrousel .wrapper{margin:auto;position:absolute;top:0;bottom:0;left:0;right:0;}
.gallery{list-style:none;}
.portrait{width:150px;box-shadow:0 0 3px #555;background-color:#FFF;padding:5px;margin:7px 0px 0px 7px;text-align:center;cursor:pointer;float:left;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;-webkit-filter:grayscale(100%);filter:grayscale(100%);}
.portrait:hover{-moz-transform:scale(1.04,1.04);-ms-transform:scale(1.04,1.04);-webkit-transform:scale(1.04,1.04);transform:scale(1.04,1.04);box-shadow:0 0 5px #555;-webkit-filter:grayscale(0%);filter:grayscale(0%);}
.portrait .pic{width:100%;margin:5px 0;}
.portrait .date{font-size:10px;font-weight:bold;}
.portrait .foot{font-size:11px;}
.portrait .foot .heart{margin-left:4px;}
.carrousel{position:fixed;background-color:rgba(10,10,10,0.8);display:none;}
.carrousel .wrapper{width:600px;height:600px;overflow:hidden;/*.loading{color:#FFF;font-size:24px;margin:40% 40%;display:none;}
*/
}
.carrousel .wrapper > img{width:100%;}
.close{cursor:pointer;color:#FFF;position:absolute;top:4px;right:8px;font-size:18px;}
.close:hover{font-size:20px;color:#DDD;}
分享到QQ
分享到微博
微信扫一扫
