这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
最近迷茫于 javascript 的闭包与继承,写一个小东西找找感觉。
记录一个自己作的小作品,一个 js 模拟的 select。
JS+CSS 模拟 Select 下拉框,选择表单效果网页中使用 Select 语法实现的下拉框是很普遍的,但是您有没有见过使用 JS+CSS 模拟的 Select 下拉框?并且可以选择表单哦,尽管代码复杂了点,但是对于我们了解此类特效非常有帮助。
[Ctrl+A 全选 注:
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>DIV+CSS+JS仿下拉表单</title>
- <script type="text/javascript" >
- function $$$$$(_sId){
- return document.getElementById(_sId);
- }
- function hide(_sId)
- {$$$$$(_sId).style.display = $$$$$(_sId).style.display == "none" ? "" : "none";}
- function pick(v) {
- document.getElementById('am').value=v;
- hide('HMF-1')
- }
- function bgcolor(id){
- document.getElementById(id).style.background="#F7FFFA";
- document.getElementById(id).style.color="#000";
- }
- function nocolor(id){
- document.getElementById(id).style.background="";
- document.getElementById(id).style.color="#788F72";
- }
- </script>
- <style type="text/css">
- * {
- margin:0px;
- padding:0px;
- }
- body {
- font-family: Arial, Helvetica, sans-serif;
- font-size: 12px;
- }
- .cur {
- cursor:pointer;
- display:block;
- color:#788F72;
- width:71px;
- height:22px;
- line-height:22px;
- padding:0px 0px 0px 2px;
- }
- .am {
- border: 0px;
- color:#788F72;
- cursor: pointer;
- background: url(/uploads/allimg/1111/icon_111.jpg) no-repeat center center;
- border:1px #ccc solid;
- display:block;
- cursor:pointer;
- width:73px;
- height: 19px;
- margin:10px 0px 0px 10px;
- padding:3px 0px 0px 2px;
- }
- .bm {
- border: 1px #999999 solid;
- width:73px;
- margin-left:10px;
- }
- </style>
- </head>
- <body>
- <form>
- <input onclick="hide('HMF-1')" type="text" value="请选择" id="am" class="am" />
- <div> 测试一 测试二 测试三 测试四 测试五 测试六 </div>
- </form>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]这个作品在没有任何需求下完成,不保证能应用于实际应用,仅用于自娱自乐。
[Ctrl+A 全选 注:
- <style type="text/css">
- <!-- *{padding:0; margin:0;} ul{list-style:none; margin:10px 30px; position:relative;
- font-family:"宋体";} ul li{position:relative; width:202px;height:22px; }
- .text{width:200px; height:20px; position:absolute; left:0; top:0;border:1px
- solid #ccc; line-height:20px; font-size:14px; cursor:default;} .btn{position:absolute;width:17px;
- height:20px; right:1px; top:1px; display:inline-block; background:url(http://files.jb51.net/demoimg/201008/btn_thumb_1.jpg)
- no-repeat;} .btnhover{background:url(http://files.jb51.net/demoimg/201008/btn2_thumb.jpg);}
- .select{border:1px solid #666;width:199px; height:auto; position:absolute;
- top:21px; display:none;background:#fff;} .select p{line-height:16px; font-size:13px;
- cursor:default; position:relative;} .select .hover{background:#3399FD;}
- -->
- </style>
- <h2>
- 浏览器默认样式
- </h2>
- <p>
- <select style="width: 200px; margin: 10px 30px; height: 22px; border: 1px solid #ccc; font-size: 14px; z-index: 0;">
- <option>
- select1
- </option>
- <option>
- select2
- </option>
- <option>
- select3
- </option>
- <option>
- select4
- </option>
- </select>
- </p>
- <h2>
- js模拟select,样式主要参照IE8与Firefox。
- </h2>
- <ul>
- <li>
- <input type="text" class="text" onclick="beginSelect(this);" />
- </li>
- <li class="select">
- <p>
- select1
- </p>
- <p>
- select2
- </p>
- <p>
- select3
- </p>
- <p>
- select4
- </p>
- </li>
- </ul>
- <p>
- 在不改变HTML结构的前提下,可更改其它样式。建议用IE8与FF浏览,可与默认样式进行对比。
- </p>
- <script type="text/javascript">
- // <![CDATA[
- function beginSelect(elem) {
- if (elem.className == "btn") {
- elem.className = "btn btnhover"elem.onmouseup = function() {
- this.className = "btn"
- }
- }
- var ul = elem.parentNode.parentNode;
- var li = ul.getElementsByTagName("li");
- var selectArea = li[li.length - 1];
- if (selectArea.style.display == "block") {
- selectArea.style.display = "none";
- } else {
- selectArea.style.display = "block";
- mouseoverBg(selectArea);
- }
- }
- function mouseoverBg(elem1) {
- var input = elem1.parentNode.getElementsByTagName("input")[0];
- var p = elem1.getElementsByTagName("p");
- var pLength = p.length;
- for (var i = 0; i < pLength; i++) {
- p[i].onmouseover = showBg;
- p[i].onmouseout = showBg;
- p[i].onclick = postText;
- }
- function showBg() {
- this.className == "hover" ? this.className = " ": this.className = "hover";
- }
- function postText() {
- var selected = this.innerHTML;
- input.setAttribute("value", selected);
- elem1.style.display = "none";
- }
- }
- // ]]>
- </script>
如需引入外部 Js 需刷新才能执行
] 用 js 模拟实现表单 select 选择的功能[Ctrl+A 全选 注:
- <!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=gb2312" />
- <title>
- 用js模拟实现表单select选择的功能
- </title>
- <style type="text/css">
- .t_search {width:900px; margin:auto;} .t_s_item {width:100px; float:left;}
- /* s_select start */ .select_box {cursor:default; text-align:left;} .select_value
- {border:1px solid; filter:alpha(opacity:0); visibility:hidden; overflow-x:hidden;
- overflow:auto; position:absolute;} .select_record0 {padding-left:4px; background:#fff;
- width:100%; color:#000; height:20px; line-height:20px;} .select_record1
- {padding-left:4px; background:#ccc; width:100%; color:#000; height:20px;
- line-height:20px;} /* s_select end */
- </style>
- <script type="text/javascript">
- /* s_search start */
- var sortname;
- var age;
- var addr;
- var keywords;
- var dropShow = false;
- var currentID;
- function dropdown(el) {
- if (dropShow) {
- dropFadeOut();
- } else {
- currentID = document.getElementById(el);
- currentID.style.visibility = "visible";
- dropFadeIn();
- }
- }
- function dropFadeIn() { //选单淡入的效果
- if (currentID.filters.alpha.opacity < 100) {
- currentID.filters.alpha.opacity += 20;
- fadeTimer = setTimeout("dropFadeIn()", 50);
- } else {
- dropShow = true;
- clearTimeout(fadeTimer);
- }
- }
- function dropFadeOut() { //选单淡出的效果
- if (currentID.filters.alpha.opacity > 0) {
- clearTimeout(fadeTimer);
- currentID.filters.alpha.opacity -= 20;
- fadeTimer = setTimeout("dropFadeOut()", 50);
- } else {
- dropShow = false;
- currentID.style.visibility = "hidden";
- }
- }
- function dropdownHide() {
- if (dropShow) {
- dropFadeOut();
- dropShow = false;
- }
- }
- function hiLight(el) { //高亮度显示指标位置
- if (dropShow) {
- for (i = 0; i < el.parentElement.childNodes.length; i++) {
- el.parentElement.childNodes(i).className = "select_record0";
- }
- el.className = "select_record1";
- }
- }
- function CheckMe(el) { //替换显示内容 //预留
- var tempTxt;
- tempTxt = el.innerText;
- if (el.innerText.indexOf("┝") >= 0) {
- tempTxt = el.innerText.replace("┝", "");
- }
- document.getElementById("text").innerText = tempTxt.substring(0, tempTxt.indexOf("|"));
- tempstr = tempTxt.substring(tempTxt.indexOf("|") + 1);
- }
- function CheckMe1(el) { //替换显示内容
- document.getElementById("text1").innerText = el.innerText;
- sortname = el.innerText;
- }
- function CheckMe2(el) { //替换显示内容
- document.getElementById("text2").innerText = el.innerText;
- age = el.innerText;
- }
- function CheckMe3(el) { //替换显示内容
- document.getElementById("text3").innerText = el.innerText;
- addr = el.innerText;
- }
- document.onclick = dropdownHide;
- function go_search() {
- keywords = document.getElementById("form_search").keywords.value;
- if (!sortname) {
- sortname = "";
- }
- if (!age) {
- age = "";
- }
- if (!addr) {
- addr = "";
- }
- if (keywords == "请输入你要找的信息!") {
- keywords = "";
- }
- location.href = "userlist.php?sortname=" + sortname + "&age=" + age + "&addr=" + addr + "&keywords=" + keywords;
- }
- /* s_search end */
- </script>
- </head>
- <body>
- <div>
- <form id="form_search" name="form_search" action="userlist.php" method="get">
- <div>
- <div onselectstart="return false">
- <div onclick="dropdown('value1')">
- <nobr>
- <label id="text1">
- 选择类别
- </label>
- </nobr>
- </div>
- <div>
- <div onmouseover="hiLight(this)" onclick="CheckMe1(this)">
- 类别1
- </div>
- <div onmouseover="hiLight(this)" onclick="CheckMe1(this)">
- 类别2
- </div>
- <div onmouseover="hiLight(this)" onclick="CheckMe1(this)">
- 类别3
- </div>
- </div>
- </div>
- </div>
- <div>
- <div onselectstart="return false">
- <div onclick="dropdown('value2')">
- <nobr>
- <label id="text2">
- 年龄
- </label>
- </nobr>
- </div>
- <div>
- <div onmouseover="hiLight(this)" onclick="CheckMe2(this)">
- 18-25岁
- </div>
- <div onmouseover="hiLight(this)" onclick="CheckMe2(this)">
- 26-32岁
- </div>
- </div>
- </div>
- </div>
- <div>
- <div onselectstart="return false">
- <div onclick="dropdown('value3')">
- <nobr>
- <label id="text3">
- 所在地
- </label>
- </nobr>
- </div>
- <div>
- <div onmouseover="hiLight(this)" onclick="CheckMe3(this)">
- 上海
- </div>
- <div onmouseover="hiLight(this)" onclick="CheckMe3(this)">
- 浙江
- </div>
- <div onmouseover="hiLight(this)" onclick="CheckMe3(this)">
- 福建
- </div>
- <div onmouseover="hiLight(this)" onclick="CheckMe3(this)">
- 广东
- </div>
- </div>
- </div>
- </div>
- <div>
- <input style="width:264px; height:18px; border-style:none; background:none; padding-top:4px; padding-left:4px;"
- name="keywords" id="keywords" value="请输入你要找的信息!" type="text" onfocus="javascript:this.value='';"
- />
- </div>
- <div>
- <img class="img-responsive" src="http://www.h3399.cn/uploads/2010/11/t_s_btn.jpg"
- width="100" height="24" border="0" onclick="go_search()" data-src="" />
- </div>
- </form>
- </div>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]在不改变 HTML 结构的前提下,可更改其它样式。建议用 IE8 与 FF 浏览,可与默认样式进行对比。 发布一来是为了记录自己学习过程,二来想请朋友指点一下迷津,哪些地方欠妥或者有更好的思路可以给我指点一下,谢谢。
来源: http://www.phperz.com/article/17/0611/284354.html