JS实现带鼠标效果的头像及文章列表代码

更新时间：2015年09月27日 10:45:25 作者：企鹅

这篇文章主要介绍了JS实现带鼠标效果的头像及文章列表代码,涉及JavaScript响应鼠标事件动态切换页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了JS实现带鼠标效果的头像及文章列表代码。分享给大家供大家参考。具体如下：

这是一种带图片功能的文章或新闻列表功能，鼠标滑过标题列表显示说明和图片，多见于SNS交友网站，不过你喜欢的话，你完全可以用哦。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-mouse-style-face-article-list-demo/

具体代码如下：

<!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>
<title>鼠标滑过标题列表显示说明和图片</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;font:normal 12px 宋体;}
.wrapper{width:300px;height:auto;overflow:hidden;border:1px solid #fdd78d;background:#ffecc6;padding:5px;}
/*平常的状态*/
dl{width:100%;height:auto;clear:both;overflow:hidden;margin:8px 0px 8px 0px;}
dl dt{display:none;}
dl dd{}
dl dd strong{float:left;margin-right:5px;}
dl dd div{float:left;width:270px;list-style-type:none;}
dl dd div h4{clear:both;font-weight:normal}
dl dd div h4 a{float:left;color:#795601;font-size:12px;font-weight:normal;text-decoration:none;}
dl dd div h4 a:hover{color:#f00;text-decoration:underline;}
dl dd div h4 span{float:right;width:75px;}
dl dd div p{display:none;}
/*鼠标划过的状态*/
dl.over{clear:both;height:55px;padding:5px;background-color: #FFFBF4;}
dl.over dt{float:right;display:block;}
dl.over dt img{border:1px solid #ccc;padding:1px;background:#fff;}
dl.over dd{float:left;}
dl.over dd strong{font-size:28px;color:red;vertical-align:top;}
dl.over dd div{float:left;width:195px;}
dl.over dd div h4{clear:both;font-weight:normal}
dl.over dd div h4 a{color:#b34408;}
dl.over dd div h4 a:hover{color:#f00;text-decoration:underline;}
dl.over dd div h4 span{float:right;}
dl.over dd div p{clear:both;display:block;margin-top:5px;}
</style>
<script language="javascript">
window.onload=function(){
 var dl=document.getElementsByTagName("dl");
 if(dl.length<1) return false;
 for(var i=0;i<dl.length;i++){
  //初始化，让第一个类为over
  if(dl[i].className.indexOf("over")==-1){
   dl[0].className="over";
  }
  //遍历循环，模拟:hover伪类
  dl[i].onmouseover=function(){
   for(var j=0;j<dl.length;j++){
    dl[j].className="";
   }
   this.className="over";
  }
 }
}
</script>
</head>
<body>
<div class="wrapper">
 <dl>
  <dt><img src="images/getface.jpg"></dt>
  <dd>
   <strong>01</strong>
   <div>
    <h4><span>人气：19045</span><a href="#">酷站展示</a></h4>
    <p>300M独立IP双线空间 100元/年</p> 
   </div>
  </dd>
 </dl>
 <dl>
  <dt><img src="images/getface.jpg"></dt>
  <dd>
   <strong>02</strong>
   <div>
    <h4><span>人气：34534</span><a href="#">视频教程</a></h4>
    <p>1G全能空间仅99元 免备案</p> 
   </div>
  </dd>
 </dl>
 <dl>
  <dt><img src="images/getface.jpg"></dt>
  <dd>
   <strong>03</strong>
   <div>
    <h4><span>人气：79789</span><a href="#">loading素材</a></h4>
    <p>网罗网络最新flash动画、素材</p> 
   </div>
  </dd>
 </dl>
 <dl>
  <dt><img src="images/getface.jpg"></dt>
  <dd>
   <strong>04</strong>
   <div>
    <h4><span>人气：4323</span><a href="#">flash片头</a></h4>
    <p>企业建网站100元起,送源码</p> 
   </div>
  </dd>
 </dl>
 <dl>
  <dt><img src="images/getface.jpg"></dt>
  <dd>
   <strong>05</strong>
   <div>
    <h4><a href="#">flash动画</a><span>人气：6456</span></h4>
    <p>全国最低价 服务器年付仅2000元</p> 
   </div>
  </dd>
 </dl>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

您可能感兴趣的文章:

JS
列表

Bootstrap每天必学之前端开发框架
Bootstrap每天必学之前端开发框架，今天这篇文章就带着大家了解认识当下最流行的前端开发框架Bootstrap，bootstrap深受大家喜爱的原因到底是什么呢，我们一探究竟。
2015-11-11
关于Javascript模块化和命名空间管理的问题说明
最近闲下来的时候，稍微想了想这个问题。关于Javascript模块化和命名空间管理
2010-12-12
document.onreadystatechange事件的用法分析
这里主要介绍document.onreadystatechange事件的使用方法，一般多用于实时监控用户的输入
2009-10-10
使用JavaScript实现页面局部更新的方法总结
在JavaScript中,Ajax（Asynchronous JavaScript and XML）是一种用于在后台与服务器进行异步通信的技术,本文给大家介绍了使用JavaScript实现页面局部更新的三种方法,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下
2023-12-12
快速学习JavaScript的6个思维技巧
在这篇文章中，我将介绍六个思维技巧来帮助你更快地学习JavaScript，并成为一个更快乐、更富有成效的程序员。
2015-10-10
js类中获取外部函数名的方法
js类中获取外部函数名的方法...
2007-08-08
js实现一个猜数字游戏
本文主要介绍了js实现一个猜数字游戏的实例代码。具有很好的参考价值，下面跟着小编一起来看下吧
2017-03-03
JavaScript中forEach和map详细讲解
foreach和map都是JavaScript中数组的常用方法,它们都可以对数组中的每个元素执行一个函数,但是它们有一些区别,下面这篇文章主要给大家介绍了关于JavaScript中forEach和map详细讲解的相关资料,需要的朋友可以参考下
2023-11-11
微信小程序tabBar用法实例详解
这篇文章主要介绍了微信小程序tabBar用法,结合实例形式详细分析了微信小程序中tabBar的功能、配置项使用方法与操作注意事项,并附带完整demo源码供读者下载参考,需要的朋友可以参考下
2017-12-12
详解javascript传统方法实现异步校验
这篇文章主要为大家介绍了javascript实现异步校验的方法，感兴趣的小伙伴们可以参考一下
2016-01-01