版权声明:本文为LZUGIS原创文章,未经同意不得转载。 https://blog.csdn.net/GISShiXiSheng/article/details/24304321

用过google earth的朋友,一定记得google earth的一个功能,那就是查看历史影像功能:有一个时间轴滑块,拖动滑块。显示各个时间的影像,例如以下:

没错。就是这个公能,近期做一个WEB的项目,也要用到相似的功能。所以呢就研究了一下,刚開始的时候,记得Jquery UI里面有一个slider的东西,能够实现相似滑块的东西,研究了一下,发现Jquery UI里的slider没法满足我的需求,所以就继续上网search。找了半天。最终找到了selectToUISlider这个Jquery的插件。

selectToUISlider在网上的资料不多。官方演示DEMO例如以下图所看到的:

但是,这种功能没法满足我的需求,研究了半天,最终实现了。

以下就介绍一下我的实现过程啊吧:

1、引入相关js或者样式文件

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="js/selectToUISlider.jQuery.js"></script>
<link rel="stylesheet" href="css/redmond/jquery-ui-1.7.1.custom.css" type="text/css" />
<link rel="Stylesheet" href="css/ui.slider.extras.css" type="text/css" />

2、在body中定义select内容

<body>
<center>
<form action="#">
<!-- demo 3 -->
<label for="valueImg">请选择影像:</label>
<fieldset>
<select name="valueImg" id="valueImg" style="display:block;">
<optgroup label="1984年">
<option value="10/03" selected="selected">19841003</option>
</optgroup>
<optgroup label="1988年">
<option value="04/21">19880421</option>
</optgroup>
<optgroup label="1989年">
<option value="10/17">19891017</option>
</optgroup>
<optgroup label="1991年">
<option value="05/16">19910516</option>
</optgroup>
<optgroup label="1992年">
<option value="05/18">19920518</option>
<option value="10/25">19921025</option>
</optgroup>
<optgroup label="1998年">
<option value="11/11">19981111</option>
</optgroup>
<optgroup label="1999年">
<option value="05/06">19990506</option>
<option value="10/29">19991029</option>
</optgroup>
<optgroup label="2000年">
<option value="04/30">20000430</option>
</optgroup>
<optgroup label="2001年">
<option value="05/19">20010519</option>
</optgroup>
<optgroup label="2006年">
<option value="06/17">20060617</option>
<option value="08/27">20060827</option>
<option value="09/28">20060928</option>
</optgroup>
<optgroup label="2007年">
<option value="06/09">20070609</option>
<option value="07/01">20070701</option>
<option value="08/09">20070809</option>
<option value="09/22">20070922</option>
</optgroup>
<optgroup label="2008年">
<option value="06/02">20080602</option>
<option value="07/02">20080702</option>
<option value="08/03">20080803</option>
<option value="09/01">20080901</option>
</optgroup>
<optgroup label="2009年">
<option value="08/12">20090812</option>
</optgroup>
<optgroup label="2010年">
<option value="07/06">20100706</option>
<option value="09/11">20100911</option>
</optgroup>
<optgroup label="2011年">
<option value="07/09">20110709</option>
<option value="08/10">20110810</option>
<option value="09/23">20110923</option>
</optgroup>
<optgroup label="2012年">
<option value="06/04">20120604</option>
<option value="08/10">20120810</option>
<option value="08/25">20120825</option>
<option value="09/04">20120904</option>
<option value="09/26">20120926</option>
</optgroup>
<optgroup label="2013年">
<option value="06/03">20130603</option>
<option value="07/25">20130725</option>
<option value="08/09">20130809</option>
<option value="08/25">20130825</option>
<option value="09/25">20130925</option>
</optgroup>
</select>
</fieldset>
<div>
<img src="data:images/mysk/19841003.jpg" width="350" height="350" id="img">
</div>
</form>
</center>
</body>

3、设置显示的样式

<style type="text/css">
body {font-size: 10px; font-family:"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;}
fieldset { border:0; margin: 5px; height: 12em;}
.ui-slider {clear: both; top: 1em;}
</style>

4、初始化并加入slider change事件

<script type="text/javascript">
$(function(){
$('select#valueImg').selectToUISlider({
labels: 19,//设置标签的显示个数
sliderOptions: {
change:function(e, ui) { //定义change事件
$("#img").attr("src","images/mysk/"+jQuery("#valueImg option:selected").text()+".jpg");//修改img的src源
}
}
});
});
</script>

这样。就实现了例如以下图所看到的的效果:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

但是,当你鼠标拖动的时候以下的图片不会发生变化,这个离我须要的还差一点,我的鼠标拖动滑块时以下的影像也发生变化,找了半天没有找到相相应的事件,所以,就仅仅能在原始js里做文章了,在里面找了找。selectToUISlider.jQuery.js里面的sliderOptions做了一点修改,修改内容例如以下:

	var sliderOptions = {
step: 1,
min: 0,
orientation: 'horizontal',
max: selectOptions.length-1,
range: selects.length > 1,//multiple select elements = true
slide: function(e, ui) {//slide function
var thisHandle = jQuery(ui.handle);
//handle feedback
var textval = ttText(ui.value);
thisHandle
.attr('aria-valuetext', textval)
.attr('aria-valuenow', ui.value)
.find('.ui-slider-tooltip .ttContent')
.text( textval ); //控制原始的select切换
var currSelect = jQuery('#' + thisHandle.attr('id').split('handle_')[1]);
currSelect.find('option').eq(ui.value).attr('selected', 'selected');
//控制Slider的*******************************************************************
var thisIndex = ui.value;//当前节点
var handleIndex = thisHandle.data('handleNum');//操作节点
thisHandle.parents('.ui-slider:eq(0)').slider("values", handleIndex, thisIndex);
},
values: (function(){
var values = [];
selects.each(function(){
values.push( jQuery(this).get(0).selectedIndex );
});
return values;
})()
};

这样,我要的效果就实现了。

在此。给大家共享出来。实用到此功能的读友请多多支持lzugis。

最新文章

  1. 【POJ-1390】Blocks 区间DP
  2. 【Beta】Scrum5.5
  3. http_load
  4. Virtual Box 杂记
  5. C# XML与对象互相转换
  6. Unity之Avatar原理
  7. STL入门
  8. 阿里云ECS每天一件事D6:安装nginx-1.6.2
  9. nodejs的npm安装模块时候报错:npm ERR! Error: CERT_NOT_YET_VALID的解决方法 - 包子博客 _ 关注互联网前端、开发、SEO、移动互联网应用技术
  10. jQuery第三章
  11. java Swing 图片缓冲机制
  12. php抽奖概率算法(刮刮卡,大转盘)
  13. ORB_SLAM2之Pangolin的安装与问题处理
  14. instanceof问题
  15. Linux的运行级别详细说明
  16. Linux指令--grep
  17. javascript中的字符串对象和数组对象
  18. Java 开源 CMS :magnolia
  19. Win10系统BitLocker解锁后再次快速锁定办法
  20. GUI常用对话框3

热门文章

  1. http协议与soap协议区别
  2. uva109求凸包面积,判断点是不是在凸包内
  3. http请求的GET和POST请求:查询和新增(ajax)
  4. JS中call和apply区别有哪些 记录
  5. C++进阶1模板的使用
  6. poj3068
  7. LeetCode OJ:Rotate List(旋转链表)
  8. Android Studio3.0 新特性 ~ New Features in Android Studio Preview (译文)
  9. 如何从github下载项目的源代码,包含git客户端,直接下载,vs下载
  10. Python源码分析(一)