web js jquery css 倒影

来源：互联网发布：oppo手机自动开启数据编辑：程序博客网时间：2024/05/16 09:48

下面这篇文章就给大家分享了用CSS3来制作倒影效果的方法，及制作动态相册，有需要的朋友们可以参考借鉴。

我们来了解box-reflect如何使用？

语法如下：

?
1
2
-webkit-box-reflect：none| <direction> <offset>? <mask-box-image>?
box-reflect:none| <direction> <offset>? <mask-box-image>?

属性说明：

none：此值为默认值，表示无倒影；

direction：生成倒影的方向

above：指定倒影在对象的上边 below：指定倒影在对象的下边 left：指定倒影在对象的左边 right：指定倒影在对象的右边

offset：图片与倒影间隔

length：用长度值来定义倒影与对象之间的间隔。可以为负值 percentage：用百分比来定义倒影与对象之间的间隔。可以为负值

mask-box-image：用来设置倒影的遮罩效果；

值可以是：

none：无遮罩图像 url：使用绝对或相对地址指定遮罩图像。 linear-gradient：使用线性渐变创建遮罩图像。 radial-gradient：使用径向(放射性)渐变创建遮罩图像。 repeating-linear-gradient：使用重复的线性渐变创建背遮罩像。 repeating-radial-gradient：使用重复的径向(放射性)渐变创建遮罩图像。

<!DOCTYPE html>
<html>
<head>
<meta content="text/html" charset="utf-8">
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<title>相册</title>
<style type="text/css">
*{
margin: 0;
padding:0 ;
}
body{
background: #000;
}
#banner{
width:100%;
height:200px;
border:1px solid ;
margin-left:0px;
padding: 0px;
position:absolute;
bottom:50%;
transform-style: preserve-3d;/*设置3D风格*/
-webkit-perspective:800px; /*元素距离视图的距离*/
}
#banner img{
width:350px;
height:250px;
position: absolute;
/*给倒影设置渐变效果*/
-webkit-box-reflect:below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));
box-reflect:below 0 linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));
transition:1s; /*设置跳转的时间*/

}

.box-reflect img{
-webkit-box-reflect:below;
box-reflect:blew;

}
/*
最开始定义的class后边简化后没有继续使用

*/.img1{
transform: rotateY(70deg);
--moz-transform: rotateY(70deg);
}
.img2{
transform: rotateY(70deg);
--moz-transform: rotateY(70deg);
}
.img3{
transform: rotateY(70deg);
--moz-transform: rotateY(70deg);
}
.img4{
transform: rotateY(70deg);
--moz-transform: rotateY(70deg);
}
.img5{
transform: rotateY(70deg);
--moz-transform:rotateY(70deg);

} .img6{
transform: rotateY(-70deg);
--moz-transform: rotateY(-70deg);

transform:translateZ(100px);
}
.img7{
transform: rotateY(-70deg);
--moz-transform: rotateY(-70deg);
}
.img8{
transform: rotateY(-70deg);
--moz-transform: rotateY(-70deg);
}
.img9{
transform: rotateY(-70deg);
--moz-transform: rotateY(-70deg);
}
.img10{
transform: rotateY(-70deg);
--moz-transform: rotateY(-70deg);
}
.img11{
transform: rotateY(-70deg);
--moz-transform: rotateY(-70deg);
}*/
#banner img.left{transform:rotateY(70deg) translateZ(-100px);}
#banner img.now{transform:translateZ(100px);}
#banner img.right{transform: rotateY(-70deg) translateZ(-100px);}
</style>
}
}
}

</head>
<body>
<div id="banner" class="box-reflect" >
<img src="imgs/1.jpg" class="left" style="left: 100px">
<img src="imgs/2.jpg" class="left" style="left: 200px;">
<img src="imgs/3.jpg" class="left" style="left: 300px;">
<img src="imgs/4.jpg" class="left" style="left: 400px;">
<img src="imgs/5.jpg" class="left" style="left: 500px;">
<img src="imgs/6.jpg" class="now" style="left: 600px;">
<img src="imgs/7.jpg" class="right" style="left: 700px;">
<img src="imgs/8.jpg"class="right" style="left: 800px;">
<img src="imgs/9.jpg" class="right" style="left: 900px;">
<img src="imgs/10.jpg" class="right" style="left: 1000px;">
<img src="imgs/11.jpg" class="right" style="left: 1100px;">
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var mIndex=2;
$('#banner img').click(function(){
var nIndex=$(this).index();

$('#banner img').each(function(i) {
$(this).css('left',parseInt( $(this).css('left'))-100*(nIndex-mIndex)+'px');
if(i<nIndex){
$(this).attr('class','left');
}else if(i==nIndex){
$(this).attr('class','now')
}else{
$(this).attr('class','right');
}

});
mIndex=nIndex;
});

</script>
</body>
</html>

1 0