Jquery中文网 www.jquerycn.cn
jQuery 教程 | jQuery ui教程 |
Jquery中文网 >  脚本编程  >  javascript  >  正文 js 仿QQ好友选择效果代码

js 仿QQ好友选择效果代码

发布时间：2017-09-30   编辑：www.jquerycn.cn
jquery中文网为您提供js 仿QQ好友选择效果代码等资源，欢迎您收藏本站，我们将为您提供最新的js 仿QQ好友选择效果代码资源
提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" >js 仿QQ好友选择效果代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js 仿QQ好友选择效果代码</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> </style> </head> <body>
你最多可以选择5个
<ul id="leftul"> <li>选项一</li> <li>选项二</li> <li>选项三</li> <li>选项四</li> <li>选项五</li> <li>选项六</li> <li>选项七</li> <li>选项八</li> <li>选项九</li> <li>选项十</li> <li>选项十一</li> <li>选项十二</li> <li>选项十三</li> <li>选项十四</li> <li>选项十五</li> </ul>
您已经选择了0个！ <ul id="rightul"></ul>
<script type="text/javascript"> var maxNum = 5, Len=0, Nums=document.getElementById("num"); var li = document.getElementById('leftul').getElementsByTagName('li'); for(var i=li.length; i--; ){ li[i].id = i; li[i].onclick = add; } function add(){ if( Len > maxNum){ document.getElementById("notice").innerHTML = "你已经选择够了！" --Len; return false; } var newli = document.createElement("li"); newli.onclick = remove; newli.setAttribute("title", this.id); newli.appendChild(document.createTextNode(this.innerHTML)); document.getElementById("rightul").appendChild(newli); this.style.display = "none"; Nums.innerHTML = Len } function remove(){ document.getElementById("notice").innerHTML = "你最多可以选择五个！"; var title = this.getAttribute("title"); document.getElementById(title).style.display = "block"; Nums.innerHTML = --Len; this.parentNode.removeChild(this); } </script> </body> </html></textarea>
提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
js 仿QQ好友选择效果代码
jquery 仿QQ校友的DIV模拟窗口效果源码
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
复制本贴标题与地址的js代码
基于jQuery的消息提示插件 DivAlert之旅（二）
js获取QQ群成员的经典代码
js 自动切换的选项卡效果
photoshop把图片转为模仿建筑景观蓝图效果教程
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
QQ浏览器鼠标手势功能在哪里？怎么设置?

上一篇：兼容IE和FF的JavaScript控制Flash操作效果 下一篇：js点击图片更新新图片
[关闭]
最近更新
浏览排行

关于本站 | 网站地图 | 联系我们 | 免责声明 | 友情链接
黔ICP备2021004999号-1 广告合作邮箱:zhongwenwanghezuo@gmail.com
CopyRight © 2010-2014 jQeury中文网 jquerycn.cn , All Rights Reserved.