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中的html(),text(),val()区别
Sep 01 Javascript
Node.js的包详细介绍
Jan 14 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
js 概率计算(简单版)
Sep 12 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
Aug 08 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几个数学计算的内部函数学习整理
2011/08/06 PHP
10个实用的PHP代码片段
2011/09/02 PHP
如何判断php数组的维度
2013/06/10 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
php防止sql注入简单分析
2015/03/18 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
jquery 插件学习(六)
2012/08/06 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
用Python写的图片蜘蛛人代码
2012/08/27 Python
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
六月份红领巾广播稿
2014/02/03 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
2015年材料员工作总结
2015/04/30 职场文书
小人国观后感
2015/06/11 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
python 爬取吉首大学网站成绩单
2021/06/02 Python
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers
APP界面设计技巧和注意事项
2022/04/29 杂记