<!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. 我的github教程

    这篇文章记录个人常用的一些命令,和记不住的一些命令. 安装 在 Windows 上安装 Git ,有个叫做 msysGit 的项目提供了安装包: http://msysgit.github.io/ 完 ...

  2. React Component 生命周期

    一般而言 Component 有以下三种生命周期的状态: Mounting:已插入真实的 DOM Updating:正在被重新渲染 Unmounting:已移出真实的 DOM 针对 Component ...

  3. echarts通过ajax请求展示多叉树

    背景:在sqlserver使用过程中经常由于各种原因会出现阻塞,并发数较高,很难肉眼看出那个session阻塞了其他process,通过sql查询出根源也需要大量的重复操作才能够找到. 因此就有这方面 ...

  4. linux共享库的版本控制

    前几天看到一篇介绍linux共享库版本控制及使用的文章,觉得不错,这里就与大家分享一下. 1. Linux约定 经常看到Linux中,共享库的名字后面跟了一串数字,比如:libperl.so.5.18 ...

  5. Java中File对象的常用方法

    创建: 1.createNewFile()指定位置创建一个空文件,成功就返回true,如果已存在就不创建,然后返回false. 2.mkdir() 在指定位置创建一个单级文件夹. 3.mkdirs() ...

  6. iic通讯 FPGA实现 mpu6050为例

    IIC最常用的通讯协议,但普遍用于单片机.arm这些,用FPGA实现大材小用,但对于菜鸡水平练练手很不错,考验串并转换和时序的控制.今天我就以mpu6050陀螺仪为例,实现FPGA的iic通信. 1. ...

  7. Burnside引理和polay计数 poj2409 Let it Bead

    题目描述 "Let it Bead" company is located upstairs at 700 Cannery Row in Monterey, CA. As you ...

  8. 什么是ACID

    ACID是衡量事务的四个特性: 原子性(Atomicity,或称不可分割性) 一致性(Consistency) 隔离性(Isolation) 持久性(Durability) 原子性:原子性是指一个事务 ...

  9. iview表单密码自定义验证

    From中定义   ref="passwordForm" 获取dom节点  :model="passwordForm" 关联表单数据对象 :rules=&quo ...

  10. 小程序map地图多点定位

    最近需求有一个类似共享单车查看附近单车的功能,看了看小程序map api对多点定位显示描述的不怎么清晰.显示定位数组添加多个时就不显示了.踩了几个坑写了几个方法.最终弄出来了.有问题建议欢迎留言. h ...