JS模擬實(shí)現(xiàn)Select效果代碼
更新時(shí)間：2015年09月24日 16:21:59 作者：企鵝
這篇文章主要介紹了JS模擬實(shí)現(xiàn)Select效果代碼,涉及JavaScript基于鼠標(biāo)點(diǎn)擊事件動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)Select效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了JS模擬實(shí)現(xiàn)Select效果代碼。分享給大家供大家參考。具體如下：
這里模擬實(shí)現(xiàn)一個(gè)Select效果，其實(shí)這不是模擬，是自制Select，在JavaScript的配合下，運(yùn)用CSS的UL/LI形成一個(gè)可下拉的列表，類似于下拉Select的效果，你可任意修改他們的顏色和內(nèi)容之類的，用起來(lái)更方便了。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-mn-select-style-demo-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模擬Select效果</title>
</head>
<body>
<style>
ul,li{list-style-type:none;padding:0;margin:0;}
.select{width:200px;height:22px;line-height:22px;border:1px solid #dcdcdc;}
#text_left{display:block;width:180px;float:left;padding:0 5px;}
#arrow_right{
display:block;
border-color:#FF6600 #FFFFFF #FFFFFF #FFFFFF;
border-style: solid;
border-width: 4px;
display: block;
font-size: 0;
height: 0;
line-height: 0;
width: 0;
float:left;margin-top:8px;
cursor:pointer;
}
.list{width:200px;border:1px solid #dcdcdc;border-top:0;display:none;}
.list li{line-height:24px;padding:0 5px;}
.list li:hover{background:#F8F3F4;cursor:pointer;}
</style>
<div class="select">
<span id="text_left">腳本之家</span>
<span id="arrow_right"></span>
</div>
<ul class="list">
<li>新浪新聞</li>
<li>騰訊門戶</li>
<li>鳳凰影視</li>
<li>奇藝高清</li>
</ul>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#arrow_right').click(function(e){
$('.list').toggle();
e.stopPropagation();
$('body').click(function(){
$('.list').hide();
})
})
$('.list li').click(function(){
$('#text_left').text(($(this).text()));
})
})
</script>
</body>
</html>
希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
關(guān)閉頁(yè)面window.location事件未執(zhí)行的原因及解決方法
這篇文章主要介紹了關(guān)閉頁(yè)面window.location事件未執(zhí)行的原因及解決方法,需要的朋友可以參考下2014-09-09
這篇文章主要介紹了微信WeixinJSBridge API使用實(shí)例,本文直接給出HTML代碼,代碼中包含了很多實(shí)用功能,如圖片預(yù)覽、分享到微博、隱藏右上角按鈕、獲取網(wǎng)絡(luò)狀態(tài)、發(fā)起公眾號(hào)微信支付等內(nèi)容,需要的朋友可以參考下2015-05-05
下面小編就為大家?guī)?lái)一篇深入理解JS addLoadEvent函數(shù)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
下面小編就為大家?guī)?lái)一篇js 自帶的sort() 方法全面了解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
淺談js基礎(chǔ)數(shù)據(jù)類型和引用類型,深淺拷貝問(wèn)題,以及內(nèi)存分配問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談js基礎(chǔ)數(shù)據(jù)類型和引用類型,深淺拷貝問(wèn)題,以及內(nèi)存分配問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
JavaScript制作簡(jiǎn)易計(jì)算器（不用eval）
這篇文章主要為大家詳細(xì)介紹了JavaScript制作簡(jiǎn)易計(jì)算器的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
showModalDialog在谷歌瀏覽器下會(huì)返回Null的解決方法
showModalDialog的返回值在IE、火狐下面都能夠獲取返回值，但是在谷歌瀏覽器下面會(huì)返回Null，下面有個(gè)不錯(cuò)的解決方法，感興趣的朋友可以參考下2013-11-11
用js獲取頁(yè)面值得仿佛，需要的朋友可以參考下。2011-11-11
一個(gè)簡(jiǎn)單的JS鼠標(biāo)懸停特效具體方法
這個(gè)特效最終實(shí)現(xiàn)效果就是當(dāng)鼠標(biāo)移動(dòng)到鏈接上，文字會(huì)橫向移動(dòng)一定距離，貌似總有人喜歡這些花花草草。添加此效果方法很簡(jiǎn)單。2013-06-06
JS中不為人知的五種聲明Number的方式簡(jiǎn)要概述
聲明一個(gè)數(shù)值類型的變量我看到三種;我嘴角微微一笑：少年你還嫩了點(diǎn)，哪止三種，我知道的至少有五種,好奇的你可以參考下哈，希望本文可以幫助到你2013-02-02