尊敬的客户您好,经我们多年的网站制作、网络营销经验,请建站和优化同时做,以达到最好的推广效果!----创赢网络 2012-06
加入收藏设为首页
  • [2013-8-7]洛阳贷款 洛阳小额贷款公司网站上线
  • [2013-8-4]洛阳开锁公司 洛阳开锁电话优化
  • [2013-5-25]洛阳聚鑫钢绳有限公司网站上线
  • [2013-5-20]吉利区图书馆网站备案通过上线开通
  • [2013-5-13]洛阳旭晋昇商贸有限公司 食品批发零售
  • [2013-4-14]洛阳市建投节能技术服务有限公司 新版上线
  • [2013-4-11]南阳顽石玉器工作室网站上线
  • ------专业网站设计制作、网站排名优化、建设一流品牌!
    新闻正文 ·您的位置:首页 > 新闻中心 > 技术中心 > 查看新闻

    仿迅雷今日看点效果代码分享

    作者:redroom  来源:redroom  发表时间:2009-9-8 20:41:20  点击:5939

    仿迅雷今日看点效果代码分享

    以下是引用片段:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=gb2312" />
    <meta http-equiv="content-language" content="zh-cn" />
    <meta name="robots" content="all" />
    <meta name="keywords" content="关键字描述" />
    <meta name="description" content="站点描述" />
    <meta name="author" content="顾振宇,zy.e@163.com" />
    <meta name="copyright" content="版权所有" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="bookmark" href="/favicon.ico" type="image/x-icon" />
    <title></title>
    <style type="text/css">
    <!--
    *{margin:0;padding:0;}
    img{border:0;}
    body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;}
    .clearfix:after{content:"&nbsp;";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*display:inline-block;}
    .br{ word-break: break-all; word-wrap: break-word;}
    a:link{ color:#000; text-decoration:none; }
    a:visited{ color:#000; text-decoration:none; }
    a:hover{ color:#000; text-decoration:underline; }
    .picshow{ width: 450px; padding: 10px; margin: 20px; border: 1px solid #eee; position: relative; background: #f5f5f5;}
    .picshow h2{ font-size: 14px; padding: 3px; }
    .picshow h3{ font-size: 12px;padding: 3px; }
    .picshow dl{ margin: 5px 0; }
    .picshow dl dt {  width: 364px;height: 186px; display: block; overflow: hidden;}
    .picshow dl dt div{ width: 364px;}
    .picshow dl dt div a{ float: left;}
    .picshow dl dt div a img{ display: block;}
    .picshow dl dd{ height: 46px; overflow: hidden; }
    .picshow dl dd div{ }
    .picshow dl dd{ margin-top: 10px; line-height: 20px;}
    .picshow dl dd a:link,.picshow dl dd a:visited{ color: green; text-decoration: underline; }
    .picshow dl dd a:hover{ color: maroon; }
    .picsel{width: 80px; height: 177px; padding-top:9px; overflow: hidden; position: absolute; right: 9px; top: 37px; background: url(http://home.blueidea.com/attachment/200908/11/285026_1249973332Fu66.png) no-repeat; }
    .picsel span{ display: block;width: 78px; height: 8px; overflow: hidden;}
    .picsel a{ display: block; height: 42px;text-align: center; overflow: hidden;}
    .picsel a img{ margin-top: 1px;}
    .selbg{ background: #4682b4;}
    .pre{ background:#edf6ff url(http://home.blueidea.com/attachment/200908/11/285026_1249973331sHt6.gif) no-repeat; position: absolute;z-index: 1; top: 0; left: 1px;border-top: 1px solid #d6e5f5; }
    .pre2{ background:#edf6ff url(http://home.blueidea.com/attachment/200908/11/285026_1249973331sHt6.gif) 0 -18px no-repeat;position: absolute;z-index: 1; top: 0; left: 1px;border-top: 1px solid #d6e5f5; cursor: pointer; }
    .next{ background:#edf6ff url(http://home.blueidea.com/attachment/200908/11/285026_1249973331sHt6.gif) 0 -9px no-repeat;  position: absolute; z-index: 1; bottom: 0; left: 1px;border-bottom: 1px solid #d6e5f5; cursor: pointer; }
    .next2{ background:#edf6ff url(http://home.blueidea.com/attachment/200908/11/285026_1249973331sHt6.gif) 0 -27px no-repeat; position: absolute; z-index: 1; bottom: 0; left: 1px;border-bottom: 1px solid #d6e5f5;}
    .seltype{ position: relative; z-index: 0; width: 78px; float: left; margin: 0 1px 0 1px;}
    -->
    </style>
    </head>
    <body>
    <div class="picshow">
    <h2>今日看点</h2>
    <div class="picsel">
    <span id="pre" class="pre"></span>
    <span id="next" class="next2"></span>
    <div id="picsel" class="seltype">
    <a href=""><img alt="" src="http://images.movie.xunlei.com/gallery/553/1bea477d1e3d2ff44d01121a989c02c5.jpg" /></a>
    <a href=""><img alt="" src="http://images.movie.xunlei.com/gallery/553/8dc8f0a4857b66af1f10cf01cbf9e713.jpg" /></a>
    <a href=""><img alt="" src="http://images.movie.xunlei.com/gallery/553/f993f1f47dfa8f2b2f553fd5d43a184e.jpg" /></a>
    <a href=""><img alt="" src="http://images.movie.xunlei.com/gallery/553/a71b4f698b329986d9bdaea8e1697197.jpg" /></a>
    <a href=""><img alt="" src="http://images.movie.xunlei.com/gallery/553/77e7ec3a6fc65aa327948c56c0b97189.jpg" /></a>
    <a href=""><img alt="" src="http://images.movie.xunlei.com/gallery/553/39425881e32cbb61ded0e80ba2ab4463.jpg" /></a>
    </div>
    </div>
    <dl>
    <dt><div id="pictype">
    <a href=""><img alt="" src="http://images.movie.xunlei.com/gallery/553/d594540ef8c9899804e909ce47860065.jpg" /></a>
    <a href=""><img alt="" src="http://images.movie.xunlei.com/gallery/553/07373cc25309850d32728dcb6a536e3f.jpg" /></a>
    <a href=""><img alt="" src="http://images.movie.xunlei.com/gallery/553/681cad85b4ad73cf215eafe721a93ecd.jpg" /></a>
    <a href=""><img alt="" src="http://images.movie.xunlei.com/gallery/553/c699bd9b6567f55e29088615b61e1b89.jpg" /></a>
    <a href=""><img alt="" src="http://images.movie.xunlei.com/gallery/553/15fb84e7634425c050fbb9096520c869.jpg" /></a>
    <a href=""><img alt="" src="http://images.movie.xunlei.com/gallery/553/cb865b4c3c82c496118e7a1d3c284525.jpg" /></a>
    </div></dt>
    <dd><div id="txttype">
    <h3><a href="">【A佳片点播】《GOTH断掌事件》根据日本著名小说家乙一同名作品改编</a></h3>影片以精美而别致的色调 展现出了暗黑世界背面青春期少年少女纤细的内心...
    <h3><a href="">【B荧屏热播】《珠光宝气》TVB年度大戏、黎姿收山之作</a></h3>影射香港豪门真人真事 展示过亿珠宝、华丽服饰,三姐妹上演无休止的勾心斗角...
    <h3><a href="">【C游戏下载】《迅雷问鼎》客户端,赢PSP3000,哄抢香港豪华游资格!</a></h3>大胆出位玩网游!今年夏天玩什么?玩真人“宝宝” 5P连环出战!
    <h3><a href="">【D新片首播】《暴力街区13:终极》倍受期待法国动作大片最新续作.</a></h3>“跑酷”运动创始者大卫·贝尔与动作巨星塞瑞尔·拉菲利继续联手出演该片新作...
    <h3><a href="">【E时尚男装】凡客诚品打造极限购物体验,全场免运费.</a></h3>经典免烫全棉短袖衬衫任选四件仅售199元,立即体验!...
    <h3><a href="">【F快乐剧场】《龙之战争》龙与巨蟒混合而成的未知生物入侵地球</a></h3>火爆大片一网尽,精彩大奖任你寻,我们的快乐宣言,尽在康师傅剧场...
    </div></dd>
    </dl>
    </div>
    <script type="text/javascript">
    var pre = document.getElementById("pre");
    var next = document.getElementById("next");
    var picsel = document.getElementById("picsel");
    var pictype = document.getElementById("pictype");
    var txttype = document.getElementById("txttype");
    var ashover = picsel.getElementsByTagName("a");
    var imgshover = picsel.getElementsByTagName("img");
    var astype = pictype.getElementsByTagName("a");
    var h3type = txttype.getElementsByTagName("h3");
    /*alert(txttype.offsetHeight)*/
    var y = 42;
    var t = 46;
    var n = 186;
    var q = 0;
    var x = 4;
    var sel_num = picsel.offsetHeight/y;
    var z = sel_num - 4;
    if(sel_num > 4)
    {next.className = "next";}
    next.onclick = adda;
    function adda()
    {
     if(sel_num > 4)
     { 
      var w = 0;
      var o = -y*q;
      x++;
      pre.className = "pre2";
      if(q == 0 || q > 0)
      {q++;}
      
      var ssw = setInterval(show_w,10);
     }
     
     function show_w()
     {
      if(q < z || q == z)
      {
       w-=3;
       picsel.style.marginTop = (o + w) + "px";
       /*picsel.setAttribute("style","margin-top:" + (o + w) + "px;");*/
      }
        
      if(w < -y+1)
      {
       clearInterval(ssw);
      }
      if(q > z)
      {q = z;clearInterval(ssw);}
     }
     if(x-sel_num == 0)
      {next.className = "next2";}
     if(x-sel_num > 0)
      {x = sel_num;}
    }
    pre.onclick = addb;
    function addb()
    {
     if(x > 4)
     {
      var w = 0;
      var o = -y*q;
      x--;
      next.className = "next"
      q--;
      var sswb = setInterval(show_wb,10);
      
     }
     
      function show_wb()
      {
       if(q < z || q == z)
       {
        w-=3;
        picsel.style.marginTop = (o + -w) + "px";
       }
        
        if(w < -y+1)
        {
         clearInterval(sswb);
        }
          
      }
     if(x == 4)
     {pre.className = "pre";next.className = "next";}
    }
    /* ------ */
    for(i = 0; i < astype.length; i++)
    {
     astype[i].num = i;
     astype[i].onmouseover = addstyle;
    }/* 鼠标移入大图-同步小图样式 */
    function addstyle()
    {
     for(i = 0; i < ashover.length; i++)
     {
      ashover[i].className = "";
     }
     ashover[this.num].className = "selbg"
    }
    for(i = 0; i < imgshover.length; i++)
    {
     imgshover[i].num = i;
     imgshover[i].onmouseover = typestyle;
    }/* 大图/文字显示 */
    function typestyle()
    {
     for(i = 0; i < ashover.length; i++)
     {
      ashover[i].className = "";
     }
     ashover[this.num].className = "selbg";
     
     var s = this.num
     var o = -n*s;
     pictype.style.marginTop = o + "px";
     
     var v = -t*s;
     txttype.style.marginTop = v + "px";
    /* alert(v)*/
    }
    </script>
    </body>
    </html>

    代码有点乱了。

    您的需求

    联系我们

    正确的选择

    金亚洲安全吗