首页 > 代码库 > js鼠标滑动图片显示隐藏效果
js鼠标滑动图片显示隐藏效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> <head> <!--声明当前页面的编码集charset=gbk中文编码gb2312,charset=utf-8国际编码--> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <!--当前页面的三要素--> <title>js滑动图片显示和隐藏效果</title> <meta name="Keywords" content="js滑动,图片显示"> <meta name="description" content="描述"> <!--css 内部样式 , js--> <style type="text/css"> *{margin:0px; padding:0px;} /*属性:值; width:300px; 像素 */ #News{width:300px; height:305px;border:1px solid #ddd; margin:50px auto;} /*list-style-type:none; 去掉前面的圆点*/ #News ul li{list-style-type:none;padding:0px 10px 0px 10px;} #News ul li a{color:#2d2d2d; font-family:"微软雅黑";font-size:14px; text-decoration:none;/*去掉下划线*/} #News ul li a:hover{color:#eb1c24;text-decoration:underline;} #News ul li span a{color:#726168;} #News ul li span a:hover{color:#eb1c24;} #News ul li p{line-height:30px;} #News ul li img{display:none;/*隐藏图片*/} #News ul li img.xs{display:block;/*显示第一图片*/} #News ul li.bg{background:url("images/bg.png"); padding-bottom:15px;} #News ul li span.hover a{color:#eb1c24;} </style> </head> <body><!--div盒子模型，宽度，高度 放内容--> <div id="News"> <ul> <li class="bg"> <p><span class="hover"><a href=http://www.mamicode.com/"#">[时装频道]</a></span> <a href=http://www.mamicode.com/"#">2014秋冬巴黎时装周</a></p> <img src=http://www.mamicode.com/"images/1.jpg" class="xs"/> </li> <li><p><span><a href=http://www.mamicode.com/"#">[男装频道]</a></span> <a href=http://www.mamicode.com/"#">穿出Street Fashion</a></p> <img src=http://www.mamicode.com/"images/2.jpg"/> </li> <li><p><span><a href=http://www.mamicode.com/"#">[时装频道]</a></span> <a href=http://www.mamicode.com/"#">2014秋冬巴黎时装周</a></p> <img src=http://www.mamicode.com/"images/3.jpg"/> </li> <li> <p> <span><a href=http://www.mamicode.com/"#">[时装频道]</a></span> <a href=http://www.mamicode.com/"#">2014秋冬米兰时装周</a> </p> <img src=http://www.mamicode.com/"images/4.jpg"/> </li> </ul> </div> <!-- <script src=http://www.mamicode.com/"http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> --><script type="text/javascript">window.onload=function(){ var oNews = document.getElementById(‘News‘); var oLi = oNews.getElementsByTagName(‘li‘); var oimg = document.getElementsByTagName(‘img‘); var ospan = document.getElementsByTagName(‘span‘); for(var i=0;i<oLi.length;i++){ oLi[i].index=i; oLi[i].onmouseover=function(){ for(var i=0;i<oLi.length;i++){ oLi[i].className=‘‘; oimg[i].style.display=‘none‘; ospan[i].className=‘‘; } this.className=‘bg‘; if(this.className=‘bg‘){ ospan[this.index].className=‘hover‘; oimg[this.index].style.display=‘block‘; } } } }</script> </body></html>
js鼠标滑动图片显示隐藏效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。