快捷導(dǎo)航

jQuery模擬實現(xiàn)的select點(diǎn)擊選擇效果【附demo源碼下載】

更新時間：2016年11月09日 11:15:35 作者：aqy106

這篇文章主要介紹了jQuery模擬實現(xiàn)的select點(diǎn)擊選擇效果,涉及jQuery響應(yīng)鼠標(biāo)點(diǎn)擊動態(tài)修改頁面元素樣式的相關(guān)操作技巧,并附帶demo源碼供讀者下載,需要的朋友可以參考下

本文實例講述了jQuery模擬實現(xiàn)的select點(diǎn)擊選擇效果。分享給大家供大家參考，具體如下：

有時候有些HTML元素?zé)o法讓我們用樣式控制進(jìn)行控制，但是射雞師或是客戶的需求就是需要這種效果，還要讓每個瀏覽器都顯示同樣的效果，這時候就會讓我們這些所謂的前端攻城師很蛋疼，客戶會認(rèn)為交了點(diǎn)錢不讓你折騰些東西，以為你是沒做事的。面對這些對技術(shù)一竅不通的客戶，技術(shù)對于他們來說就是一坨屎，以為我們都是用意念來寫代碼做程序的，所以都把我們的勞動成果看作是廉價得像是簡單的拉出一泡屎而已。

雖然很喜歡什么都沒有修飾的默認(rèn)效果，但是又不得不面對這些客戶蛋疼的效果和要求，所以不得不折騰幾個來回總不滿足，HTML里面，不可以樣式控制的元素恐怕也為數(shù)不多，select是其中的一個，，所以今天也來折騰一下這個比較喜歡自由不愛樣式約束的元素，采用模擬的方式來實現(xiàn)select的效果。

采用模擬的好處可以任意的進(jìn)行樣式控制，做出各種各樣的效果，在各個瀏覽器中的表現(xiàn)都一致，實現(xiàn)客戶蛋疼的要求，但缺點(diǎn)也是同樣的存在的，網(wǎng)絡(luò)非常慢或客戶端禁止運(yùn)行腳本的時候//（盡管腳本禁止運(yùn)行的機(jī)率很低，一般只會有服務(wù)器版本的瀏覽器上才會出現(xiàn)），腳本加載不到有可能會影響到其失效，無法進(jìn)行操作，

其實這個效果早已廣泛應(yīng)用，也不算什么新鮮的了，大家可以隨便看一下比較新一點(diǎn)的網(wǎng)站都能找到，下面分別是淘寶和拍拍上也采用模擬的select的截圖。

淘寶模擬select：

拍拍模擬select：

本例實現(xiàn)效果：

實現(xiàn)的思路很簡單，只有兩步：

1、當(dāng)鼠標(biāo)進(jìn)行移入和點(diǎn)擊的目標(biāo)元素的時候，觸發(fā)彈出一個層，層內(nèi)裝著模擬的不同的元素的值

2、點(diǎn)擊選擇層內(nèi)的元素的時候，需要將點(diǎn)擊元素文本元素賦到目標(biāo)元素中，并將元素內(nèi)的一些參數(shù)值傳到一個隱藏的域中進(jìn)行傳值

于是就有了以下的HTML、CSS和操作JS：

html：

<span class="selectType">
  <a title="" href="#" class="ipt" id="selectTypeText">全部</a>
  <span id="selectTypeMenu">
    <a rel="0" title="" href="#">全部</a>
    <a rel="1" title="" href="#">商品</a>
    <a rel="2" title="" href="#">商鋪</a>
  </span>
  <input type="hidden" name="" class="ipt" value="" id="selectTypeRel">
  <em class="searchArrow hh abs">下拉選擇</em>
</span>

css：

.sysSelect{width:76px; height:28px; line-height:28px; border:1px solid #CCC; font-size:14px;}
.sysSelect option{height:28px; line-height:28px;}
.selectType{position:relative; width:78px; height:30px; line-height:30px; font-size:14px;}
.selectType .ipt{width:76px; height:28px; line-height:28px; border:1px solid #CCC; display:inline-block; text-decoration:none; color:#000; text-indent:5px; outline:none;}
.selectType span{position:absolute; width:76px; background-color:#fff; border:1px solid #CCC; border-top-style:dashed; left:0px; top:22px; text-indent:6px; line-height:26px; display:none;}
.selectType span a{color:#333; display:block; text-decoration:none;}
.selectType span a:hover{background-color:#f60; color:#fff;}
.selectType .searchArrow{border-top:6px solid #666; border-left:6px solid #FFF; border-right:6px solid #FFF; position:absolute; width:0; height:0; top:6px; right:12px; cursor:pointer; -webkit-transition:-webkit-transform 0.2s ease-in; -moz-transition:-moz-transform 0.2s ease-in; -o-transition:-o-transform 0.2s ease-in; transition:transform 0.2s ease-in; overflow:hidden; text-indent:-2000px;}
.selectType .searchArrowRote{-moz-transform:rotate(180deg); -moz-transform-origin:50% 30%; -webkit-transform:rotate(180deg); -webkit-transform-origin:50% 30%; -o-transform:rotate(180deg); -o-transform-origin:50% 30%; transform:rotate(180deg);transform-origin:50% 30%; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); top:-9px/9;}

js：

$("#selectTypeText").click(function () {
  $(this).next("span").slideDown(200);
  $(".searchArrow").addClass("searchArrowRote");
});
$("#selectTypeText").blur(function () {
   $(this).next("span").slideUp(200);
   $(".searchArrow").removeClass("searchArrowRote");
});
$("#selectTypeMenu>a").click(function () {
  $("#selectTypeText").text($(this).text());
  $("#selectTypeRel").attr("value", $(this).attr("rel"));
  $(this).parent().slideUp(200);
  $(".searchArrow").removeClass("searchArrowRote");
  return false;
});

你是否還期待著我的長篇大論？但很遺憾的告訴你，說明已經(jīng)完畢了，也就是這么簡單了，幾行代碼一看也就明白了。

還有不明白的？那沒問題，請看DEMO，點(diǎn)擊此處打開。

完整demo源碼點(diǎn)擊此處本站下載。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: