欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery 如何實現(xiàn)一個滑動按鈕開關(guān)

 更新時間:2016年12月01日 14:27:29   作者:十年樹木_2015  
本文給大家分享一段jquery代碼實現(xiàn)滑動按鈕開關(guān)的效果,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的的朋友參考下

滑動開關(guān)按鈕大家在各大網(wǎng)站都能見到,下面小編給大家分享一篇基于jquery實現(xiàn)的一個滑動按鈕開關(guān)效果,感興趣的朋友可以參考下實現(xiàn)代碼。

先給大家展示下效果圖:

代碼:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>jquery做的滑動按鈕開關(guān)</title> 
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css"/> 
</head> 
<style> 
.switch{ 
width: 100px; 
margin: 100px 0px 0 100px; 
} 
.btn_fath{ 
margin-top: 10px; 
position: relative; 
border-radius: 20px; 
} 
.btn1{ 
float: left; 
} 
.btn2{ 
float: right; 
} 
.btnSwitch{ 
height: 40px; 
width: 50px; 
border:none; 
color: #fff; 
line-height: 40px; 
font-size: 16px; 
text-align: center; 
z-index: 1; 
} 
.move{ 
z-index: 100; 
width: 40px; 
border-radius: 20px; 
height: 40px; 
position: absolute; 
cursor: pointer; 
border: 1px solid #828282; 
background-color: #f1eff0; 
box-shadow: 1px 2px 2px 1px #fff inset,0 0 5px 1px #999; 
} 
.on .move{ 
left: 60px; 
} 
.on.btn_fath{ 
background-color: #5281cd; 
} 
.off.btn_fath{ 
background-color: #828282; 
} 
</style> 
<body> 
<div class="switch"> 
<div class="btn_fath clearfix on" onclick="toogle(this)"> 
<div class="move" data-state="on"></div> 
<div class="btnSwitch btn1">ON</div> 
<div class="btnSwitch btn2 ">OFF</div> 
</div> 
<div class="btn_fath clearfix off" onclick="toogle(this)"> 
<div class="move" data-state="off"></div> 
<div class="btnSwitch btn1">ON</div> 
<div class="btnSwitch btn2 ">OFF</div> 
</div> 
</div> 
<script type="text/javascript" src="jquery/jquery.min.js"></script> 
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script> 
<script type="text/javascript"> 
function toogle(th){ 
var ele = $(th).children(".move"); 
if(ele.attr("data-state") == "on"){ 
ele.animate({left: "0"}, 300, function(){ 
ele.attr("data-state", "off"); 
alert("關(guān)!"); 
}); 
$(th).removeClass("on").addClass("off"); 
}else if(ele.attr("data-state") == "off"){ 
ele.animate({left: '60px'}, 300, function(){ 
$(this).attr("data-state", "on"); 
alert("開!"); 
}); 
$(th).removeClass("off").addClass("on"); 
} 
} 
</script> 
</body> 
</html>

需要注意的是:

1、這邊滑動使用的速度是300ms,好像是勻速,沒有線性的快慢那種;試著找下能不能像CSS3中ease那種線性運動的。

2、animate方法中的回調(diào)函數(shù),即運動結(jié)束后調(diào)用的function。

以上所述是小編給大家介紹的jQuery =實現(xiàn)一個滑動按鈕開關(guān)的功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 深入學(xué)習(xí)jQuery中的data()

    深入學(xué)習(xí)jQuery中的data()

    大家應(yīng)該都會有這樣一種感覺,data函數(shù)在jQuery中看起來很不起眼, 就像沙灘上一顆平凡的沙子, 但仔細(xì)一瞅, 卻驚訝的發(fā)現(xiàn)data是jQuery中無比重要的一環(huán), 甚至jQuery中各種事件都基于此。下面就來詳細(xì)深入的學(xué)習(xí)下jQuery中的data(),感興趣的朋友們可以參考借鑒。
    2016-12-12
  • jQuery.clean使用方法及思路分析

    jQuery.clean使用方法及思路分析

    jQuery.clean源碼分析包括:jQuery.clean使用方法、思路分析及源碼注釋分析感興趣的朋友可以參考下
    2013-01-01
  • jQuery利用鍵盤上下鍵移動表格內(nèi)容

    jQuery利用鍵盤上下鍵移動表格內(nèi)容

    這篇文章主要為大家詳細(xì)介紹了jQuery利用鍵盤上下鍵移動表格內(nèi)容,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • 基于jQuery實現(xiàn)搜索關(guān)鍵字自動匹配功能

    基于jQuery實現(xiàn)搜索關(guān)鍵字自動匹配功能

    這篇文章主要介紹了基于jQuery實現(xiàn)搜索關(guān)鍵字自動匹配功能,自動匹配搜索關(guān)鍵詞功能廣泛應(yīng)用到搜索引擎當(dāng)中,感興趣的小伙伴們可以參考一下
    2015-10-10
  • 基于jQuery實現(xiàn)選項卡效果

    基于jQuery實現(xiàn)選項卡效果

    這篇文章主要為大家詳細(xì)介紹了基于jQuery實現(xiàn)選項卡效果的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-01-01
  • jquery操作ID帶有變量的節(jié)點實例

    jquery操作ID帶有變量的節(jié)點實例

    下面小編就為大家?guī)硪黄猨query操作ID帶有變量的節(jié)點實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-12-12
  • jquery封裝的對話框簡單實現(xiàn)

    jquery封裝的對話框簡單實現(xiàn)

    本文為大家詳細(xì)介紹下使用jquery簡單實現(xiàn)封裝的對話框,具體實現(xiàn)代碼如下,感興趣的朋友可以參考下哈,希望對大家有所幫助
    2013-07-07
  • 通過jquery-ui中的sortable來實現(xiàn)拖拽排序的簡單實例

    通過jquery-ui中的sortable來實現(xiàn)拖拽排序的簡單實例

    下面小編就為大家?guī)硪黄ㄟ^jquery-ui中的sortable來實現(xiàn)拖拽排序的簡單實例。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • jQuery插件boxScroll實現(xiàn)圖片輪播特效

    jQuery插件boxScroll實現(xiàn)圖片輪播特效

    本文給大家分享的是使用jQuery插件Boxscroll來實現(xiàn)簡單的圖片輪播特效的代碼,非常簡單實用,有需要的小伙伴可以參考下。
    2015-07-07
  • jQuery解決iframe高度自適應(yīng)代碼

    jQuery解決iframe高度自適應(yīng)代碼

    網(wǎng)上查了好多用著都不行,自己搞定了:在包含iframe的頁面中加入以下腳本,基本思想是在iframe加載內(nèi)容后重新設(shè)置高度,下面代碼盡在IE6中用過,沒在其他瀏覽器中測試。
    2009-12-12

最新評論