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 keycode总结
Feb 04 Javascript
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
webpack3.0升级4.0的方法步骤
Apr 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数组的使用方法小结
2010/09/23 PHP
php下使用iconv需要注意的问题
2010/11/20 PHP
PHP比你想象的好得多
2014/11/27 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
再谈javascript原型继承
2014/11/10 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
JavaScript计算出两个数的差值
2020/03/19 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
python更改已存在excel文件的方法
2018/05/03 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
Python循环实现n的全排列功能
2019/09/16 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
培训演讲稿范文
2014/01/12 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
实训报告范文大全
2014/11/04 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
新年祝酒词大全
2015/08/11 职场文书
python pygame入门教程
2021/06/01 Python
一文搞懂redux在react中的初步用法
2021/06/09 Javascript