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 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
js中的string.format函数代码
Aug 11 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
详解JavaScript函数对象
Nov 15 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 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抽象工厂模式(Elgg)
2010/03/21 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
初识laravel5
2015/03/02 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
JSONP 跨域共享信息
2012/08/16 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
5分钟 Pipenv 上手指南
2018/12/20 Python
Python处理session的方法整理
2019/08/29 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
Android笔试题总结
2014/11/29 面试题
护理职业应聘自荐书
2013/09/29 职场文书
行政专员工作职责
2013/12/22 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
2014年外联部工作总结
2014/11/17 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技