JS模拟实现Select效果代码
网络编程 2021-07-04 21:03www.168986.cn编程入门
这篇文章主要介绍了JS模拟实现Select效果代码,涉及JavaScript基于鼠标点击事件动态操作页面元素实现Select效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS模拟实现Select效果代码。分享给大家供大家参考。具体如下:
这里模拟实现一个Select效果,其实这不是模拟,是自制Select,在JavaScript的配合下,运用CSS的UL/LI形成一个可下拉的列表,类似于下拉Select的效果,你可任意修改他们的颜色和内容之类的,用起来更方便了。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://.w3./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-:8px; cursor:pointer; } .list{width:200px;border:1px solid #dcdcdc;border-: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">狼蚁SEO</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.sPropagation(); $('body').click(function(){ $('.list').hide(); }) }) $('.list li').click(function(){ $('#text_left').text(($(this).text())); }) }) </script> </body> </html>
希望本文所述对大家的JavaScript程序设计有所帮助。
上一篇:10个很棒的jQuery代码片段
下一篇:JS基于面向对象实现的拖拽库实例
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程