js实现鼠标经过文字大小颜色都随机变化
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现鼠标经过文字大小颜色都随机变化相关的知识，希望对你有一定的参考价值。
给你两个个思路：一：定义一个字体大小和颜色两个数组，再定义鼠标滑过事件，随机获取数组中的字体大小和颜色值。
二：随机颜色生成方法如下
字体大小方法自己琢磨实现吧，核心方法就是：Math.random()生成随机数
参考技术A 鼠标滑过事件啊JS调用CSS样式表问题（功能鼠标经过文本域是文本域边框颜色发生变化『给出能够实现功能的源码』）
JS调用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>
<title>无标题文档</title>
<script type="text/javascript">
function dod()
document.getElementById("testId").className="testClass"
</script>
<style type="text/css">
.testClass border:5px solid #000;
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<div >
<input name="" type="text" onmouseover="dod"/>
</div>
<div id="testId">
abc
</div>
</body>
</html>
input:hover border: 5px solid #000;
用Javascript：
<input name="" type="text" onmouseover="this.style.border = '5px solid #000';" onmouseout="this.removeAttribute('style');" />追问
这样还要定义javascript呀！ 没看见有捱。
追答
把这一行改为
<style type="text/css">
.text1
background:#fff;
border:solid 1px #ccc;
.tover
background:#fff;
border:solid 1px #f00;
</style>
楼上的这么改下就行了。要注意CSS的优先权 参考技术C <input type="text" size="10" id="text1" onmouseover="javascript:textover('tover');" />
<style type="text/css">
#text1
background:#fff;
border:solid 1px #ccc;
.tover
background:#fff;
border:solid 1px #f00;
</style>
<script language="javascript">
function textover(cname)
var m
m=document.getElementById("text1")
m.classname=cname
</script>追问
你用这个实现了“鼠标经过文本域是文本域边框颜色发生变化”？
追答这个没问题，测试过了
.tover
border:#FF0000 solid 1px;
display:block;
function fun(test)
var object= document.getElementById(test);
object.setAttribute("className","tover");
a:hover可以实现，不过在IE8.0下出现了兼容性问题，郁闷呀！
追答为什么一定要用a:hover呢，你不会变个方法来实现，程序是死的认识活的，活人还能让尿憋死啊！！要学会变通@
追问那你能够解决这个问题不？ 能解决请写出源码
追答首先引入jquery文件。。。
$(function()
$("#mouse").mouseover(function()$(this).addClass("sss"));
$("#mouse").mouseout(function()$(this).removeClass("sss"));
);
以上是关于js实现鼠标经过文字大小颜色都随机变化的主要内容，如果未能解决你的问题，请参考以下文章
js jq 实现鼠标经过div背景以进度条方式 变宽，鼠标离开变小，同时文字颜色和原来不一样
鼠标点击出现爱心+社会主义价值观+随机颜色的文字+鼠标cursor自定义图片