jQuery UI页面部件

来源：互联网发布：java工程师的岗位要求编辑：程序博客网时间：2024/05/16 13:41

实现效果描述：

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

使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>

效果如下：

阅读全文

0 0