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 相关文章推荐
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
js制作支付倒计时页面
Oct 21 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 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
WIN98下Apache1.3.14+PHP4.0.4的安装
2006/10/09 PHP
php Smarty模板生成html文档的方法
2010/04/12 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
Python实现查找系统盘中需要找的字符
2015/07/14 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
生产管理的三大手法
2013/11/11 职场文书
一夜的工作教学反思
2014/02/08 职场文书
党校学习自我鉴定
2014/02/24 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
小学生反邪教心得体会
2016/01/15 职场文书