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 相关文章推荐
javascript 计算两个整数的百分比值
Dec 26 Javascript
基于Jquery的淡入淡出的特效基础练习
Dec 13 Javascript
别了 JavaScript中的isXX系列
Aug 01 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
JS作用域链详解
Jun 26 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
Oct 20 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
jQuery实现消息弹出框效果
Dec 10 jQuery
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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
php 删除记录实现代码
2009/03/12 PHP
php学习笔记 数组遍历实现代码
2011/06/09 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
js实现div模拟模态对话框展现URL内容
2016/05/27 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
2017/12/25 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
python requests.post带head和body的实例
2019/01/02 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
科室工作的个人自我评价
2013/10/30 职场文书
施工人员岗位职责
2013/12/12 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
党在我心中演讲稿
2014/09/02 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
Vue的列表之渲染,排序,过滤详解
2022/02/24 Vue.js
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python