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 相关文章推荐
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
jQuery实现密保互斥问题解决方案
Aug 16 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
常用jQuery代码分享
Jul 14 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
express启用https使用小记
May 21 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
Element Input输入框的使用方法
Jul 26 Javascript
JavaScript实现商品评价五星好评
Nov 30 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
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
Move.js入门
2017/02/08 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
Python网络爬虫实例讲解
2016/04/28 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
Python 使用 attrs 和 cattrs 实现面向对象编程的实践
2019/06/12 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
廉政教育心得体会
2014/01/01 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
大学生个人学习总结
2015/02/15 职场文书
考研英语辞职信
2015/05/13 职场文书
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python