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


Posted in Javascript onJune 21, 2016

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

运行效果截图如下:

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 - 如何引入js代码
Mar 09 Javascript
理解Javascript_12_执行模型浅析
Oct 18 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
Vuejs实现购物车功能
Nov 05 Javascript
JavaScript实现多球运动效果
Sep 07 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
详解JVM系列之内存模型
Jun 10 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 #Javascript
jQuery获取元素父节点的方法
Jun 21 #Javascript
JS图片定时翻滚效果实现方法
Jun 21 #Javascript
Javascript删除指定元素节点的方法
Jun 21 #Javascript
jQuery插件扩展测试实例
Jun 21 #Javascript
早该知道的7个JavaScript技巧
Jun 21 #Javascript
BootStrap实现树形目录组件代码详解
Jun 21 #Javascript
You might like
php读取文件内容的方法汇总
2015/01/24 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
domReady的实现案例
2016/11/23 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
async/await优雅的错误处理方法总结
2019/01/30 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
python 正则式使用心得
2009/05/07 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
django的登录注册系统的示例代码
2018/05/14 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
Python多分支if语句的使用
2020/09/03 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
如何在存储过程中使用Loop
2016/01/05 面试题
描述RIP和OSPF区别以及特点
2015/01/17 面试题
护理自我鉴定范文
2013/10/06 职场文书
办公室文书岗位职责
2013/12/16 职场文书
个人收入证明模板
2014/09/18 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技