JS模拟实现Select效果代码


Posted in Javascript onSeptember 24, 2015

本文实例讲述了JS模拟实现Select效果代码。分享给大家供大家参考。具体如下:

这里模拟实现一个Select效果,其实这不是模拟,是自制Select,在JavaScript的配合下,运用CSS的UL/LI形成一个可下拉的列表,类似于下拉Select的效果,你可任意修改他们的颜色和内容之类的,用起来更方便了。

运行效果截图如下:

JS模拟实现Select效果代码

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
详解JavaScript函数
Dec 01 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 #Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 #Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 #Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 #Javascript
js中不同的height, top的区别对比
Sep 24 #Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 #Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 #Javascript
You might like
很实用的一个完整email发送程序
2006/10/09 PHP
PHP控制网页过期时间的代码
2008/09/28 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
微信小程序云开发之使用云函数
2019/05/17 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
简介Django中内置的一些中间件
2015/07/24 Python
Python 的类、继承和多态详解
2017/07/16 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
Python如何用filter函数筛选数据
2020/03/05 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
工作中的自我评价如何写好
2013/10/28 职场文书
护理不良事件检讨书
2014/02/06 职场文书
大专生求职信
2014/06/29 职场文书
新店开张活动方案
2014/08/24 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
个园导游词
2015/02/04 职场文书