<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <title>15.iphone图片查看器</title>

         <meta name="author" content="Administrator" />

         <style>

             *{margin:0;padding:0}

             #wrap{width:900px;height:600px;background:url(images/bg.png);margin:0 auto;position:relative}

             #iphone{width:240px;height:361px;margin:0 auto;overflow:hidden;position: relative}

             #img-frame{position:absolute}

             li{list-style:none;float:left;width:240px;}

         </style>

         <script>

             window.onload=function(){

                 var oWrap=document.getElementById('wrap');

                 var oIphone=document.getElementById('iphone');

                 var oIphone_ul=document.getElementsByTagName('ul')[0];

                 var oIphone_aLi=document.getElementsByTagName('li');

                 var downX=0;

                 var iNow=0;

                 oIphone.style.paddingTop =  (oWrap.offsetHeight - oIphone.offsetHeight)/2 +'px';

                 oIphone_ul.style.width = oIphone_aLi.length * oIphone_aLi[0].offsetWidth +'px';

                 oIphone_ul.onmousedown=function(ev){

                      var ev= ev || event;

                      downX= ev.clientX;

                      if(oIphone_ul.setCapture)  oIphone_ul.setCapture();

                      var disX = ev.clientX - oIphone_ul.offsetLeft;

                       document.onmousemove=function(ev){

                           var ev= ev || event;

                           oIphone_ul.style.left = ev.clientX - disX +'px'

                       }

                      document.onmouseup=function(ev){

                           var ev= ev || event;

                           document.onmousemove = document.onmouseup = null;

                           if( ev.clientX < downX ){

                               if( iNow < oIphone_aLi.length-1 ) iNow++; //最后一次 不让他发生弹性运动

                               bb(oIphone_ul,{'left':-iNow*oIphone_aLi[0].offsetWidth});

                               console.log( iNow )

                           }else{

                               if( iNow!=  0 ) iNow--;//iNow 如果小于0  不让他发生弹性运动

                               bb(oIphone_ul,{'left':-iNow*oIphone_aLi[0].offsetWidth})

                           }

                       }

                      return false

                 }

             }

 function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }

 /**多物体弹性运动框架**/

 function bb(obj,json){

        clearInterval(obj.timer);

        obj.timer=setInterval(function(){

            var iBtn = true;

            for( var attr in json ){

                /**代码块**/

                 if( !obj.iSpeed ) obj.iSpeed={};

                 if( !obj.iSpeed[attr] ) obj.iSpeed[attr]=0;

                 var  iTarget = json[attr];

                 var  iCur = parseInt( getStyle( obj,attr ) );

                     obj.iSpeed[attr] += (iTarget - iCur)/6;

                     obj.iSpeed[attr] *= 0.75;

                     if( Math.abs(obj.iSpeed[attr]) <=1 && Math.abs( iTarget - iCur )<=1 ){

                          obj.iSpeed[attr]=0;

                      obj.style[attr] = iTarget +'px'

                     }else{

                         iBtn = false;

                         var sNow= iCur + obj.iSpeed[attr];

                         if( attr =='width' || attr =='height' ){

                             if( sNow < 0 ) sNow =0;

                         }

                         obj.style[attr] = sNow +'px';

                     }

                    document.title = iCur +'-'+obj.iSpeed[attr];

 /**代码块**/

            }

            if( iBtn ){

                clearInterval( obj.timer );

            }

        },30)

  }

         </script>

         <!-- Date: 2014-12-15 -->

     </head>

     <body>

          <div id="wrap">

              <div id="iphone">

                  <ul id="img-frame">

                          <li><img src="data:images/pic1.png"/></li>

                          <li><img src="data:images/pic2.png"/></li>

                          <li><img src="data:images/pic3.png"/></li>

                          <li><img src="data:images/pic4.png"/></li>

                  </ul>

              </div>

          </div>

     </body>

 </html>

iphone照片查看器的更多相关文章

  1. Win10系统怎样让打开图片方式为照片查看器

    转载自:百度经验 http://jingyan.baidu.com/article/5d368d1ef0cad13f60c057e3.html 1.首先,我们需要使用注册表编辑器来开启Win10系统照 ...

  2. 在Windows 10下启用旧的照片查看器

    从Windows 10开始,默认只能通过“照片”来查看图片了,非常不方便!通过将下列文本保存在.reg文件后导入,即可找回Windows XP时代的“照片查看器”. Windows Registry ...

  3. 解决Win10图片打开方式没有“Windows照片查看器”问题

    1.打开注册表编辑器(Win+R,Regedit),定位至(建议修改前备份注册表): HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows Photo Viewe ...

  4. Window Server 2012 R2 没有照片查看器 打开图片都是画板问题怎么解决

    新安装了 Window Server 2012 R2 系统,感觉屌屌的样子,加上开机速度蛮快,心里略爽.结果,打开图片一看,发现竟然是画板,而且还没有照片查看器,顿时泪流满面. 后来我利用了强大的百度 ...

  5. 如何在Win10下设置图片的浏览方式为windows照片查看器

    小编前些天刚装好了win10,一阵心奋啊,今天刚打开一个图片,却发现图片的默认打开方式是window应用商店的app, 这让我觉得特别不舒服,没有之前windows自带的照片查看器好用,后来我本想进入 ...

  6. 【J2SE】java实现简单照片查看器

    程序执行结果: project结构图: 程序代码: import java.awt.BorderLayout; import java.awt.FileDialog; import java.awt. ...

  7. jQuery 插件 Magnify 开发简介（仿 Windows 照片查看器）

    前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...

  8. Win10图片打开方式没有“Windows照片查看器”，如何找回？

    如果你是全新安装的Win10正式版,那么就会发现当在图片上点击右键时,"打开方式"菜单里熟悉的"Windows照片查看器"不见了,换成了Win10全新的&quo ...

  9. win10中使用 Windows照片查看器

    新建一个txt,将文件后缀名改为 .reg 用记事本或者其他txt编辑器编辑,复制下面文字: Windows Registry Editor Version 5.00 ; Change Extensi ...

随机推荐

  1. 消息队列 (1) mac安装RabbitMQ

    什么是RabbitMQ? RabbitMQ是由Erlang语言编写的实现了高级消息队列协议(AMQP)的开源消息代理软件(也称为面向消息的中间件).支持WIndows.Linux.MAC OS 操作系 ...

  2. Spring Cloud (10) Hystrix-监控面板

    Hystrix DashBoard 断路器是根据一段时间窗内的请求状况来判断并操作断路器的打开和关闭状态的.Hystrix Dashboard是作为断路器状态的一个组件,提供了数据监控和友好的图形化界 ...

  3. Java常用类库(三) : HashSet和LinkedList特点简析

    今天内容: l  浅撩HashSet集合元素不可重复的原理 l  使用LinkedList模拟栈和队列 1.浅撩HashSet集合元素不可重复的原理 我们知道HashSet是添加不了相同的元素的,其原 ...

  4. iOS动画——DynamicAnimate

    力学动画 以dynamicAnimate为首的力学动画是苹果在iOS7加入的API,里面包含了很多力学行为,这套API是基于Box2d实现的.其中包含了重力.碰撞.推.甩.和自定义行为. 涉及到的类如 ...

  5. 《Java编程的逻辑》第四部分 文件

  6. 如何用putty链接服务器端，并安装wdcp

    首先把自己阿里云的磁盘格式化然后重启 自己下载一个PuTTY 打开后输入自己的Ip地址端口号默认是22 会跳出一个yes 跟no界面,点击yes 会进入一个类似cmd界面 直接输入root,然后会提示 ...

  7. CSS——行业动态demo

    1.padding的运用:子div继承父div的宽,子div的padding-left值是不会撑大的. 2.背景图片的运用:不平铺.定位 3.ul本身就是一个盒子,它的高度是li中的字体的默认高度撑起 ...

  8. CNN-CV识别简史2012-2017：从 AlexNet、ResNet 到 Mask RCNN

    原文:计算机视觉识别简史:从 AlexNet.ResNet 到 Mask RCNN 总是找不到原文,标记一下.        一切从这里开始:现代物体识别随着ConvNets的发展而发展,这一切始于2 ...

  9. Python 之类型转换

    # int(x[, base]) 将x转换为一个整数,base为进制,默认十进制 # # long(x[, base] ) 将x转换为一个长整数 # # float(x) 将x转换到一个浮点数 # # ...

  10. 如何在linux搭建airtest+chromeweb测试环境--(用命令行运行.air脚本)

    大前堤: 如果你需要airtest提供的可视化测试报告,那你的操作系统,一定要有图形化界面. 否则运行你的airtest脚本 会遇到这样的问题 Xlib.error.DisplayNameError: ...