京东 关联版式 打造 侧滑 效果 ~

目的：在关联版式里实现侧滑效果

 

直接先看效果 由于京东不允许使用position：fixed这样的语句 要想实现 侧滑如何使用呢 

关键点就是借助京东的样式表 里的thickframe类 的position: fixed;属性 还有要消除这个类带来的不好影响（透明度 背景色等）

**********************************************************************************

http://misc.360buyimg.com/lib/skin/2013/base.css

.thickframe {
position: fixed;
top: 0;
left: 0;
z-index: 10000000;
width: 100%;
height: 100%;
background: #000;
border: 0;
filter: alpha(opacity=0);
opacity: 0
}

注意的主要就是 宽度高度要固定 还有取消透明的效果 都是因为用了

thickframe 类


具体实现

代码

<div class="thickframe" style="left:88%; top:10%; width:157px; height:578px; opacity:100; background:#fff;" >
<img src="http://img13.360buyimg.com/cms/jfs/t994/101/7090604/54241/d5dc3c74/54db058eNfee5bddd.png" alt="" width="157" height="578" usemap="#Map132"/>
<map name="Map132">
  <area shape="rect" coords="3,6,154,63" href="http://sale.jd.com/mall/nOwdieXm3NP05.html" target="_blank">
  <area shape="rect" coords="13,319,79,352" href="http://sale.jd.com/mall/gdFo1bLJwN3.html" target="_blank">
  <area shape="rect" coords="80,319,143,351" href="http://sale.jd.com/mall/grH5IYLwvjlpWqR.html" target="_blank">
  <area shape="rect" coords="13,354,79,384" href="http://sale.jd.com/mall/EZ73faGVKC5A8.html" target="_blank">
  <area shape="rect" coords="80,354,139,384" href="http://sale.jd.com/mall/CPJ3qAGxvXnL.html" target="_blank">
  <area shape="rect" coords="17,387,78,416" href="http://sale.jd.com/mall/pAZXTnhlKz6kxNf.html" target="_blank">
  <area shape="rect" coords="81,387,140,417" href="http://sale.jd.com/mall/b47zq6dKEAmRQ.html" target="_blank">
  <area shape="rect" coords="16,425,141,518" href="http://sale.jd.com/mall/gBxqeNIcVYX.html" target="_blank">
  <area shape="rect" coords="13,523,139,571" href="#" target="_self">
  <area shape="rect" coords="12,114,145,145" href="http://sale.jd.com/mall/nOwdieXm3NP05.html#d1" target="_blank">
  <area shape="rect" coords="12,150,146,180" href="http://sale.jd.com/mall/nOwdieXm3NP05.html#d2" target="_blank">
  <area shape="rect" coords="13,185,143,213" href="http://sale.jd.com/mall/nOwdieXm3NP05.html#d3" target="_blank">
  <area shape="rect" coords="15,221,144,247" href="http://sale.jd.com/mall/nOwdieXm3NP05.html#d4" target="_blank">
  <area shape="rect" coords="19,253,145,281" href="http://sale.jd.com/mall/nOwdieXm3NP05.html#d6" target="_blank">
  <area shape="rect" coords="18,287,138,311" href="http://sale.jd.com/mall/nOwdieXm3NP05.html#d7" target="_blank">
</map>
</div>

 以上效果就是底色是白色 如果垂直方向有其他颜色会很明显 下面还是借用本身基础css来完成 主要使用

id="sidepanel"  

http://misc.360buyimg.com/lib/skin/2013/base.css
#sidepanel {
position: fixed;
bottom: 0;
right: 0;
z-index: 1000
}

这样看着就比较好了  示例图

 

下面是白底的示例图

实例

<div id="sidepanel" style="left:2%; top:10%; width:177px; height:641px; opacity:100; " >
<img src="http://img11.360buyimg.com/cms/jfs/t469/150/1474284468/106926/d3f698fa/54ed70faNad8957e9.png" alt="" width="177" height="641" usemap="#Map177"/>
<map name="Map177">
  <area shape="rect" coords="20,200,151,236" href="http://sale.jd.com/mall/nOwdieXm3NP05.html">
  <area shape="rect" coords="20,240,151,275" href="http://sale.jd.com/mall/gdFo1bLJwN3.html" target="_blank">
  <area shape="rect" coords="21,280,150,316" href="http://sale.jd.com/mall/grH5IYLwvjlpWqR.html" target="_blank">
  <area shape="rect" coords="20,319,151,356" href="http://sale.jd.com/mall/EZ73faGVKC5A8.html" target="_blank">
  <area shape="rect" coords="24,360,148,393" href="http://sale.jd.com/mall/pAZXTnhlKz6kxNf.html" target="_blank">
  <area shape="rect" coords="22,397,145,433" href="http://sale.jd.com/mall/bq62up7n4VP0s.html" target="_blank">
  <area shape="rect" coords="22,438,147,474" href="http://sale.jd.com/mall/b47zq6dKEAmRQ.html" target="_blank">
  <area shape="rect" coords="25,479,147,514" href="http://sale.jd.com/mall/CPJ3qAGxvXnL.html" target="_blank">
  <area shape="rect" coords="23,519,146,554" href="http://sale.jd.com/mall/i36TI2fMFAPLnC.html" target="_blank">
  <area shape="rect" coords="25,557,148,592" href="http://sale.jd.com/mall/rL25X8UyscFA.html" target="_blank">
  <area shape="rect" coords="21,599,165,647" href="http://sale.jd.com/mall/gdYFCkzNTiujD.html" target="_blank">
</map>
</div>

 

实例效果：