JS实现带鼠标效果的头像及文章列表代码

本文实例讲述了射流研究…实现带鼠标效果的头像及文章列表代码。分享给大家供大家参考。具体如下：

这是一种带图片功能的文章或新闻列表功能，鼠标滑过标题列表显示说明和图片，多见于社交网站(社交网站的缩写)交友网站，不过你喜欢的话，你完全可以用哦。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-鼠标-样式-人脸-文章-列表-演示/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题鼠标滑过标题列表显示说明和图片/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式类型=' text/CSS ' * { margin :0；划水：0;font:normal 12px宋体；}.包装{ width :300 px h8 : auto飞越：隐藏；border:1px实心# fdd78d背景# ffecc 6 padd :5 px }/*平常的状态*/dl {宽度：100%；高度：自动清除：两者飞越：隐藏；margin :8 px 0px 8px 0px } dl dt { display : none } dl DD { dl DD } strong { float : left；右边距：5 px} dl dd div { float:left宽度宽度：270像素列表样式-:型无；} dl DD div H4 { clear : both font-weight : normal } dl DD div H4 a { float : left；color : # 795601 font-size :12 px；字体粗细：正常；文本装饰：无；} dl DD div H4 a :悬停{ color : # f00文本修饰：下划线；} dl DD div H4 span { float : right；宽度：75 px} dl dd div p { display:none}/*鼠标划过的状态*/dl。超过{ clear :两者；高度height:55pxpadding:5px背景-color : # fffbf 4；} dl。越过dt { float :右侧；显示：块；} dl。越过dt img {边框33601 px实心# CCCpadding:1px背景# fff} dl。越过DD {向左浮动：} dl。over DD strong { font-size :28 px；颜色：红色垂直对齐：顶；} dl。在DD div上方{左侧浮动：宽度宽度：195px} dl。越过DD div H4 {清除：两者；字体粗细：正常} dl。越过DD div H4 a { color : # b 34408；} dl。悬停在DD div H4 a :上方{ color : # f00文本修饰：下划线；} dl。在DD div H4跨度{ float :右侧；} dl。超过DD div p { clear :两者；显示：块；页边距-顶部：5 px}/style脚本语言=' JavaScript '窗口。onload=function(){ var dl=document。getelementsbytagname(' dl ')；if(dl.length1)返回false for(var I=0；idl.lengthi ){ //初始化，让第一个类为过if(dl[I]。类名。indexof(' over ')==-1){ dl[0].类名=' over} //遍历循环，模拟：悬停伪类dl[i].onmouseover=function(){ for(var j=0；jdl.lengthj ){ dl[j].class name=} this . class name=' over } } }/script/head dydiv class=' wrapper ' dl dtimg src=' http : images/get face。jpg '/dt DD strong 01/strong H4分公司人气：19045/spana href='# '酷站展示/a/h4 p300M独立互联网协议(互联网协议)双线空间100元/年/p/div/DD/dl dl dtimg src=' http : images/get face。jpg '/dt DD strong 02/strong H4分公司人气：34534/spana href='# '视频教程/a/h4 p1G全能空间仅99元免备案/p/div/DD/dl dl dtimg src=' http : images/get face。jpg '/dt DD strong 03/strong H4分公司人气：79789/spana href='# '正在加载素材/a/h4 p网罗网络最新闪光动画、素材/p/div/DD/dl dl dtimg src=' http : images/get face。jpg '/dt DD strong 04/strong H4分公司人气：4323/spana href='# '闪光灯片头/a/h4 p企业建网站100元起，送源码/p/div/DD/dl dl dtimg src=' http : images/get face。jpg '/dt DD strong 05/strong div h4a href=' # ' flash动画/aspan人气：6456/span/h4 p全国最低价服务器年付仅2000元/p /div /dd /dl/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。