cari

Rumah  >  Artikel  >  hujung hadapan web  >  jQuery melaksanakan kemahiran seret gelangsar mudah alih digital effect_javascript

jQuery melaksanakan kemahiran seret gelangsar mudah alih digital effect_javascript

WBOY
WBOYasal
2016-05-16 15:23:501544semak imbas

Artikel ini berkongsi dengan anda kesan yang cantik dan praktikal berdasarkan jquery ui Anda boleh memilih nombor dengan menyeret dan meluncur menggunakan tetikus untuk rujukan anda

Pemarahan operasi:

Kod pelaksanaan: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="gb2312">
<title>demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
 .slider-box{ background:#F0EFEB; font-family:Microsoft Yahei; padding-bottom:10px}
 .slider-box .item{ padding:10px}
 .slider-box .item .tag, .slider-box .item .slider, .slider-box .item .val{ float:left; margin-right:18px}
 .slider-box .item .slider{ width:400px}
 .slider-box .item .slider div{ background:#8FBF0B; border:none; height:0.5em; margin-top:0.5em}
 .slider-box .item .slider div .ui-slider-handle{ background:#F4F3F1; width:1em; height:1em; border-radius:1em}
 .slider-box .item .val input{ border:none; border-bottom:1px solid #ABADA8; background:none; padding:0.1em 1em; color:#E4531C; font-weight:bold; font-size:1em; width:5em; text-align:center}
 .clr{ clear:both}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 <div class="slider-box">
 <div class="item">
  <div class="tag">骑行里程：</div>
  <div class="slider">
  <div id="budget"></div>
  </div>
  <div class="val"><input value="8800" name="budget" /></div>
 </div>
 <div class="clr"></div>
 <div class="item">
  <div class="tag">骑行天数：</div>
  <div class="slider">
  <div id="days"></div>
  </div>
  <div class="val"><input value="9" name="days" /></div>
 </div>
 <div class="clr"></div>
 </div>
 <script>
 $("#budget").slider({
  min: 2000,
  max: 17000,
  step: 100,
  value: $('input[name="budget"]').val(),
  slide: function( event, ui ) {
  $('input[name="budget"]').val(ui.value)
  }
 });
 $("#days").slider({
  min: 1,
  max: 20,
  value: $('input[name="days"]').val(),
  slide: function( event, ui ) {
  $('input[name="days"]').val(ui.value)
  }
 });
 </script>
</body>
</html>
Di atas adalah kod untuk jQuery untuk merealisasikan kesan digital menyeret dan memilih peluncur mudah alih Saya harap ia akan membantu pembelajaran semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Melaksanakan karusel imej kiri dan kanan berdasarkan jQuery (prinsip am)_jqueryArtikel seterusnya：Melaksanakan karusel imej kiri dan kanan berdasarkan jQuery (prinsip am)_jquery

Artikel berkaitan

Lihat lagi