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面向对象之四 继承
Feb 08 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
JS class语法糖的深入剖析
Jul 07 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
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
PHP实现发送和接收JSON请求
2018/06/07 Python
Python 类的特殊成员解析
2018/06/20 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
python制作抽奖程序代码详解
2021/01/15 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
商务日语毕业生自荐信范文
2013/11/14 职场文书
新年爱情寄语
2014/04/08 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers