js实现鼠标滑过文字链接色彩变化的效果


Posted in Javascript onMay 06, 2015

本文实例讲述了js实现鼠标滑过文字链接色彩变化效果的方法。分享给大家供大家参考。具体实现方法如下:

<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标移入移出效果</title>
<style>
body,ul,h2,p{
margin:0; padding:0;
font-family:"微软雅黑";
background:#333;
}
li{list-style:none;}
a{text-decoration:none;}
#box{
width:270px;padding:10px 10px 20px;
overflow:hidden;margin:20px auto 0;
border:1px solid #FFF;
}
.internal{width:266px;float:left;}
#box h2{
height:38px;border-bottom:1px solid #ccc;
padding-left:5px;
}
#box h2 strong{
float:left; line-height:38px;
color:#885050;
}
#box h2 a{
float:right;width:52px;height:14px;
font-size:12px;text-indent:20px;
color:#fff;line-height:12px;
font-weight:normal;margin-top:10px;
}
#box li{
height:30px;position:relative;
border-bottom:1px dashed #ccc;
}
#box li div,#box li p{
height:30px;position:absolute;
top:0;left:0;width:100%;
}
#box li p{
background:#fff;opacity:0;
filter:alpha(opacity=0);
}
#box li div a,#box li div span{
line-height:30px;
font-size:12px;height:30px;
}
#box li div a {
float:left;padding-left:5px;
color:#7F5454;width:185px;
overflow:hidden;
}
#box li div span{
padding-right:10px;
float:right;color:#CF9494;
}
</style>
<script type="text/javascript">
window.onload=function()
{
 var d=document;
 var oBox=d.getElementById('box');
 var aLi=oBox.getElementsByTagName('li');
 var i=0;
 for(i=0;i<aLi.length;i++)
 {
 var oP=aLi[i].getElementsByTagName('p')[0];
 oP.iAlpha=0;
 oP.times=null;
 aLi[i].onmouseover=function()
 {
 oP=this.getElementsByTagName('p')[0];
 oP.times && clearInterval(oP.times);
 oP.style.opacity=1;
 oP.style.filter="alpha(opacity=100)";
 oP.iAlpha=100;
 };
 aLi[i].onmouseout=function()
 {
 startMove(this.getElementsByTagName('p')[0])
 };
 }
};
function startMove(obj)
{
 obj.times && clearInterval(obj.time);
 obj.times=setInterval(function()
 {
 doMove(obj);
 },10);
}
function doMove(obj)
{
 var iSpeed=5;
 if(obj.iAlpha<=iSpeed)
 {
 clearInterval(obj.times);
 obj.iAlpha=0;
 obj.time=null;
 }
 else
 {
 obj.iAlpha-=iSpeed;
 }
 obj.style.filter="alpha(opacity="+obj.iAlpha+")";
 obj.style.opacity=obj.iAlpha/100;
}
</script>
</head>
<body>
<div id="box">
 <div class="internal">
 <h2><strong>网页特效代码</strong>
 <a href="https://3water.com/">more</a></h2>
 <ul>
  <li>
  <p></p>
  <div>
   <a href="https://3water.com/"> 广告代码特效大全 </a>
   <span>2011-09-10</span>
  </div>
  </li>
  <li>
  <p></p>
  <div>
   <a href="https://3water.com/"> JS特效代码集锦 </a>
   <span>2011-09-10</span>
  </div>
  </li>
  <li>
  <p></p>
  <div>
   <a href="https://3water.com/">商业网页模板与光盘素材</a>
   <span>2011-09-10</span>
  </div>
  </li>
  <li>
  <p></p>
  <div>
   <a href="https://3water.com/">网页制作教程</a>
   <span>2011-09-10</span>
  </div>
  </li>
  <li>
  <p></p>
  <div>
   <a href="https://3water.com/">网站源码整站源代码下载</a>
   <span>2011-09-10</span>
  </div>
  </li>
  <li>
  <p></p>
  <div>
   <a href="https://3water.com/"> 网页电子书下载 </a>
   <span>2011-09-10</span>
  </div>
  </li>
  <li>
  <p></p>
  <div>
   <a href="https://3water.com/"> 免费网页模板下载 </a>
   <span>2011-09-10</span>
  </div>
  </li>
 </ul>
 </div>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
浅谈使用React.setState需要注意的三点
Dec 18 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 Javascript
JS实现文字掉落效果的方法
May 06 #Javascript
DOM 高级编程
May 06 #Javascript
js获得当前系统日期时间的方法
May 06 #Javascript
js字符串操作方法实例分析
May 06 #Javascript
ajax+jQuery实现级联显示地址的方法
May 06 #Javascript
javascript十六进制及二进制转化的方法
May 06 #Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 #Javascript
You might like
PHP 存储文本换行实现方法
2010/01/05 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
python实现神经网络感知器算法
2017/12/20 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
python format 格式化输出方法
2018/07/16 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
python破解同事的压缩包密码
2020/10/14 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
研究生简历自我评
2015/03/11 职场文书
员工表扬信怎么写
2015/05/05 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL