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 ajax abort()的使用方法
Oct 28 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
vue组件从开发到发布的实现步骤
Nov 11 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 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
Mysql的常用命令
2006/10/09 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
php实现用户登陆简单实例
2017/04/04 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
javascript this用法小结
2008/12/19 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
2018/01/22 jQuery
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
高一军训的心得体会
2014/09/01 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
三好学生个人总结
2015/02/15 职场文书
慰问信格式规范
2015/03/23 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
python实现简单的聊天小程序
2021/07/07 Python
前端JavaScript大管家 package.json
2021/11/02 Javascript
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js