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实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
浅谈如何通过node.js对数据进行MD5加密
May 16 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 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
收音机指标测试方法及仪器
2021/03/01 无线电
php curl基本操作详解
2013/07/23 PHP
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
基于JQuery的多标签实现代码
2012/09/19 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
用vue封装插件并发布到npm的方法步骤
2017/10/18 Javascript
Vue异步加载about组件
2017/10/31 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
简化版的vue-router实现思路详解
2018/10/19 Javascript
vue生命周期的探索
2019/04/03 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
python 文件转成16进制数组的实例
2018/07/09 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
python图片合成的示例
2020/11/09 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
linux系统下pip升级报错的解决方法
2021/01/31 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
设计师求职信模板
2014/05/06 职场文书
个人承诺书怎么写
2014/05/24 职场文书
ktv好的活动方案
2014/08/15 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
2014广电局实施党的群众路线教育实践活动方案思想汇报
2014/09/22 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers