jquery实现的随机多彩tag标签随机颜色和字号大小效果

jquery随机多彩tag标签随机颜色和字号大小效果

js代码：


代码如下:

<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var tags_a = $("#tags a");
tags_a.each(function(){
var x = 9;
var y = 0;
var rand = parseInt(Math.random() * (x - y + 1) + y);
$(this).addClass("tags"+rand);
});
})
</script>

html代码：


代码如下:

<html>
<head>
<style>
body,a{ font-size:13px;}
a{ color:#333333; text-decoration:none;}
.taglist{ width:250px;overflow:hidden;border:#dddddd solid 1px;}
.taglist .tit{ width:100%; height:24px; line-height:24px; background-color:#565662;}
.taglist .tit a{ padding-left:8px; color:#ffffff;}
#tags a{height:26px; line-height:26px;padding-right:6px;}
#tags .tags0{}
#tags .tags1{color:#C00; font-size:24px;}
#tags .tags2{color:#030; font-size:16px;}
#tags .tags3{color:#00F;}
#tags .tags4{ font-size:16px;}
#tags .tags5{color:#C00; font-size:20px;}
#tags .tags6{color:#F06 font-size:20px;}
#tags .tags7{color:#030; font-weight:bold; font-size:18px;}
#tags .tags8{color:#F06; font-weight:bold;}
#tags .tags9{color:#C00; font-weight:bold;font-size:16px;}
#tags a:hover{ color:#F00; text-decoration:underline;}
.w95{ width:95%; margin:0 auto; padding-top:6px; padding-bottom:6px;}
.taglist .w95{}
</style>
</head>
<body>
<div class="taglist">
<div class="tit"><a href="#">TAG标签</a></div>
<div class="w95" id="tags">
<a href='http://www.51xuediannao.com/js/nav/'>导航菜单</a>
<a href='http://www.51xuediannao.com/js/slide/'>焦点幻灯片</a>
<a href='http://www.51xuediannao.com/js/gg/'>广告代码</a>
<a href='http://www.51xuediannao.com/js/texiao/'>网页特效</a>
<a href='http://www.51xuediannao.com/js/'>jquery 特效</a>
<a href='http://www.51xuediannao.com/js/gundong/'>滚动代码</a>
<a href="http://www.51xuediannao.com/tags.php?/%E6%9F%A5%E7%9C%8B%E6%BA%90%E7%A0%81/">查看源码</a>
<a href="http://www.51xuediannao.com/tags.php?/IE7%E5%8F%98%E6%85%A2/">IE7变慢</a>
<a href="http://www.51xuediannao.com/tags.php?/ET2.0%E9%87%87%E9%9B%86/">ET2.0采集</a>
<a href="http://www.51xuediannao.com/tags.php?/CSS/">CSS</a>
<a href="http://www.51xuediannao.com/tags.php?/moss2007/">moss2007</a>
<a href="http://www.51xuediannao.com/tags.php?/MOSS%E6%AF%8D%E7%89%88%E9%A1%B5/">MOSS母版页</a>
<a href="http://www.51xuediannao.com/tags.php?/JS%2BCSS%E5%B9%BB%E7%81%AF%E7%89%87/">JS+CSS幻灯片</a>
<a href="http://www.51xuediannao.com/tags.php?/%E7%BD%91%E9%A1%B5%E6%BA%90%E7%A0%81/">网页源码</a>
<a href="http://www.51xuediannao.com/tags.php?/%E7%BD%91%E9%A1%B5%E9%85%8D%E8%89%B2/">网页配色</a>
<a href="http://www.51xuediannao.com/tags.php?/301%E9%87%8D%E5%AE%9A%E5%90%91/">301重定向</a>
<a href="http://www.51xuediannao.com/tags.php?/JS%2BCSS%E5%88%97%E8%A1%A8/">JS+CSS列表</a>
<a href="http://www.51xuediannao.com/tags.php?/%E9%9A%8F%E6%9C%BA%E6%95%B0/">随机数</a>
<a href="http://www.51xuediannao.com/tags.php?/%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95/">下拉菜单</a>
</div>
</div>
</body>
</html>

效果显示：

赞 (0)

相关推荐

  • jquery实现刷新随机变化样式特效（tag标签样式）

    jquery实现刷新随机变化样式特效（tag标签样式）

    tag标签随机多彩变化的超链接样式,使用JQ+DIV+CSS实现刷新随机变化样式特效.jquery版的随机多彩tag标签随机css字体颜色和字号大小效果.于是就写下这个效果与大家分享,办法也很笨拙,就是利用jquery随机数来遍历#tag中所有的a链接为其添加一个随机的类名.然后预先定义了12个链接样式.你可以自定义类似 #tags .tags1 这样的css以实现你需要的字体样式.这里的jquery随机多彩tag标签随机颜色和字号大小效果样式只是演示随便写的,不够漂亮. <!DOCTYPE h

  • jquery实现的随机多彩tag标签随机颜色和字号大小效果

    jquery实现的随机多彩tag标签随机颜色和字号大小效果

    jquery随机多彩tag标签随机颜色和字号大小效果 js代码: 复制代码 代码如下: <script type="text/javascript" src="jquery-1.6.4.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascrip

  • jQuery实现IE输入框完成placeholder标签功能的方法

    jQuery实现IE输入框完成placeholder标签功能的方法

    本文实例讲述了jQuery实现IE输入框完成placeholder标签功能的方法.分享给大家供大家参考,具体如下: 如果在输入框加上placeholder="xx"属性,例如: <input type="text" placeholder="请输入关键词"/> 则可以在谷歌浏览器等高级浏览器的输入框中实现替换文本的功能,也就是得到如下图所示的对话框: 但是这个属性在WIN7默认的浏览器IE8中无法兼容,更不要说IE6了.也就是说IE里

  • 使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)

    使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)

    这是一个示例: <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").cl

  • jQuery使用正则表达式替换dom元素标签用法示例

    本文实例讲述了jQuery使用正则表达式替换dom元素标签用法.分享给大家供大家参考,具体如下: 这里主要通过如下正则表达式来替换dom元素中的标签: /<[\/]?(div)([^<>]*)>/g 具体示例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title>

  • JS创建Tag标签的方法详解

    JS创建Tag标签的方法详解

    本文实例讲述了JS创建Tag标签的方法.分享给大家供大家参考,具体如下: 一 . 创建标签其原理就是 创建一个节点: var x = document.createElement("TagName") 赋予节点样式: x.setAttribute("class",类名) 对节点进行赋值: x.innerHTML = 内容 //赋值 添加节点到父元素 要添加到的元素.appendChild(x); 二. 样式图: 三. 主要代码流程: HTML部分: <div

  • jQuery简单获取DIV和A标签元素位置的方法

    本文实例讲述了jQuery简单获取DIV和A标签元素位置的方法.分享给大家供大家参考,具体如下: 一.获取DIV的位置 var top = jquery("#div_id").offset().top; //获取div的居上位置 var left = jquery("#div_id").offset().left; //获取div的居左位置 var height = jquery("#div_id").height(); //获取div的高度 v

  • jQuery实现将页面上HTML标签换成另外标签的方法

    本文实例讲述了jQuery实现将页面上HTML标签换成另外标签的方法.分享给大家供大家参考.具体分析如下: 替换前代码如下: <code> A </code> <code> B </code> <code> C </code> 替换后代码如下: <pre> A </pre> <pre> A </pre> <pre> A </pre> 实现替换代码: 复制代码 代码

  • Git Tag 标签详解

    Git Tag 标签 git tag 按字母排序显示标签 git tag v1.01 打上v1.01这个标签 git show v1.01 显示这个标签的详情 可以同时打多个tag指向同一个时间点上的版本 git push origin --tags 推送本地所有新增标签到远端 ps:下面看下git命令之git tag 给当前分支打标签 列出标签 $ git tag # 在控制台打印出当前仓库的所有标签 $ git tag -l 'v0.1.*' # 搜索符合模式的标签 打标签 git标签分为两

  • jQuery实现获取动态添加的标签对象示例

    jQuery实现获取动态添加的标签对象示例

    本文实例讲述了jQuery实现获取动态添加的标签对象.分享给大家供大家参考,具体如下: jquery无法直接给网页里面动态添加点击事件,并且获取到对象 一般来说,js获取动态添加的组件都是自定义给标签添加上onclick属性来达到调用,这是普通的方法,如下: onclick方式获取 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

  • python随机在一张图像上截取任意大小图片的方法

    如下所示: ''' 机器学习中随机产生负样本的 ''' import cv2 import random #读取图片 img=cv2.imread('1.png') #h.w为想要截取的图片大小 h=80 w=80 count=1 while 1:     #随机产生x,y 此为像素内范围产生  y = random.randint(1, 890) x = random.randint(1, 1480) #随机截图  cropImg = img[(y):(y + h), (x):(x + w)]

随机推荐