2 the dead the_dead 于 2015.07.28 14:17 提问

如何实现标签在网站中的动态随机移动?

图片说明

即这种标签在网页值动态随机移动

4个回答

showbo
showbo   Ds   Rxr 2015.07.28 14: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>
the_dead
the_dead 如何把这个矩形的框框修改成其他形状啊?
2 年多之前 回复
the_dead
the_dead 或者是以一个为中心,其他的围着它缓慢旋转也行的
2 年多之前 回复
the_dead
the_dead 嗯嗯,对的,差不多是这样的界面,但是可不可以做成平面的
2 年多之前 回复
showbo
showbo 回复the_dead: 单个标签乱浮动那不是很乱。。怎么选择。。还是你说的这种效果?http://www.miaov.com/miaov_demo/3dLable/miaov_demo.html
2 年多之前 回复
the_dead
the_dead 让标签也像浮动广告一样在网页中随机移动
2 年多之前 回复
the_dead
the_dead 就是类似于网页中浮动广告
2 年多之前 回复
showbo
showbo 回复the_dead: 随机移动?什么意思?就是标签顺序刷新一次就变化一次?
2 年多之前 回复
the_dead
the_dead 我的意思是让它们在页面中随机移动
2 年多之前 回复
tjckkj
tjckkj   2015.07.28 14:26

请问是需要标签随机移动,还是唯一的一个背景颜色在这几个标签中随机显示?

the_dead
the_dead 类似于网页中浮动广告一样,标签也进行在页面中随机移动
2 年多之前 回复
lzp_lrp
lzp_lrp   Ds   Rxr 2015.07.28 15:53

如何制作会移动的广告条

http://www.it.com.cn/f/edu/0411/28/52682.htm

CSDNXIAOD
CSDNXIAOD   2015.07.28 14:29

电子商城网站实现鼠标移动出现导航菜单
----------------------biu~biu~biu~~~在下问答机器人小D,这是我依靠自己的聪明才智给出的答案,如果不正确,你来咬我啊!

Csdn user default icon
上传中...
上传图片
插入图片