JS实现带鼠标效果的头像及文章列表代码
作者:企鹅 时间:2024-04-22 22:32:09
本文实例讲述了JS实现带鼠标效果的头像及文章列表代码。分享给大家供大家参考。具体如下:
这是一种带图片功能的文章或新闻列表功能,鼠标滑过标题列表显示说明和图片,多见于SNS交友网站,不过你喜欢的话,你完全可以用哦。
运行效果截图如下:
在线演示地址如下:
http://demo.aspxhome.com/js/2015/js-mouse-style-face-article-list-demo/
具体代码如下:
<!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>网罗网络最新flas * 、素材</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="#">flas * </a><span>人气:6456</span></h4>
<p>全国最低价 服务器年付仅2000元</p>
</div>
</dd>
</dl>
</div>
</body>
</html>
希望本文所述对大家的JavaScript程序设计有所帮助。
标签:JS,列表
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
2003年至今网页尺寸增长3倍
2008-04-29 19:27:00
![](https://img.aspxhome.com/file/UploadPic/20084/29/growth-average-web-page-sm_23s.gif)
Python中的上下文管理器和with语句的使用
2021-01-28 00:29:51
查看TensorFlow checkpoint文件中的变量名和对应值方法
2022-07-25 08:50:17
OpenCV Python实现拼图小游戏
2021-07-30 18:10:34
![](https://img.aspxhome.com/file/2023/2/79762_0s.gif)
python可视化大屏库big_screen示例详解
2021-10-16 14:32:39
![](https://img.aspxhome.com/file/2023/7/87487_0s.jpg)
ASP在线转flv+缩略图
2007-08-27 16:18:00
JavaScript组件打包模式
2010-04-08 16:26:00
python编写adb截图工具的实现源码
2021-03-24 08:50:15
![](https://img.aspxhome.com/file/2023/5/77725_0s.png)
python2.7读取文件夹下所有文件名称及内容的方法
2023-12-16 03:27:07
对python mayavi三维绘图的实现详解
2022-04-29 03:17:50
![](https://img.aspxhome.com/file/2023/0/135000_0s.jpg)
js放大缩小容器:仿动画
2008-02-15 11:34:00
Opencv+Python 色彩通道拆分及合并的示例
2021-02-14 10:00:56
![](https://img.aspxhome.com/file/2023/1/127121_0s.jpg)
Python如何在windows环境安装pip及rarfile
2021-01-12 18:00:21
![](https://img.aspxhome.com/file/2023/2/86382_0s.png)
DIV与Table布局在大型网站的可用性比较
2007-10-08 12:46:00
![](https://img.aspxhome.com/file/UploadPic/200710/8/2007108125233616s.jpg)
javascript发表评论或者留言时的展开效果
2024-05-02 17:29:19
Python中文分词实现方法(安装pymmseg)
2023-12-06 02:43:41
Python数据清洗工具之Numpy的基本操作
2023-08-31 02:39:10
![](https://img.aspxhome.com/file/2023/0/66300_0s.png)
Mysql 5.7.17 winx64在win7上的安装教程
2024-01-16 12:16:10
windows下安装php的memcache模块的方法
2023-11-20 05:47:38
![](https://img.aspxhome.com/file/2023/5/104165_0s.png)
python list格式数据excel导出方法
2023-09-19 14:21:01