全球主机交流论坛

标题: 哪位神能提取这个页面左侧的漂浮啊! [打印本页]
作者: 难人    时间: 2013-6-18 16:32
标题: 哪位神能提取这个页面左侧的漂浮啊!
http://sale.jd.com/act/2gHcKJzR4Y.html
京东促销页面左面的那个漂浮特效!!
提取了一下午,不得其法啊
作者: 用户名    时间: 2013-6-18 16:36
这个很难?
作者: qy117121    时间: 2013-6-18 16:37
额   
作者: nswdhy    时间: 2013-6-18 16:42
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>
  6.                         618老刘专场 - 京东商城
  7.         </title>
  8. <link rel="stylesheet" type="text/css" />

  10. <style type="text/css">
  11.         .single-place{position:absolute;bottom:0;left:0;}

  13. /*左右栏布局*/
  14. .right-left-mid-lay{overflow:hidden;zoom:1;}
  15. .right-left-left{width:190px;float:left;overflow:hidden;height:200px;margin-right:7px;padding-bottom:12px;position:relative;}
  16. .right-left-right-extra{float:right;width:789px;overflow:hidden;position:relative;padding-bottom:10px;height:200px;}
  17. .right-left-place{position:absolute;bottom:0;left:0;}
  18. /*左右栏布局*/
  19. .jBannerHtml-86749 {overflow:hidden;}
  20. .jBannerHtml-86749 .jbannerImg{position:relative; overflow:hidden; height:200px; margin:0 auto;}
  21. .jBannerHtml-86749 .jbannerImg .item{display:none;}
  22. .jBannerHtml-86749 .jbannerImg .item.show{display:block;}
  23. .jBannerHtml-86749 .jbannerTab{overflow:hidden; text-align:center; padding:10px 5px 0 10px;}
  24. .jBannerHtml-86749 .jbannerTab ul{}
  25. .jBannerHtml-86749 .jbannerTab li{float:left; margin-right:5px; cursor:pointer;}
  26. .jBannerHtml-86749 .jbannerTab span{width:234px; height:68px; display:block; text-indent:-9999px;}
  27. .jBannerHtml-86749 .jbannerTab span.a1{background-image:url([img]http://img13.360buyimg.com/cms/g15/M04/00/14/rBEhWVG0RLgIAAAAAABPKUJBJSYAAAH9AFTGGcAAE9B073.png[/img]);}
  28. .jBannerHtml-86749 .jbannerTab span.a1.show{background-image:url([img]http://img13.360buyimg.com/cms/g13/M06/00/14/rBEhUlG0RMgIAAAAAABJ3AWkE3wAAAH4gFAfSoAAEn0978.png[/img]);}
  29. .jBannerHtml-86749 .jbannerTab span.a2{width:269px; background-image:url([img]http://img14.360buyimg.com/cms/g13/M05/00/14/rBEhUlG0RL4IAAAAAABXrs78Dy0AAAH4QP-qpgAAFfG364.png[/img]);}
  30. .jBannerHtml-86749 .jbannerTab span.a2.show{background-image:url([img]http://img14.360buyimg.com/cms/g13/M06/00/14/rBEhUlG0RM0IAAAAAABRgGQyarEAAAH4gIN04AAAFGY714.png[/img]);}
  31. .jBannerHtml-86749 .jbannerTab span.a3{background-image:url([img]http://img12.360buyimg.com/cms/g13/M06/00/14/rBEhU1G0RMMIAAAAAABOuqCdf3AAAAH4gCVrFoAAE7S295.png[/img]);}
  32. .jBannerHtml-86749 .jbannerTab span.a3.show{background-image:url([img]http://img11.360buyimg.com/cms/g15/M04/00/14/rBEhWFG0RNgIAAAAAABI-aKywicAAAH9ALQWVQAAEkR690.png[/img]);}
  33. .jLimitTimeBuy-87184 {clear:both; overflow:hidden;}
  34. .jLimitTimeBuy-87184 .mt{}
  35. .jLimitTimeBuy-87184 .mc{}
  36. .jLimitTimeBuy-87184 ul{}
  37. .jLimitTimeBuy-87184 li{border:solid 1px #9f0b15; overflow:hidden;}
  38. .jLimitTimeBuy-87184 .jItem{padding:2px; border:solid 1px #fc3544; background:#c81623;}
  39. .jLimitTimeBuy-87184 .jPic{background:#fff url([img]http://img14.360buyimg.com/cms/g12/M00/0B/0C/rBEQYVGlY3wIAAAAAAALYqBk364AACOWgFul-wAAAt6568.png[/img]) right bottom no-repeat; text-align:center; position:relative;}
  40. .jLimitTimeBuy-87184 .jPic a{display:block; height:160px; padding:20px 0; overflow:hidden;}
  41. .jLimitTimeBuy-87184 .jPic img{vertical-align:top; display:block; margin:0 auto; background:url([img]http://img12.360buyimg.com/cms/g13/M03/01/06/rBEhUlG7HjgIAAAAAAAXITf0eFMAAAO3QM5fMUAABc5466.gif[/img]);}
  42. .jLimitTimeBuy-87184 .jGoodsInfo{position:relative; height:100%;}
  43. .jLimitTimeBuy-87184 .jDesc{height:32px; line-height:1.3; color:#fff; overflow:hidden; padding:5px 10px 0; *padding-top:2px; margin-bottom:3px;}
  44. .jLimitTimeBuy-87184 .jDesc a{color:#fff;}
  45. .jLimitTimeBuy-87184 .jDesc a:hover{text-decoration:underline;}

  47. .jLimitTimeBuy-87184 .jPrice{height:36px; background:#fff; overflow:hidden; padding:6px 8px 7px 8px;}
  48. .jLimitTimeBuy-87184 .jPrice span{float:left;}

  50. .jLimitTimeBuy-87184 .jSalePrice{color:#4a4a4a; overflow:hidden; margin-top:2px; _margin-top:-5px; clear:both;}
  51. .jLimitTimeBuy-87184 .jSalePrice .jText{font-size:14px; text-decoration:line-through;}
  52. .jLimitTimeBuy-87184 .jSalePrice .jRmb, .jLimitTimeBuy-87184 .jSalePrice .jsNum{text-decoration:line-through;}
  53. .jLimitTimeBuy-87184 .jSalePrice .jsNumNo{font-size:14px;}

  55. .jLimitTimeBuy-87184 .jdPrice{color:#a90000; overflow:hidden; clear:both;}
  56. .jLimitTimeBuy-87184 .jdPrice .jText{font-size:14px;}
  57. .jLimitTimeBuy-87184 .jdPrice .jRmb, .jLimitTimeBuy-87184 .jdPrice .jdNum{font-size:20px;}
  58. .jLimitTimeBuy-87184 .jdPrice .jdNumNo{font-size:14px;}

  60. .jLimitTimeBuy-87184 .jLimitTime{height:50px; line-height:50px; background:url([img]http://img11.360buyimg.com/cms/g12/M00/0B/0C/rBEQYVGlXbMIAAAAAAAFo-AZYXwAACOXwP_-TgAAAW7905.gif[/img]) repeat-x; color:#5a5a5a; font-size:14px; overflow:hidden; text-align:center;}
  61. .jLimitTimeBuy-87184 .jLimitTime span{float:left; width:50px; height:40px; padding:5px 10px; font-size:18px; font-weight:bold; line-height:1.1; color:#fff; background:#cf1725; text-align:center;}
  62. .jLimitTimeBuy-87184 .jLimitTime em{font-size:30px; padding:0 2px;}
  63. .jLimitTimeBuy-87184 .jLimitTime a{color:#005EA7;}
  64. .jLimitTimeBuy-87184 .jPromotionLabel{width:40px; height:38px; padding-top:3px; padding-left:8px; line-height:16px; background:url([img]http://misc.360buyimg.com/product/skin/2012/i/20120209D.png[/img]) -219px 0 no-repeat; position:absolute; right:10px; top:10px; color:#FFFFFF; font-family:"microsoft yahei"; font-weight:bold;}
  65. .jLimitTimeBuy-87184 .jPromotionLabel.jEndBuy{background-position:-270px 0;}
  66. .jLimitTimeBuy-87184 .jPromotionNum{font-size:18px; line-height:20px; display:block;}

  68. .jLimitTimeBuy-87184 .jBtnArea{position:absolute; right:10px; bottom:3px;}
  69. .jLimitTimeBuy-87184 .jBtnArea a{display:block; background:url([img]http://img12.360buyimg.com/cms/g12/M00/0B/0C/rBEQYFGlXboIAAAAAAAQhsDE5nAAACOaAP_7kwAABCe588.png[/img]) no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img12.360buyimg.com/cms/g12/M00/0B/0C/rBEQYFGlXboIAAAAAAAQhsDE5nAAACOaAP_7kwAABCe588.png'); _background-image:none; width:85px; height:42px; text-indent:-9999px;}
  70. .htmlContent-21 table a img{display:block;}
  71. .jImgShow-84525 .mt{}
  72. .jImgShow-84525 .mc{background:#fff; overflow:hidden; padding-bottom:5px;}
  73. .jImgShow-84525 .mb{display:none;}
  74. .jImgShow-84525 .mc ul{padding-left:7px;padding-top:5px;}
  75. .jImgShow-84525 li{overflow:hidden; float:left; margin:5px 5px 5px 5px;}
  76. .jImgShow-84525 .jItem{margin:0 auto; overflow:hidden;}
  77. .jImgShow-84525 .jPic{overflow:hidden;}
  78. .jImgShow-84525 .jPic img{vertical-align:top; display:block;}
  79. .jImgShow-84525 .jPic a{display:none;}
  80. .jImgShow-84525 .jPic a.current{display:block;}
  81. .jImgShow-84525 .j-module{width:100%;}
  82.        
  83. </style>
  84. <script type="text/javascript" src="http://sale.jd.com/script/jquery/jquery-1.6.2.min.js?t=1306091702"></script>        <script type="text/javascript" src="http://misc.360buyimg.com/lib/js/2012/base-2011.js?t=1306091702" charset="gb2312"></script>
  85. </head>
  86. <body style="height:3000px;">





  92.         <div class='userdefined   htmlContent-21' instanceId='3531607'  style="margin-bottom: 10px; width: 990px;  " module-name="UserDefine">
  93.                 <div class="mc" style=";min-height:0px;">
  94.                         <div class="j-module" module-function="sideSlip" module-param="{vertical:'top', verticalValue:170, horizontal:'left', horizontalValue:0}"><img class="J_imgLazyload" src="http://img14.360buyimg.com/cms/g10/M00/13/04/rBEQWFFj4PUIAAAAAAAESxyqJLUAADvdAIHC9oAAARj186.gif"  alt="" original="http://img14.360buyimg.com/cms/g15/M08/01/13/rBEhWFG_uRAIAAAAAAENFmPbltQAAAUHgF-CiwAAQ0u776.png" usemap="#MapCCC" border="0" /> <map name="MapCCC"><area  shape="rect" target="_blank" coords="12,222,138,323" /><area href="#TOP" shape="rect" coords="25,335,117,357" /><area  shape="rect" target="_blank" coords="9,115,135,216" /><area  shape="rect" target="_blank" coords="11,5,137,106" /></map>
  95.                         </div>
  96.                  </div>
  97.          </div>


  100. <script type="text/javascript" charset="gb2312" src="http://misc.360buyimg.com/lib/js/2012/lib-v1.js?t=1306091702"></script>
  101.         <script type="text/javascript" src="http://sale.jd.com/script/des/modules.min.js?t=1306091702"></script>
  102. <script type="text/javascript" moduleinit="module" src="http://sale.jd.com/jm.htm?js=/script/module/user-define/UserDefine.js,/script/module/limit-time-buy/limitTimeBuy.js,/script/module/html-banner/BannerHtml.js,/script/module/html-banner/jshop-text.js,/script/module/img-show/imgShow.js&t=1306091702"></script>
  103.         <script type="text/javascript" src="http://www.jd.com/hotwords.aspx?Position=A-index-013" charset="gb2312"></script>


  106. </body>
  107. </html>
复制代码
作者: shuir    时间: 2013-6-18 16:43
提示: 作者被禁止或删除 内容自动屏蔽
作者: 1212    时间: 2013-6-18 16:59
最简单的漂浮啦
去jb51.net找找
作者: sdgl212    时间: 2013-6-18 17:00
4L给力啊
作者: rqliang    时间: 2013-6-18 17:05
找代码的网站不是有很多吗?
作者: ineme    时间: 2013-6-18 17:48
  1. <div style="position:fixed; _position:absolute; right:0; bottom:10%; z-index:6;"><img class="" src="http://img14.360buyimg.com/cms/g15/M09/01/12/rBEhWVG-9W8IAAAAAACpYVqJu9AAAATsAC6fK8AAKl5609.png" alt="" usemap="#MapDFGD" border="0"> <map name="MapDFGD">  <area href="#TOP" shape="rect" coords="19,485,129,514"><area  shape="rect" target="_blank" coords="24,448,134,477"><area href="http://sale.jd.com/act/t4JuTgkqoyZcKA.html " shape="rect" target="_blank" coords="22,416,132,445"><area  shape="rect" target="_blank" coords="15,385,125,414"><area  shape="rect" target="_blank" coords="28,352,123,381">  <area  shape="rect" target="_blank" coords="19,318,129,347"><area href="http://sale.jd.com/act/WOrY6z1UTvdAe4m.html " shape="rect" target="_blank" coords="19,286,129,315"><area href="http://sale.jd.com/act/4ZVRlz3q72.html " shape="rect" target="_blank" coords="20,253,130,282"><area  shape="rect" target="_blank" coords="18,10,140,215"><area  shape="rect" target="_blank" coords="19,222,129,251"><area href="#TOP" shape="rect" coords="30,519,121,543">  </map></div>
复制代码




欢迎光临 全球主机交流论坛 (https://fd.vvwvv.eu.org/) Powered by Discuz! X3.4