JS网页制作实例:标签云

文章简介:js实现标签云效果.

js实现标签云效果:

 

实现:
1、随机方法:
JavaScript代码
function rand(num){
return parseInt(Math.random()*num+1);
}

2、随机取色:
JavaScript代码
function randomcolor(){
var str=Math.ceil(Math.random()*16777215).toString(16);
if(str.length<6){
str="0"+str;
}
return str;
}

3、循环dom
XML/HTML代码

for( len=obj.length,i=len;i--;){
obj[i].style.left=rand(600)+"px";
obj[i].style.top=rand(400)+"px";
obj[i].className="color"+rand(5);
obj[i].style.zIndex=rand(5);
obj[i].style.fontSize=rand(12)+12+"px";
// obj[i].style.background="#"+randomcolor();
obj[i].style.color="#"+randomcolor();
obj[i].onmouseover=function(){
this.style.background="#"+randomcolor();
}
obj[i].onmouseout=function(){
this.style.background="none";
}
}

4、dom结构
XML/HTML代码

<div id="wrap">
<a href="#">web标准学习</a><a href="#">css</a>
<a href="#">javascript</a><a href="#">html5</a>
<a href="#">canvas</a><a href="#">video</a>
<a href="#">audio</a><a href="#">jQuery</a>
<a href="#">jQuerymobile</a><a href="#">flash</a>
<a href="#">firefox</a><a href="#">chrome</a>
<a href="#">opera</a><a href="#">IE9</a>
<a href="#">css3.0</a><a href="#">andriod</a>
<a href="#">apple</a><a href="#">google</a><a href="#">jobs</a>
</div>

时间: 2024-11-05 16:29:58

JS网页制作实例:标签云的相关文章

css3和js网页制作实例:网页头像展示效果

文章简介:今天就为大家分享一个非常有创意的CSS3头像展示效果,交互性强,是一个基于css3和js来实现的,代码量不多,但是最终的效果却很让人赞叹,所以特别推荐给大家.其中关于本示例的一些css样式呈现,个人认为还有很大的发挥空间,例如鼠标经过的时候而不是切换成一个背景色 今天就为大家分享一个非常有创意的CSS3头像展示效果,交互性强,是一个基于css3和js来实现的,代码量不多,但是最终的效果却很让人赞叹,所以特别推荐给大家.其中关于本示例的一些css样式呈现,个人认为还有很大的发挥空间,例如

JS网页制作实例:实现导航高亮方法

文章简介:我们在程序里进行包含的文件的时候,如统一的头部和底部,这时候统一的头部中有一个这样的导航,如果粗心的程序员没有无法给目前所在的目录或文件输出一个高亮的类的时候,或者有时候实现起来非常麻烦的时候,能不能有一些其实的方法来实现和补救呢? 我们在程序里进行包含的文件的时候,如统一的头部和底部,这时候统一的头部中有一个这样的导航,如果粗心的程序员没有无法给目前所在的目录或文件输出一个高亮的类的时候,或者有时候实现起来非常麻烦的时候,能不能有一些其实的方法来实现和补救呢? 答案是肯定的,那就是J

CSS+JS网页制作实例:新闻列表鼠标滑过显示详情

文章简介:新闻列表鼠标滑过,显示单条详情. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>demo</title><style type="text/css">body { font-size:12px;

CSS网页制作实例:有条件的添加hover样式

文章简介:CSS网页制作实例:有条件的添加hover样式. 给元素添加一个hover样式,很简单,我们来看一个透明度的例子吧: 1 2 3 4 5 6 div { opacity: 1.0; } div:hover { opacity: 0.5; } 但是如果我们只是想让当前真正hover了的div显示,而让其他的div模糊呢?假设我们的HTML结构如下: 1 2 3 4 5 <section> <div></div> <div></div> &

HTML+CSS网页制作实例:制作左上角卷角效果的网页

文章简介:HTML+CSS网页制作实例:制作左上角卷角效果的网页. 英文原文 http://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/ 这篇文章中我们将介绍如何制做paper左上角的卷角效果. 我想让我的几句文字以一张有卷角折叠效果的纸为背景,如果直接用一张图片,很容易实现,但是这里我要用css来实现. 我的这种实现方法并不是非常具有创新意义,但是还是值得拿出来分享的,简单的来说,除了一个矩形

CSS网页制作实例代码:模拟新浪微博的三角图像

文章简介:CSS网页制作实例代码:新浪微博的三角图像. <!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

用JS实现3D球状标签云示例代码_javascript技巧

Matter: 1.发现实例不足,无法悬停(有待解决) 2.无法系统随机自动上色(有待解决) 首先使用标签云的一家高知名度的网站---照片共享网站Flickr.标签云的设计者是交互设计师Stewart Butterfield.之后,标签云被诸如del.Technorati等网站采纳. 首次公布的外观标签云(或至少是一个加权名单),可归结起来主要是"潜意识档案" ,在 Douglas Coupland的Microserfs( 1995 ) .在Lester Leaps Out,威尔士诗人

网页制作实例:用CSS实现图片垂直居中方法

网页制作,用CSS实现图片垂直居中方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><style type="text/css"><!--body {margin:0;padding:0}div {width:500px;

网页制作实例:js用于树型结构级联选择

js|树型结构|网页 <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>及联选择-用于权限选择比较合适</title></head><body><ul id="tree">    <li><input type=