JS实现带鼠标效果的头像及文章列表代码_javascript技巧
本文实例讲述了JS实现带鼠标效果的头像及文章列表代码。分享给大家供大家参考。具体如下：
这是一种带图片功能的文章或新闻列表功能，鼠标滑过标题列表显示说明和图片，多见于SNS交友网站，不过你喜欢的话，你完全可以用哦。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/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="/static/imghw/default1.png" data-src="images/getface.jpg" class="lazy" alt="JS实现带鼠标效果的头像及文章列表代码_javascript技巧" ></dt>
<dd>
<strong>01</strong>
<div>
<h4 id="span-人气-span-a-href-酷站展示-a"><span>人气：19045</span><a href="#">酷站展示</a></h4>
<p>300M独立IP双线空间 100元/年</p>
</div>
</dd>
</dl>
<dl>
<dt><img src="/static/imghw/default1.png" data-src="images/getface.jpg" class="lazy" alt="JS实现带鼠标效果的头像及文章列表代码_javascript技巧" ></dt>
<dd>
<strong>02</strong>
<div>
<h4 id="span-人气-span-a-href-视频教程-a"><span>人气：34534</span><a href="#">视频教程</a></h4>
<p>1G全能空间仅99元 免备案</p>
</div>
</dd>
</dl>
<dl>
<dt><img src="/static/imghw/default1.png" data-src="images/getface.jpg" class="lazy" alt="JS实现带鼠标效果的头像及文章列表代码_javascript技巧" ></dt>
<dd>
<strong>03</strong>
<div>
<h4 id="span-人气-span-a-href-loading素材-a"><span>人气：79789</span><a href="#">loading素材</a></h4>
<p>网罗网络最新flash动画、素材</p>
</div>
</dd>
</dl>
<dl>
<dt><img src="/static/imghw/default1.png" data-src="images/getface.jpg" class="lazy" alt="JS实现带鼠标效果的头像及文章列表代码_javascript技巧" ></dt>
<dd>
<strong>04</strong>
<div>
<h4 id="span-人气-span-a-href-flash片头-a"><span>人气：4323</span><a href="#">flash片头</a></h4>
<p>企业建网站100元起,送源码</p>
</div>
</dd>
</dl>
<dl>
<dt><img src="/static/imghw/default1.png" data-src="images/getface.jpg" class="lazy" alt="JS实现带鼠标效果的头像及文章列表代码_javascript技巧" ></dt>
<dd>
<strong>05</strong>
<div>
<h4 id="a-href-flash动画-a-span-人气-span"><a href="#">flash动画</a><span>人气：6456</span></h4>
<p>全国最低价 服务器年付仅2000元</p>
</div>
</dd>
</dl>
</div>
</body>
</html>希望本文所述对大家的JavaScript程序设计有所帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
恢复win11默认头像的教程
Jan 02, 2024 pm 12:43 PM
如果我们更换了自己的系统账户头像，但是不想要了，结果找不到win11怎么更改默认头像了，其实我们只要找到默认头像的文件夹就可以恢复了。win11头像恢复默认1、首先点开底部任务栏的“Windows徽标”2、接着在其中找到并打开“设置”3、然后进入左边栏的“账户”4、随后点开右侧的“账户信息”5、打开后，点击选择照片中的“浏览文件”6、最后进入“C:\ProgramData\Microsoft\UserAccountPictures”路径就可以找到系统默认头像图片了。
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
如何使用PHP和JS创建股票蜡烛图
Dec 17, 2023 am 08:08 AM
如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤
Dec 17, 2023 pm 06:55 PM
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的
今日头条发布文章怎么才能有收益？今日头条发布文章获得更多收益方法！
Mar 15, 2024 pm 04:13 PM
一、今日头条发布文章怎么才能有收益？今日头条发布文章获得更多收益方法！1.开通基础权益：原创文章选择投放广告可获得收益，视频必须要原创横屏才会有收益。2.开通百粉权益：粉丝量达到百粉以上，微头条、原创问答创作及问答均可获得收益。3.坚持原创作品：原创作品包含文章、微头条及问题等，要求300字以上。注意违规抄袭作品作为原创发布，会被扣信用分，即使有收益也会被扣除。4.垂直度：做专业领域一类的文章，不能随意跨领域写文章，会得不到合适的推荐，达不到作品的专和精，难以吸引粉丝读者。5.活跃度：活跃度高，
Win10如何更改账户名称和头像-详细步骤指南
Jan 14, 2024 pm 01:45 PM
注册了win10的账户之后，有很多的小伙伴觉得自己的头像都是默认的不是很好看，为此想要去改头像，下面就带来了更改头像的教程，想知道的可以来一起看看。win10账户名称怎么改头像：1、首先点击左下角开始。2、然后在弹出的菜单中点击上面的头像。3、进入之后点击“更改账户设置”。4、然后点击头像下面的“浏览”。5、找到自己想作为头像的照片进行选择。6、最后即可成功的修改完成。
创建杂货清单的方法：使用 iPhone 的'提醒事项”App
Dec 01, 2023 pm 03:37 PM
在iOS17中，Apple在提醒应用程序中添加了一个方便的小列表功能，以便在您外出购买杂货时为您提供帮助。继续阅读以了解如何使用它并缩短您的商店之旅。当您使用新的“杂货”列表类型（在美国以外名为“购物”）创建列表时，您可以输入各种食品和杂物，并按类别自动组织它们。该组织使您在杂货店或外出购物时更容易找到您需要的东西。提醒中可用的类别类型包括农产品、面包和谷物、冷冻食品、零食和糖果、肉类、乳制品、鸡蛋和奶酪、烘焙食品、烘焙食品、家居用品、个人护理和健康以及葡萄酒、啤酒和烈酒。以下是在iOS17中创
PHP与JS开发技巧：掌握绘制股票蜡烛图的方法
Dec 18, 2023 pm 03:39 PM
随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人
