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 相关文章推荐
理解JavaScript变量作用域更轻松
Oct 25 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
简单实现js点击展开二级菜单功能
May 16 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 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中加session验证)
2012/08/22 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
Python操作Access数据库基本步骤分析
2016/09/19 Python
python数据处理实战(必看篇)
2017/06/11 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
详解Python3 基本数据类型
2019/04/19 Python
python能开发游戏吗
2020/06/11 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
php优化查询foreach代码实例讲解
2021/03/24 PHP
毕业生自我鉴定范文
2013/11/08 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
投资意向书范本
2014/04/01 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL