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 相关文章推荐
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
javascript表单验证 - Parsley.js使用和配置
Jan 25 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
javascript cookie的简单应用
Feb 24 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
js实现数字跳动到指定数字
Aug 25 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
python中for语句简单遍历数据的方法
2015/05/07 Python
Python3访问并下载网页内容的方法
2015/07/28 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
python可迭代对象去重实例
2020/05/15 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
2015年会计年终工作总结
2015/05/26 职场文书