时间:2021-05-26
本文实例讲述了JS模拟实现Select效果代码。分享给大家供大家参考。具体如下:
这里模拟实现一个Select效果,其实这不是模拟,是自制Select,在JavaScript的配合下,运用CSS的UL/LI形成一个可下拉的列表,类似于下拉Select的效果,你可任意修改他们的颜色和内容之类的,用起来更方便了。
运行效果截图如下:
在线演示地址如下:
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>希望本文所述对大家的JavaScript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果。分享给大家供大家参考。具体如下:这是一个JS+CSS技术实现的Select控件效果,模拟出来的
本文实例讲述了JS简单实现多级Select联动菜单效果代码。分享给大家供大家参考。具体如下:JS联动菜单,简单代码实现JS多级Select联动菜单,也就是大家常
jquery模拟SELECT框,效果图如下:复制代码代码如下:jquery模拟SELECT框body{padding:0;margin:0;font-size:
本文实例讲述了JS实现FLASH幻灯片图片切换效果的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:JS模拟FLASH幻灯片图片切换效果/*ul
本文实例讲述了js实现select下拉框菜单的详细代码。分享给大家供大家参考。具体如下:运行效果截图如下:具体代码如下:#gridComboBox{backgr