jQuery UI页面部件

最新推荐文章于 2024-07-09 14:39:36 发布

小萝莉_Lolita

最新推荐文章于 2024-07-09 14:39:36 发布

阅读量548

点赞数

分类专栏： jQuery 文章标签： ui jQueryUI

本文链接：https://blog.csdn.net/MDreamlove/article/details/72758365

版权

jQuery 专栏收录该内容

2 篇文章 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>

效果如下：

小萝莉_Lolita

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery UI页面部件

实现效果描述：设定初始时所有图片层叠在一起，即第一张图片覆盖在第二张图片上面，第二张图片覆盖在第三张图片上面.....使id属性为slider的元素成为滑动条部件，同时指定滑块手柄的最小值为1，最大值为图片的个数。然后通过该滑块条部件来控制图片的显示。例如，当滑块手柄的值由1变为2时，那么第2张图片在0.5秒内向下运动直到恰好完全露出，接着又在0.5秒内向上运动直到恰好完全覆盖第一张图
复制链接

扫一扫