即这种标签在网页值动态随机移动
3条回答 默认 最新
- Go 旅城通票 2015-07-28 06:35关注
样式随机分配吧?
<!doctype html> <title>jquery多彩标签云选择效果</title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script> <style> ul,li{list-style:none;padding:0px;margin:0px} ul.cloud{zoom:1;overflow:hidden;width:300px} ul.cloud li{-moz-border-radius:6px;-webkit-border-radius:6px;background:#fff;border:solid 1px purple;color:purple;padding:5px;margin-bottom:15px;border-radius:6px;-khtml-border-radius:6px;float:left;margin:0 5px 5px 0;line-height:30px;font-size:14px;cursor:pointer} ul.cloud li:hover,ul.cloud li.Selected{background:purple;color:#fff} ul.cloud li.green{color:green;border-color:green} ul.cloud li.green:hover,ul.cloud li.greenSelected{background:green;color:#fff} ul.cloud li.blue{color:blue;border-color:blue} ul.cloud li.blue:hover,ul.cloud li.blueSelected{background:blue;color:#fff} </style> <ul class="cloud" id="ul"> <li>标签1</li> <li>标签2</li> <li>标签3</li> <li>标签4</li> <li>标签5</li> <li>标签6</li> </ul> <input type="button" value="获取选择标签内容" onclick="getTags()"/> <script> function rnd(min, max) { var tmp = min; if (max < min) { min = max; max = tmp; } return Math.floor(Math.random() * (max - min + 1) + min); } var arr = ['', 'blue', 'green']; $('#ul li') .attr('cls', function () { return this.className = arr[rnd(0, arr.length)]; })//随机分配样式 .click(function () { var cls = this.getAttribute('cls'), isSelected = this.className.indexOf('Selected') != -1; this.className = isSelected ? cls : cls + ' ' + cls+'Selected'; }); function getTags() { var tags = $('#ul li[class*="Selected"]').map(function () { return this.innerHTML }).get().join(','); alert(tags) } </script>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 虚拟机打包apk出现错误
- ¥30 最小化遗憾贪心算法上界
- ¥15 用visual studi code完成html页面
- ¥15 聚类分析或者python进行数据分析
- ¥15 逻辑谓词和消解原理的运用
- ¥15 三菱伺服电机按启动按钮有使能但不动作
- ¥15 js,页面2返回页面1时定位进入的设备
- ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
- ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
- ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝