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 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
使用layui的router来进行传参的实现方法
Sep 06 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用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
html超链接打开窗口大小的方法
2013/03/05 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
幼儿师范毕业生自荐信
2013/11/09 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
小学评语大全
2014/04/22 职场文书
爬山的活动方案
2014/08/16 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
小学班主任教育随笔
2015/08/15 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
MySQL多表查询机制
2022/03/17 MySQL