仿51job.com城市选择框特效
- <!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>仿51job.com城市选择框特效</title>
- <style type="text/css">
- <!--
- body{padding-top:50px;font-size:12px;}
- h2{margin:0px;padding:0px;font-size:12px;font-weight:bold;}
- .bton{border:1px solid #CCC;background:#DDD;}
- .cont{padding:10px;}
- #main{width:400px;margin:0px auto;}
- #selectItem{background:#FFF;position:absolute;top:0px;left:center;border:1px solid #000;overflow:hidden;margin-top:10px;width:400px;z-index:2;}
- #preview{margin:1px;border:1px solid #CCC;}
- #result{border:1px solid #CCC;margin-top:10px;}
- .tit{line-height:20px;height:20px;margin:1px;padding-left:10px;}
- .bgc_ccc{background:#CCC;}
- .bgc_eee{background:#eee;}
- .c_999{color:#999}
- .pointer{cursor:pointer;}
- .left{float:left;}
- .right{float:right;}
- .cls{clear:both;font-size:0px;height:0px;overflow:hidden;}
- #bg{background:#CCC;filter:alpha(opacity=70);opacity:0.7;width:100%;;position:absolute;left:0px;top:0px;display:none;z-index:1;}
- .hidden{display:none;}
- .move{cursor:move;}
- -->
- </style>
- </head>
- <body>
- <div id="main">
- <input name="button" type="button" class="bton pointer" value="请选择" onclick="openBg(1);openSelect(1)"/>
- <div id="result">
- <div class="tit bgc_eee">
- <h2>您已选择的城市汇总</h2>
- </div>
- <div class="cont" id="makeSureItem">
- </div>
- </div>
- </div>
- <div id="bg">
- </div>
- <div id="selectItem" class="hidden">
- <div class="tit bgc_ccc move" onmousedown="drag(event,this)">
- <h2 class="left">请选择城市</h2>
- <span class="pointer right" onclick="openBg(0);openSelect(0);">[取消]</span>
- <span class="pointer right" onclick="makeSure();">[确定]</span>
- </div>
- <div class="cls"></div>
- <div class="cont">
- <div id="selectSub">
- <div id="c00">
- <input type="checkbox" name="ck00" onclick="addPreItem()" value="北京"/>北京
- <input type="checkbox" name="ck00" onclick="addPreItem()" value="福建"/>福建
- <input type="checkbox" name="ck00" onclick="addPreItem()" value="四川"/>四川
- <input type="checkbox" name="ck00" onclick="addPreItem()" value="江苏"/>江苏
- </div>
- <div id="c01">
- <input type="checkbox" name="ck01" onclick="addPreItem()" value="上海"/>上海
- <input type="checkbox" name="ck01" onclick="addPreItem()" value="云南"/>云南
- <input type="checkbox" name="ck01" onclick="addPreItem()" value="贵州"/>贵州
- </div>
- <div id="c02">
- <input type="checkbox" name="ck01" onclick="addPreItem()" value="黑龙江"/>黑龙江
- <input type="checkbox" name="ck01" onclick="addPreItem()" value="吉林"/>吉林
- <input type="checkbox" name="ck01" onclick="addPreItem()" value="辽宁"/>辽宁
- </div>
- <div id="c03">
- <input type="checkbox" name="ck01" onclick="addPreItem()" value="美国"/>美国
- <input type="checkbox" name="ck01" onclick="addPreItem()" value="阿富汗"/>阿富汗
- <input type="checkbox" name="ck01" onclick="addPreItem()" value="日本"/>日本
- </div>
- </div>
- </div>
- <div id="preview">
- <div class="tit bgc_eee c_999">
- <h2>您已选择的城市</h2>
- </div>
- <div class="cont" id="previewItem">
- </div>
- </div>
- </div>
- <script type="text/javascript">
- /* ------使用说明----- */
- /*
- 添加城市方法:
- 添加组:找到id 是 "selectSub"中select标签下,添加option标签 value属性递增,找到 id 是 "selectSub",按照原有格式添加div,其id属性递增
- 添加二级傅选矿选项
- 复制 id 是 "selectSub" 下任意input标签,粘贴在需要添加的位置。
- */
- var grow = $("selectSub").getElementsByTagName("option").length; //组数
- var showGrow = 0;//已打开组
- var selectCount = 0; //已选数量
- showSelect(showGrow);
- var items = $("selectSub").getElementsByTagName("input");
- //alert(maxItem);
- //var lenMax = 2;
- //alert(1);
- function $(o){ //获取对象
- if(typeof(o) == "string")
- return document.getElementById(o);
- return o;
- }
- function openBg(state){ //遮照打开关闭控制
- if(state == 1)
- {
- $("bg").style.display = "block";
- var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight;
- //alert(document.body.offsetHeight);
- //alert(document.documentElement.offsetHeight);
- $("bg").style.height = h + "px";
- }
- else
- {
- $("bg").style.display = "none";
- }
- }
- function openSelect(state){ //选择城市层关闭打开控制
- if(state == 1)
- {
- $("selectItem").style.display = "block";
- $("selectItem").style.left = ($("bg").offsetWidth - $("selectItem").offsetWidth)/2 + "px";
- $("selectItem").style.top = document.body.scrollTop + 100 + "px";
- }
- else
- {
- $("selectItem").style.display = "none";
- }
- }
- function showSelect(id){
- for(var i = 0 ; i < grow ;i++)
- {
- $("c0" + i).style.display = "none";
- }
- $("c0" + id).style.display = "block";
- showGrow = id;
- }
- function open(id,state){ //显示隐藏控制
- if(state == 1)
- $(id).style.display = "block";
- $(id).style.diaplay = "none";
- }
- function addPreItem(){
- $("previewItem").innerHTML = "";
- var len = 0 ;
- for(var i = 0 ; i < items.length ; i++)
- {
- if(items[i].checked == true)
- {
- //len++;
- //if(len > lenMax)
- //{
- // alert("不能超过" + lenMax +"个选项!")
- // return false;
- //}
- var mes = "<input type='checkbox' checked='true' value='"+ items[i].value +"' onclick='copyItem(\"previewItem\",\"previewItem\");same(this);'>" + items[i].value;
- $("previewItem").innerHTML += mes;
- //alert(items[i].value);
- }
- }
- }
- function makeSure(){
- //alert(1);
- //$("makeSureItem").innerHTML = $("previewItem").innerHTML;
- openBg(0);
- openSelect(0);
- copyItem("previewItem","makeSureItem")
- }
- function copyHTML(id1,id2){
- $(id2).innerHTML = $("id1").innerHTML;
- }
- function copyItem(id1,id2){
- var mes = "";
- var items2 = $(id1).getElementsByTagName("input");
- for(var i = 0 ; i < items2.length ; i++)
- {
- if(items2[i].checked == true)
- {
- mes += "<input type='checkbox' checked='true' value='"+ items2[i].value +"' onclick='copyItem(\"" + id2+ "\",\""+ id1 +"\");same(this);'>" + items2[i].value;
- }
- }
- $(id2).innerHTML = "";
- $(id2).innerHTML += mes;
- //alert($(id2).innerHTML);
- }
- function same(ck){
- for(var i = 0 ; i < items.length ; i++)
- {
- if(ck.value == items[i].value)
- {
- items[i].checked = ck.checked;
- }
- }
- }
- /* 鼠标拖动 */
- var oDrag = "";
- var ox,oy,nx,ny,dy,dx;
- function drag(e,o){
- var ee = e ? e : event;
- var mouseD = document.all ? 1 : 0;
- if(e.button == mouseD)
- {
- ooDrag = o.parentNode;
- //alert(oDrag.id);
- ox = e.clientX;
- oy = e.clientY;
- }
- }
- function dragPro(e){
- if(oDrag != "")
- {
- var ee = e ? e : event;
- //$(oDrag).style.left = $(oDrag).offsetLeft + "px";
- //$(oDrag).style.top = $(oDrag).offsetTop + "px";
- dx = parseInt($(oDrag).style.left);
- dy = parseInt($(oDrag).style.top);
- //dx = $(oDrag).offsetLeft;
- //dy = $(oDrag).offsetTop;
- nx = e.clientX;
- ny = e.clientY;
- $(oDrag).style.left = (dx + ( nx - ox )) + "px";
- $(oDrag).style.top = (dy + ( ny - oy )) + "px";
- ox = nx;
- oy = ny;
- }
- }
- document.onmouseup = function(){oDrag = "";}
- document.onmousemove = function(event){dragPro(event);}
- </script>
- </body>
- </html>
仿51job.com城市选择框特效的更多相关文章
- 基于jQuery仿去哪儿城市选择代码
基于jQuery仿去哪儿城市选择代码.这是一款使用的jQuery城市选择特效代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="lin ...
- jquery如何实现动态增加选择框
jquery如何实现动态增加选择框 一.总结 一句话总结:用jquery的clone(true)方法. 1.如何在页面中复制amazeui加了特效的标签? amazeui中的控件带js方法,不知道那部 ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- 基于jQuery美化联动下拉选择框
今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
- 纯原生js移动端城市选择插件
接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...
- 基于jquery的城市选择插件
城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. /* *基于jquery的城市选择插件 *aut ...
- android wheelview实现三级城市选择
很早之前看淘宝就有了ios那种的城市选择控件,当时也看到网友有分享,不过那个写的很烂,后来(大概是去年吧),我们公司有这么一个项目,当时用的还是网上比较流行的那个黑框的那个,感觉特别的丑,然后我在那个 ...
- 【React】开发一个城市选择控件
想到做这个,是因为无意中在github上看到了这一个仓库https://github.com/lunlunshiwo/ChooseCity,做的就是一个城市选择控件,是用vue写的,说的是阿里的一道题 ...
- java基础68 JavaScript城市联动框(网页知识)
1.城市联动框 <!doctype html> <html> <head> <meta charset="utf-8"> <t ...
随机推荐
- 去他的效应(what-the-hell effect)与自我放纵
去他的 效应(what-the-hell effect)与自我放纵 为什么写这篇文章: 对于我来说,但我感到疲惫——"无意拿起"手机,对自己说"随便看看"——但 ...
- DropDownList中显示无限级树形结构
效果图: 数据库表: DirID:目录的ID,ParentID:目录的父路径ID,Name:目录的名字主要代码: using System;using System.Collections;using ...
- sqlalchemy 的 ORM 方式使用示例
知乎: 使用 sqlalchemy 的 orm 方式操作数据库是一种怎样的体验? 答: 酸爽! 本文基于:win10 + python3.4 + sqlAlchemy 1.0.13 先看一个图(来源) ...
- [CareerCup] 11.4 Sort the File 文件排序
11.4 Imagine you have a 20 GB file with one string per line. Explain how you would sort the file. 这道 ...
- Django添加Last-Modified和ETag
用Django REST Framework做的REST API,其中有个API有这样的需求: APP端请求这个API,服务器端从数据库读数据,返回json.返回的数据量稍微有些大,但是可能一年才修改 ...
- Python Web实战 - 基于Flask实现的黄金点游戏
一.简介 团队成员: 领航者:张旭 驾驶员:张国庆 项目简介: 项目名称:基于B/S模式的黄金点游戏 采用技术: 后端:Python + Sqlite3 前端:HTML + CSS + JS + Bo ...
- 关于ARP攻击的原理以及在Kali Linux环境下的实现
关于ARP攻击的原理以及在Kali Linux环境下的实现 全文摘要 本文讲述内容分为两部分,前半部分讲述ARP协议及ARP攻击原理,后半部分讲述在Kali Linux环境下如何实现ARP攻击以及AR ...
- mui slider 改变默认index
mui('class').slider().gotoItem(1,0) 目前已知问题,在class类名对应的dom元素是隐藏的时候初始化设置将报错,因为: 如果display取值是none,也就是不 ...
- Windows下apache php wordpress配置
2. Use notepad to open httpd.conf config file. Make use the line "LoadModule rewrite_module mod ...
- mac版beyond compare 4 中对比class文件
http://www.scootersoftware.com/download.php?zz=moreformats 这个网址中没有mac版本的class文件对比的file format.只能自己造了 ...