JS simulation to implement Select effect code_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

JS simulation to implement Select effect code_javascript skills

May 16, 2016 pm 03:37 PM

js select simulation

The example in this article describes the JS simulation to implement the Select effect code. Share it with everyone for your reference. The details are as follows:

A Select effect is simulated here. In fact, this is not a simulation, but a self-made Select. With the cooperation of JavaScript, CSS UL/LI is used to form a drop-down list, similar to the effect of a drop-down Select. You can modify them at will. The colors and contents are more convenient to use.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-mn-select-style-demo-codes/

The specific code is as follows:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;模拟Select效果&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;style&gt;
 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;}
 &lt;/style&gt;
 &lt;div class="select"&gt;
 &lt;span id="text_left"&gt;脚本之家&lt;/span&gt;
 &lt;span id="arrow_right"&gt;&lt;/span&gt; 
 &lt;/div&gt;
 &lt;ul class="list"&gt;
 &lt;li&gt;新浪新闻&lt;/li&gt;
 &lt;li&gt;腾讯门户&lt;/li&gt;
 &lt;li&gt;凤凰影视&lt;/li&gt;
 &lt;li&gt;奇艺高清&lt;/li&gt; 
 &lt;/ul&gt;
 &lt;script type="text/javascript" src="jquery-1.9.1.min.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript"&gt;
 $(function(){
  $('#arrow_right').click(function(e){
  $('.list').toggle();
  e.stopPropagation();
   $('body').click(function(){
   $('.list').hide();
   })
  })
  $('.list li').click(function(){
  $('#text_left').text(($(this).text())); 
  }) 
  })
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn