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 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
js跑步算法的实现代码
Dec 04 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
编写React组件项目实践分析
Mar 04 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 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读取XML值的代码(推荐)
2011/01/01 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
JS无限树状列表实现代码
2011/01/11 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
详解javascript遍历方式
2015/11/11 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
python检查URL是否正常访问的小技巧
2017/02/25 Python
浅谈python数据类型及类型转换
2017/12/18 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
Django实现跨域请求过程详解
2019/07/25 Python
详解python中的数据类型和控制流
2019/08/08 Python
Python:slice与indices的用法
2019/11/25 Python
python单例设计模式实现解析
2020/01/07 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
EJB timer的种类
2014/10/28 面试题
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
黄继光的英雄事迹材料
2014/02/13 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
家属答谢词
2015/01/05 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
MySQL中varchar和char类型的区别
2021/11/17 MySQL