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

CSS中模糊滤镜

2016-06-24 16:11 399 查看
今天在做图片轮播的时候，添加CSS中模糊滤镜，感觉效果还行。如下图



代码如下图

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.blur {
filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
-webkit-filter: blur(40px); /* Chrome, Opera */
-moz-filter: blur(40px);
-ms-filter: blur(40px);
filter: blur(40px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=40, MakeShadow=false); /* IE6~IE9 */

}
.play_imgs{width: 100%; height: auto; margin: 0 auto; text-align: center; background-color: #aaa;position: relative;}
ul{list-style: none;}
#play_imgs_bg{width: 100%; height: 100%; background-size: 100% 100%; background-repeat: no-repeat;position: absolute; background-image: url('./images/index/banner1.jpg')}
.play_imgs_width{width:610px; margin: 0 auto;}
.imgs_source{ margin: 0 auto; position: relative; height: 400px; overflow: hidden;}
.imgs_source li{position: absolute; width: 100%; left: 0px;}

.cur_active{z-index: 10;}
.imgs_buttons{ margin: 0 auto; width: 400px; text-align: center; position: relative; height: 35px;  top:-50px; margin: 0 auto; z-index: 20;}
.imgs_buttons li {float: left; width: 120px;}
.imgs_buttons li a{display: block; width: 100px; margin: 0 10px;	height: 20px; line-height: 20px; text-decoration: none;}
.buttons_default{background:rgba(255,255,255,0.5) none repeat scroll !important; /*实现FF背景透明，文字不透明*/
background-color: #FFF; filter:Alpha(opacity=50);/*实现IE背景透明*/}
.buttons_ahover,.imgs_buttons li a:hover{background:rgba(200,200,200,0.5) none repeat scroll !important; /*实现FF背景透明，文字不透明*/
background-color: rgba(200,200,200); filter:Alpha(opacity=50);/*实现IE背景透明*/ color: #f00}

</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<title>
测试
</title>
</head>
<body>
<div>
<div class="play_imgs">
<div id="play_imgs_bg" class="blur">

</div>
<ul class="play_imgs_width  imgs_source">
<li style="z-index:10">
<a href="javascript:;"><img src="./images/index/banner1.jpg" width="610px" height="390px"/></a>
</li>
<li style="z-index:0">
<a href="javascript:;"><img src="./images/index/banner2.png" width="610px" height="390px"/></a>
</li>
<li style="z-index:0">
<a href="javascript:;"><img src="./images/index/banner3.jpg" width="610px" height="390px"/></a>
</li>
</ul>
<ul class="imgs_buttons play_imgs_width">
<li><a href="javascript:;" class="buttons_ahover">1</a></li>
<li><a href="javascript:;" class="buttons_default">2</a></li>
<li><a href="javascript:;" class="buttons_default">3</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function(){
$('.imgs_buttons a').click(function(){
$('.imgs_buttons a').not(this).removeClass().addClass('buttons_default');
$(this).removeClass().addClass('buttons_ahover');
//图片移动
movePlayImgs($(this).parent().index());
});
/**
*index代表下一次需要出现图片的序号
**/
function movePlayImgs(){
//先把上一次显示的图片
if(arguments.length>0){
index=arguments[0];
}else{
var imgSum=-1;
$('.imgs_source li').each(function(){
if($(this).css('z-index')==10){
index=$(this).index();
}
imgSum+=1;
});
if(index==imgSum){
index=0;
}else{
index+=1;
}
}
var lastObj=null;
$('.imgs_source li').each(function(i){
if(index ==i && $(this).css('z-index') !=10){
$(this).css({'z-index':10,'left':'-610px'}).animate({'left':0},1000,function(){
if(lastObj !=null){
lastObj.css('z-index',0);
}
});

//更换play_imgs的背景
var imgSrc=$(this).find('img').attr('src');
$('#play_imgs_bg').css({'background':'url('+imgSrc+')'});
//修改按钮样式
$('.imgs_buttons a').removeClass().addClass('buttons_default').eq(index).removeClass().addClass('buttons_ahover');
}else if( index !=i && $(this).css('z-index')==10){
$(this).css('z-index',5);
lastObj=$(this);
}
});
}

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