asp.net 仿京东商城商品分类效果

当鼠标悬上去后，显示分类类表

解决方案 »

  1.   

    实现这个效果有恨多种方式，比如： 设置div的隐藏和现实，先将数据完全绑定好，然后用js控制，当鼠标悬上去后，显示分类类表
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <style>
    #hint{
    width:198px;
    border:1px solid #000000;
    background:#99ff33;
    position:absolute;
    z-index:9;
    padding:6px;
    line-height:17px;
    text-align:left;
    top: 1520px;
    }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
        function showme() {
            var oSon = window.document.getElementById("hint");
            if (oSon == null) return;
            with (oSon) {
                innerText = guoguo.value;
                style.display = "block";
                style.pixelLeft = window.event.clientX + window.document.body.scrollLeft + 6;
                style.pixelTop = window.event.clientY + window.document.body.scrollTop + 9;
            }
        }
        function hidme() {
            var oSon = window.document.getElementById("hint");
            if (oSon == null) return;
            oSon.style.display = "none";
        }
    //-->
    </SCRIPT>
    <BODY>
    <text id=guoguo value=ga>
    <a href=# onmouseover=showme() onmouseout=hidme() onmousemove=showme() son=hint>dfdfd</a>
    <div id=hint style="display:none"></div>
    </BODY>
    </HTML>
      

  3.   


    Jquery包文件及样式下载 具体效果可参考京东商城商品图片展示
    第一步:需要导入Jquery包文件和样式文件（放在<head></head>中间）：
    <script src="jquery/jquery-1.2.6.pack.js" type="text/javascript"></script>
    <%--Jquery基础包 1.2.6版本--%>
    <script src="jquery/jquery.jcarousel.js" type="text/javascript"></script>
    <%--底部小图左右滚动脚本--%>
    <script src="jquery/jquery.jqzoom.js" type="text/javascript"></script>
    <%--放大镜效果脚本--%>
    <link href="Style/jqzoom.css" rel="stylesheet" type="text/css" />
    <%--放大镜效果样式--%>
    <link href="Style/jcarousel.css" rel="stylesheet" type="text/css" />
    <%--
    底部左右滚动图片样式 此样式表中样式需根据实际需要进行调整
    关键的是以下几个样式的width，height，padding，margin的数值
    .jcarousel-skin-tango .jcarousel-container-horizontal ｛｝
    .jcarousel-skin-tango .jcarousel-container-vertical {}
    .jcarousel-skin-tango .jcarousel-clip-horizontal {}
    .jcarousel-skin-tango .jcarousel-clip-vertical {}
    --%>第二步：添加相关 20989;数方法（放在<head></head>中间）：<script type="text/javascript">
    //作为页面onload事件当页面加载时将底部小图片加载到上面大的div中
            function attachImgEventListener() {
                var imageArray = document.getElementById("mycarousel").getElementsByTagName("img");
                if (imageArray.length == 0) {
                    document.getElementById("PicBig").src = "Image/Blank.gif";
                    document.getElementById("Product_BigImage").jqimg = document.getElementById("PicBig").src;
                    document.getElementById("Product_LittleImage").style.display = "none";
                }
                else {
                    document.getElementById("PicBig").src = imageArray[0].src;
                    document.getElementById("PicBig").jqimg = imageArray[0].src;
                }
            }
        </script>    <script type="text/j
      

  4.   

    可以使用 listview 控件要不就是利用表格+div+js
      

  5.   

    http://www.360buy.com/products/652-830-860.html
    类似 京东的产品筛选   功能那个 高手做过啊 ，。帮忙谢谢 。