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


Posted in Javascript onSeptember 27, 2015

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

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

运行效果截图如下:

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>
<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程序设计有所帮助。

Javascript 相关文章推荐
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
Sep 04 Javascript
vue中可编辑树状表格的实现代码
Oct 31 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 #Javascript
AngularJS基础教程之简单介绍
Sep 27 #Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 #Javascript
浅谈javascript的Touch事件
Sep 27 #Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 #Javascript
浅谈Javascript中Object与Function对象
Sep 26 #Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 #Javascript
You might like
用PHP来写记数器(详细介绍)
2006/10/09 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
treepanel动态加载数据实现代码
2012/12/15 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
python生成密码字典的方法
2018/07/06 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
如何利用Python模拟GitHub登录详解
2019/07/15 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
python打包多类型文件的操作方法
2020/09/21 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
财务会计毕业生个人求职信
2014/02/03 职场文书
中层干部培训方案
2014/06/16 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
入股协议书范本
2014/11/01 职场文书
家长通知书家长意见
2015/06/03 职场文书
小学信息技术教学反思
2016/02/16 职场文书
高三化学教学反思
2016/02/22 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
利用Python脚本写端口扫描器socket,python-nmap
2022/07/23 Python