当前位置: 代码迷 >> JavaScript >> 怎么实现这个效果,鼠标悬浮一张图片上面,左边就显示浏览上一页,右边就显示浏览下一页
  详细解决方案

怎么实现这个效果,鼠标悬浮一张图片上面,左边就显示浏览上一页,右边就显示浏览下一页

热度:392   发布时间:2013-12-04 17:21:01.0
如何实现这个效果,鼠标悬浮一张图片上面,左边就显示浏览上一页,右边就显示浏览下一页
点击凤凰网查看这个效果



我说一个想法,看代码:
<a href="#" >
 <div id="left"></div>
  <div id="main">
   <img src="http://ww2.sinaimg.cn/bmiddle/6e5c06b1jw1dneuvq53bij.jpg" title="来自新浪微博" />
  </div>
 <div id="right"></div>
</a>
其实看代码你们大手就知道意思了,我描述也说不清楚,
就是这个main div图片占据整个A,然后左右2个div分别占据A的一半,然后...

------解决方案--------------------
你都有地址了,把地址的代码拿下来参考即可,它是用js计算的,没有覆盖div

<a href="http://news.ifeng.com/photo/yizhousaojietu/detail_2011_12/25/11555699_0.shtml" id="bigLink" style="cursor: url(http://img.ifeng.com/tres/TemplateRes/left.cur), auto; "><img onmousemove="imageonmousemove(event)" id="bigImage" src="http://res.news.ifeng.com/b52d6dcee929704a/2011/1218/rdn_4eed27916c965.jpg" width="950" height="600" alt="一周扫街图2011.12.11-12.17 " title="&lt;&lt;点击浏览上一张"></a>


<script>
  prevLink = "http://news.ifeng.com/photo/yizhousaojietu/detail_2011_12/25/11555699_0.shtml";
  nextLink = "http://news.ifeng.com/photo/yizhousaojietu/detail_2011_12/18/11399277_1.shtml";

function $(id){return document.getElementById(id);}

function getpos(element) {
    if (arguments.length != 1 
------解决方案--------------------
 element == null) {
      return null;
    }
    var elmt = element;
    var offsetTop = elmt.offsetTop;
    var offsetLeft = elmt.offsetLeft;
    var offsetWidth = elmt.offsetWidth;
    var offsetHeight = elmt.offsetHeight;
    while (elmt = elmt.offsetParent) {
      if (elmt.style.position == 'absolute' 
------解决方案--------------------
 (elmt.style.overflow != 'visible' && elmt.style.overflow != '')) {
        break;
      }
      offsetTop += elmt.offsetTop;
      offsetLeft += elmt.offsetLeft;
    }
    return {
      top: offsetTop,
      left: offsetLeft,
      right: offsetWidth + offsetLeft,
      bottom: offsetHeight + offsetTop
    };
  }

  function imageonmousemove(evnt) {
    var photopos = getpos($("bigImage"));
    if (evnt) {
      nx = (parseInt(evnt.clientX) - photopos.left) / $("bigImage").width;
if (nx > 0.5 && nextLink != "") {
        if($("bigLink").style.cursor.toString().indexOf("left")!=-1
------解决方案--------------------
!$("bigLink").style.cursor){
$("bigLink").style.cursor = "url(http://img.ifeng.com/tres/TemplateRes/right.cur),auto";
}
        $("bigImage").title = "点击浏览下一张>>";
        $("bigLink").href = nextLink;
      }
      if (nx <= 0.5 && prevLink != "") {
        if($("bigLink").style.cursor.toString().indexOf("right")!=-1
------解决方案--------------------
!$("bigLink").style.cursor){
$("bigLink").style.cursor = "url(http://img.ifeng.com/tres/TemplateRes/left.cur),auto";
}
        $("bigImage").title = "<<点击浏览上一张";
        $("bigLink").href = prevLink;
      }
    }
  }

</script>
  相关解决方案