CSS中模糊滤镜

最新推荐文章于 2024-04-08 22:57:24 发布

我爱默小兜

最新推荐文章于 2024-04-08 22:57:24 发布

阅读量879

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/hsd2012/article/details/51746716

版权

html 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

今天在做图片轮播的时候，添加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>