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函数作用域学习示例(js作用域)
Jan 13 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 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连接access数据库
2008/03/27 PHP
PHP array_push 数组函数
2009/12/26 PHP
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
详解php中 === 的使用
2016/10/24 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
Python3.2模拟实现webqq登录
2016/02/15 Python
python实现用户登录系统
2016/05/21 Python
Python实现选择排序
2017/06/04 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
大学生收银员求职信分享
2014/01/02 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL