将三个图像相互叠加
adding three images over one another
我想在 jquery 中的滑块的帮助下在 3 张图像之间产生淡入淡出效果。淡入淡出工作正常,但所有图像都并排出现,而不是另一个图像的顶部。我怎样才能实现呢?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#slider" ).slider({
range: "min",
value: 10,
min: 0,
max: 20,
slide: function (event, ui) {
var r = (ui.value);
$("#img1").css({'opacity':1-(r/10)});
$("#img2").css({'opacity':function(){
if((r-10)<0)
return r/10;
else
return 1-((r-10)/10);
}
});
$("#img3").css({'opacity':(r/10)-1});
}
})
});
</script>
</head>
<body>
<div style="position:relative">
<img id = "img1" src = "img/face_1.png" style = "height:1024px; width:768px;z-index:1">
<img id = "img2" src = "img/face_2.1.png" style = "height:1024px; width:768px;z-index:2">
<img id = "img3" src = "img/face_3.jpg" style = "height:1024px; width:768px;z-index:3">
<div id="slider" style = "height:10px; width:200px" ></div>
</div>
</body>
</html>
这是一个更简单的解决方案
杰奎里
jQuery(document).ready(function(){
$(function(){
$('.fadein div:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut(1000)
.next('div').fadeIn(1000)
.end().appendTo('.fadein');},
2000);
});
});
.HTML
<div class="fadein">
<div id="rotatingImage1"></div>
<div id="rotatingImage2"></div>
<div id="rotatingImage3"></div>
</div>
.CSS
#rotatingImage1{background:url('http://lorempixel.com/500/501/') no-repeat;position:absolute;width:500px;height:500px;}
#rotatingImage2{background:url('http://lorempixel.com/500/502/') no-repeat;position:absolute;width:500px;height:500px;}
#rotatingImage3{background:url('http://lorempixel.com/500/503/') no-repeat;position:absolute;width:500px;height:500px;}
相关文章:
- 如何根据需要在传单上叠加光栅图像
- 如何将叠加图像添加到SIMILE Exhibit地图视图中
- 将图像叠加在图像上
- 如何在图像上叠加忙图标
- 将三个图像相互叠加
- 图像悬停时的文本叠加 - 响应式
- 如何使用BEML或JS在全屏Brightcove智能播放器中添加图像叠加
- 使用 JavaScript 将图像叠加到另一个图像上
- 在 U 管视频上叠加图像在 I-pod/I-phone 设备上不可点击
- 图像的响应式空白图像叠加
- 传单不会将本地图像显示为叠加
- 图像叠加闪烁
- Javascript图像叠加在IE中不起作用
- 触发带有图像叠加的Flash按钮
- 图像叠加,你可以点击通过
- 如何在亚马逊 lambda 函数中使用 node.js 进行图像叠加和水印
- JWplayer 6 和图像叠加视频的奇怪问题
- 谷歌地图图像叠加和多色标记 - 如何组合代码
- 图像叠加 jQuery - 获取图像以保持点击
- 将一个透明图像叠加到另一个透明图像上