• [javascript]鼠标滑过列表文字显示图片及详细信息


    祝端午节快乐!@&@

    此效果类似于当当网首页右侧的的7日畅销榜,因为工作需要,编写了一个,现分享出来,恐有不足之处,望提出宝贵意见,共同进步!
    此效果的难度,不在js,而在xhtml+css,为了实现代码的最优化和浏览器良好的兼容性,确实花了不少功夫,最后选择使用无序列表ul>li;

    js是封装好的,与文档分离开,同一个页面可以实现多处这样的效果,且互不干扰;

    1.xhtml

    <div id="ranklist">
      <ul class="topcn">
    	<li>
        	<span>1</span>
            <p style="display:none;"><code>2007-2-10</code><a href="#">鼠标滑过列表文字显</a></p>
            <div style="display:block;">
              <a href="#"><img src="images/imgs.jpg" title="图片"/></a>
                <a href="#">鼠标滑过列表文字显示图片及详细信息信息信息</a>
                <em>日增:666</em>
            </div>
        </li>
    	<li>
        	<span>2</span>
            <p><code>2007-2-10</code><a href="#">鼠标滑过列表文字显</a></p>
            <div>
              <a href="#"><img src="images/imgs.jpg" title="图片"/></a>
                <a href="#">鼠标滑过列表文字显示图片及详细信息信息信息</a>
                <em>日增:666</em>
            </div>
        </li>
    	<li>
        	<span>3</span>
            <p><code>2007-2-10</code><a href="#">鼠标滑过列表文字显</a></p>
            <div>
              <a href="#"><img src="images/imgs.jpg" title="图片"/></a>
                <a href="#">鼠标滑过列表文字显示图片及详细信息信息信息</a>
                <em>日增:666</em>
            </div>
        </li>    
      </ul>
    </div>
    

    2.css

    ul,p{ margin:0; padding:0;}
    .topcn{300px;line-height:27px;font-size:12px;}
    .topcn a{font-size:12px;}
    .topcn li{border-bottom:#000 1px dotted;display:inline-block;clear:both;}
    .topcn span{float:left;17px;height:15px;line-height:15px;text-align:center;font-size:9px;font-family: Verdana, Geneva, sans-serif;margin:5px 5px 0 0;background-color:#99C;}
    .topcn p,.topcn div {float:left;278px;}
    .topcn p code {float:right;color:#9f9fa1;}
    .topcn img {67px;height:50px;border:#000 1px solid;float:left;margin:3px 10px 0 0;display:inline; background-color: #CCF;}
    .topcn em {display:block;color:#919b9d;}
    .topcn div{line-height:19px; padding-bottom:5px; display:none;}
    

    3.js

    function ranklist(id,ele,elename,elechild,start_ele,cur_ele){
    	var obj_id=document.getElementById(id);
    	var obj_ele=$tag(obj_id,ele);
    	for(i=0;i<obj_ele.length;i++){
    		if(obj_ele[i].className.indexOf(elename) == -1) continue;
    		var objlist=$tag(obj_ele[i],elechild);
    		for(j=0;j<objlist.length;j++){
    			objlist[j].onmouseover=function(){
    				var paris=this.parentNode;
    				var list=$tag(paris,elechild);
    				for(x=0;x<list.length;x++){
    					var thisdiv=$tag(list[x],cur_ele)[0];
    					var thisp=$tag(list[x],start_ele)[0];
    					thisdiv.style.display="none";
    					thisp.style.display="block";
    					}
    				var start=$tag(this,start_ele)[0];
    				start.style.display='none';
    				var cur=$tag(this,cur_ele)[0];
    				cur.style.display='block';
    			}
    		}
    	}
    }
    function $tag(id,tag){return id.getElementsByTagName(tag);}
    setTimeout("ranklist('ranklist','ul','topcn','li','p','div')",0);
    /*参数解释:
    ranklist:为了缩小函数在文档中搜寻对象的范围,给其设置了一个id参数;
    ul:在搜寻范围内遍历ul元素列表;这是ele参数,为了排除与效果无关的ul元素;给其添加了类topcn,这是elename参数;
    在指定的ul中遍历li列表元素;鼠标经过li元素会有相应的事件产生;
    p:为文字列表行;
    div:是显示的详细信息区域;
    */
    

    效果展示

  • 相关阅读:
    WIN10修改桌面路径到(其他盘)教程
    C#通过IMessageFilter捕获鼠标消息
    C# ICON和Image互转
    由于找不到 opencv_world320.dll,无法继续执行代
    HttpWebRequest.Connection的问题
    远程服务器环境调用本地JS启动摄像头功能遇见的问题
    nginx反向代理配置
    获取开源天气信息的API
    Java实现八种排序算法(代码详细解释)
    Java面试之前复习总结(二)
  • 原文地址:https://www.cnblogs.com/fengfan/p/1757675.html
Copyright © 2020-2023  润新知