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代码)
Apr 11 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
webpack配置文件和常用配置项介绍
Apr 28 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
js实现无缝轮播图效果
Mar 09 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 Undefined index的问题
2009/06/01 PHP
php简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
JavaScript错误处理操作实例详解
2019/01/04 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
用Python输出一个杨辉三角的例子
2014/06/13 Python
Python素数检测实例分析
2015/06/15 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
Python爬虫文件下载图文教程
2018/12/23 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
火山动力Java笔试题
2014/06/26 面试题
各营销点岗位职责范本
2014/03/05 职场文书
运动会口号大全
2014/06/07 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书