JS模仿腾讯图片站的图片翻页按钮效果完整实例

2019-11-20 09:38:45

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS模仿腾讯图片站的图片翻页按钮效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>模仿腾讯图片翻页</title> <style type="text/css">  *{   margin:none;  padding:none;  }  body{  background:#000000;  }  #tip{  position:absolute;  width:564px;  height:362px;  top:-362px;  background:url(../img/TencentImg/tipLayer.png);  }  #left{  position:absolute;  width:101px;  height:95px;  background:url(../img/TencentImg/left.png);  border:1px solid #f2f2f2;  display:none;  cursor:hand;  }  #right{  position:absolute;  width:101px;  height:95px;  background:url(../img/TencentImg/right.png);  border:1px solid #f2f2f2;  display:none;  cursor:hand;  }  #mouseXPosition{  width:30px;  height:20px;  color:#ffffff;  display:inline;  }  #mouseYPosition{  width:30px;  height:20px;  color:#ffffff;  display:inline;  }  #divTop{  width:30px;  height:20px;  color:#ffffff;  display:inline;  } </style> <script type="text/javascript">  function init(){  var ml = document.body.clientWidth/2 - 40;  document.getElementById("left").style.pixelTop = 300;  document.getElementById("right").style.pixelTop = 300;  document.getElementById("left").style.pixelLeft = ml - 101*4;  document.getElementById("right").style.pixelLeft = ml + 101*4;  var tip = document.getElementById("tip");  var initH = (document.body.clientWidth - tip.offsetWidth)/2;  document.getElementById("tip").style.left = initH;  document.getElementById("tip").style.pixelTop = -362;  }  function mousePosition(ev){      if(ev.pageX || ev.pageY){          return {x:ev.pageX, y:ev.pageY};      }      return {          x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,          y:ev.clientY + document.body.scrollTop - document.body.clientTop      };  }  document.onmousemove = mouseMove;  function mouseMove(e){  e = e || window.event;    var mousePos = mousePosition(e);  var mid = document.body.clientWidth/2;  document.getElementById('mouseXPosition').innerHTML = mousePos.x;     document.getElementById('mouseYPosition').innerHTML = mousePos.y;  if(mousePos.x < mid){   document.getElementById("left").style.display = "block";   document.getElementById("right").style.display = "none";  }else if(mousePos.x > mid){   document.getElementById("right").style.display = "block";   document.getElementById("left").style.display = "none";  }  }  function show(){  if(document.getElementById("tip").style.pixelTop < 80){   document.getElementById("tip").style.pixelTop += 20;   document.getElementById("divTop").innerHTML = document.getElementById("tip").style.pixelTop;   setTimeout("show()",10)  }  }  function hide(){  if(document.getElementById("tip").style.pixelTop > -362){   document.getElementById("tip").style.pixelTop -= 20;   document.getElementById("divTop").innerHTML = document.getElementById("tip").style.pixelTop;   setTimeout("hide()",10)  }  } </script> </head> <body onload="init()"> <div id = "left" onclick="hide()"></div> <div id = "right" onclick="show()"></div> <span style = "color:#ffffff;">鼠标 X 轴:</span> <div id="mouseXPosition">0</div><br/> <span style = "color:#ffffff">鼠标 Y 轴:</span> <div id="mouseYPosition">0</div><br/> <span style = "color:#ffffff;font-size:13px;">图片上边距:</span> <div id = "divTop">0</div> <div id = "tip">0</div> </body></html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：Javascript类型系统之String字符串类型详解

下一篇：JS实现简单的右下角弹出提示窗口完整实例