0顶

51jpb选择城市功能特效代码

稿源：互联网 2022-06-13 02:11:59 点击： 3214 撤稿纠错

多功能城市选择特效，可以自己修改代码，类似于联动效果

以下讨论的是和选择特效相关的51jpb选择城市功能特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br><title>无标题文档</title><br><style type="text/css"><br><br></style><br></head><br><body><br><div id="main"><br>  <input name="button" type="button" class="bton pointer" value="请选择" onclick="openBg(1);openSelect(1)"/><br>  <div id="result"><br>  <div class="tit bgc_eee"><br>   <h2>您已选择的城市汇总</h2><br>  </div> <br>  <div class="cont" id="makeSureItem"><br>  </div><br>  </div><br></div><br> <br><div id="bg"><br></div><br><div id="selectItem" class="hidden"><br>  <div class="tit bgc_ccc move" onmousedown="drag(event,this)"><br>   <h2 class="left">请选择城市</h2><br>   <span class="pointer right" onclick="openBg(0);openSelect(0);">[取消]</span><br>   <span class="pointer right" onclick="makeSure();">[确定]</span>   <br>  </div><br>  <div class="cls"></div><br>  <div class="cont"><br>   <div id="selectSub"><br>    <select name="" onchange="showSelect(this.value)" style="margin-bottom:10px;"><br>     <option value="0">第0层</option><br>     <option value="1">第1层</option><br>     <option value="2">第2层</option><br>     <option value="3">第3层</option><br>    </select><br>    <div id="c00"><br>     <input type="checkbox" name="ck00" onclick="addPreItem()" value="北京"/>北京<br>     <input type="checkbox" name="ck00" onclick="addPreItem()" value="福建"/>福建<br>     <input type="checkbox" name="ck00" onclick="addPreItem()" value="四川"/>四川 <br>     <input type="checkbox" name="ck00" onclick="addPreItem()" value="江苏"/>江苏<br>    </div><br>    <div id="c01"><br>     <input type="checkbox" name="ck01" onclick="addPreItem()" value="上海"/>上海<br>     <input type="checkbox" name="ck01" onclick="addPreItem()" value="云南"/>云南<br>     <input type="checkbox" name="ck01" onclick="addPreItem()" value="贵州"/>贵州<br>    </div><br>    <div id="c02"><br>     <input type="checkbox" name="ck01" onclick="addPreItem()" value="黑龙江"/>黑龙江<br>     <input type="checkbox" name="ck01" onclick="addPreItem()" value="吉林"/>吉林<br>     <input type="checkbox" name="ck01" onclick="addPreItem()" value="辽宁"/>辽宁<br>    </div><br>    <div id="c03"><br>     <input type="checkbox" name="ck01" onclick="addPreItem()" value="美国"/>美国<br>     <input type="checkbox" name="ck01" onclick="addPreItem()" value="阿富汗"/>阿富汗<br>     <input type="checkbox" name="ck01" onclick="addPreItem()" value="日本"/>日本<br>    </div><br>   </div><br>  </div><br>  <div id="preview"><br>   <div class="tit bgc_eee c_999"><br>    <h2>您已选择的城市</h2><br>   </div> <br>   <div class="cont" id="previewItem"><br>   </div><br>  </div><br></div><br> <br><script type="text/javascript"><br>/* ------使用说明----- */<br>/*<br> 添加城市方法：<br>     添加组：找到id 是 "selectSub"中select标签下，添加option标签 value属性递增，找到 id 是 "selectSub",按照原有格式添加div,其id属性递增<br> 添加二级傅选矿选项<br>  复制 id 是 "selectSub" 下任意input标签，粘贴在需要添加的位置。<br>*/<br>var grow = $("selectSub").getElementsByTagName("option").length; //组数<br>var showGrow = 0;//已打开组<br>var selectCount = 0; //已选数量 <br>showSelect(showGrow);<br>var items = $("selectSub").getElementsByTagName("input");<br>//alert(maxItem);<br>//var lenMax = 2; <br>//alert(1);<br>function $(o){ //获取对象<br> if(typeof(o) == "string")<br> return document.getElementById(o);<br> return o;<br>}<br>function openBg(state){ //遮照打开关闭控制<br> if(state == 1)<br> {<br>  $("bg").style.display = "block";<br>  var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight;<br> //alert(document.body.offsetHeight);<br> //alert(document.documentElement.offsetHeight);<br>  $("bg").style.height = h + "px";<br> }<br> else<br> {<br>  $("bg").style.display = "none";<br> } <br>}<br>function openSelect(state){ //选择城市层关闭打开控制<br> if(state == 1) <br> {<br>  $("selectItem").style.display = "block";<br>  $("selectItem").style.left = ($("bg").offsetWidth - $("selectItem").offsetWidth)/2 + "px";<br>  $("selectItem").style.top = document.body.scrollTop + 100 + "px";  <br> }<br> else<br> {<br>  $("selectItem").style.display = "none";<br> }<br>}<br>function showSelect(id){<br> for(var i = 0 ; i < grow ;i++)<br> {<br>  $("c0" + i).style.display = "none";<br> }<br> $("c0" + id).style.display = "block";<br> showGrow = id;<br>}<br>function open(id,state){ //显示隐藏控制<br> if(state == 1)<br> $(id).style.display = "block";<br> $(id).style.diaplay = "none";<br>}<br>function addPreItem(){ <br> $("previewItem").innerHTML = "";<br> var len　= 0 ;<br> for(var i = 0 ; i < items.length ; i++)<br> {<br>  if(items[i].checked == true)<br>  {<br>   //len++;<br>   //if(len > lenMax)<br>   //{<br>   // alert("不能超过" + lenMax +"个选项！")<br>   // return false;<br>   //}<br>   var mes = "<input type='checkbox' checked='true' value='"+ items[i].value +"' onclick='copyItem("previewItem","previewItem");same(this);'>" + items[i].value;<br>   $("previewItem").innerHTML += mes;<br>   //alert(items[i].value);<br>  }<br> }<br>}<br>function makeSure(){<br> //alert(1);<br> //$("makeSureItem").innerHTML = $("previewItem").innerHTML;<br> openBg(0);<br> openSelect(0);<br> copyItem("previewItem","makeSureItem") <br>}<br>function copyHTML(id1,id2){<br> $(id2).innerHTML = $("id1").innerHTML;<br>}<br>function copyItem(id1,id2){<br> <br> var mes = "";<br> var items2 = $(id1).getElementsByTagName("input");<br> for(var i = 0 ; i < items2.length ; i++)<br> {<br>  if(items2[i].checked == true)<br>  {<br>   mes += "<input type='checkbox' checked='true' value='"+ items2[i].value +"' onclick='copyItem("" + id2+ "",""+ id1 +"");same(this);'>" + items2[i].value;   <br>  }<br> }<br> $(id2).innerHTML = "";<br> $(id2).innerHTML += mes;<br> //alert($(id2).innerHTML);<br>}<br>function same(ck){<br> for(var i = 0 ; i < items.length ; i++)<br> {<br>  if(ck.value == items[i].value)<br>  {<br>   items[i].checked = ck.checked;<br>  }<br> }<br>} <br>/* 鼠标拖动 */<br>var oDrag = "";<br>var ox,oy,nx,ny,dy,dx;<br>function drag(e,o){<br> var e = e ? e : event;<br> var mouseD = document.all ? 1 : 0;<br> if(e.button == mouseD)<br> {<br>  oDrag = o.parentNode;<br>  //alert(oDrag.id);<br>  ox = e.clientX;<br>  oy = e.clientY;  <br> }<br>}<br>function dragPro(e){<br> if(oDrag != "")<br> { <br>  var e = e ? e : event;<br>  //$(oDrag).style.left = $(oDrag).offsetLeft + "px";<br>  //$(oDrag).style.top = $(oDrag).offsetTop + "px";<br>  dx = parseInt($(oDrag).style.left);<br>  dy = parseInt($(oDrag).style.top);<br>  //dx = $(oDrag).offsetLeft;<br>  //dy = $(oDrag).offsetTop;<br>  nx = e.clientX;<br>  ny = e.clientY;<br>  $(oDrag).style.left = (dx + ( nx - ox )) + "px";<br>  $(oDrag).style.top = (dy + ( ny - oy )) + "px";<br>  ox = nx;<br>  oy = ny;<br> }<br>}<br>document.onmouseup = function(){oDrag = "";}<br>document.onmousemove = function(event){dragPro(event);}<br></script><br></body><br></html></font><br><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于51jpb选择城市功能特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200807144159.shtml方便下次再访问哦。

·上一篇： 一个带动画背景的输入框效果
·下一篇： 自定义select的样式

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

51jpb选择城市功能特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻