jQuery UI页面部件

喜欢ヅ旅行 2022-06-15 06:17 157阅读 0赞

## 实现效果描述： ##

设定初始时所有图片层叠在一起，即第一张图片覆盖在第二张图片上面，第二张图片覆盖在第三张图片上面.....

使id属性为slider的<div>元素成为滑动条部件，同时指定滑块手柄的最小值为1，最大值为图片的个数。然后通过该滑块条部件来控制图片的显示。例如，当滑块手柄的值由1变为2时，那么第2张图片在0.5秒内向下运动直到恰好完全露出，接着又在0.5秒内向上运动直到恰好完全覆盖第一张图片。

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>jQuery UI</title>
    	<style type="text/css">
    		p{
    			position: relative;
    			float: left;
    			width: 200px;
    			height: 200px;
    			margin:20x 120px;
    		}
    		p img{
    			position: absolute;
    			border:3px solid black;
    			width: 194px;
    			height: 194px;
    		}
    		.ui-slider{
    			position: relative;
    			margin:20px;
    			height: 20px;
    			width: 400px;
    			border:1px solid black;
    			background-color: white;
    			z-index: 2;
    			font-weight: bold;
    			text-decoration: none;
    			text-align: center;
    		}
    		.ui-slider-handle{
    			position: absolute;
    			top:-6px;
    			width: 30px;
    			height: 30px;
    			border:1px solid black;
    			background-color: gold;
    			margin-left: -15px;
    		}
    		.ui-corner-all{
    			-moz-border-radius:4px;
    		}
    	</style>
    	<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
    	<script type="text/javascript" src="jquery.ui.core.min.js"></script>
    	<script type="text/javascript" src="jquery.ui.widget.min.js"></script>
    	<script type="text/javascript" src="jquery.ui.mouse.min.js"></script>
    	<script type="text/javascript" src="jquery.ui.slider.min.js"></script>
    	<script type="text/javascript">
    		$(function(){
    			var total = $('p img').size();
    			var imgTopIndex = 10+total;
    			var hei = $('p img').height();
    			$('p img').each(function(index){
    				if (index == 0) {
    					$(this).css('z-index',imgTopIndex);
    				}else{
    					$(this).css('z-index',total-index);
    				}
    			});
    			var fun = function(event,ui){
    				if (imgTopIndex != 10+total-(ui.value-1)) {
    					$('img:eq('+(ui.value-1)+')').animate({'top':hei},500,function(){
    						$(this).css('z-index',1000).animate({'top':0},500,function(){
    							$('img:eq('+(total+10-imgTopIndex)+')').css('z-index',imgTopIndex-10);
    							imgTopIndex = 10+total-(ui.value-1);
    							$(this).css('z-index',imgTopIndex);
    						});
    					});
    				}
    			};
    			$('#slider').slider({
    				min:1,
    				max:total,
    				slide:function(event,ui){
    					$(ui.handle).text(ui.value);
    				},
    				change:fun
    			});
    			$('.ui-slider-handle').text('1');
    		});
    	</script>
    </head>
    <body>
    <div id="slider"></div>
    <p>
    	<img src="1.jpg">
    	<img src="2.jpg">
    	<img src="3.jpg">
    	<img src="4.jpg">
    </p>
    </body>
    </html>

效果如下：

![Center][]

![Center 1][]

![Center 2][]

[Center]: /images/20220615/73e20ee02f5b40409fd56eff9652085d.png
[Center 1]: /images/20220615/c40c72e502dc4595aba1b6ed80be68e2.png
[Center 2]: /images/20220615/4cab4bd2d2f14e8d9bc219578f738f08.png