<!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. cocos creator学习

    2019-05-30 22:23:27 按照前一节我发的教程做,大概了解了Cocos creator的基本布局 但是你发现你不好写代码(感觉视频没有提) 需要下载VS code软件,在其上进行编辑,教 ...

  2. Bitmap与String之间的转换

    /** * 将bitmap转换成base64字符串 * * @param bitmap * @return base64 字符串 */ public String bitmaptoString(Bit ...

  3. celery定时执行ansible api返回为空的问题

    有两种方法解决这个问题,就是关闭assert:1.在celery 的worker启动窗口设置export PYTHONOPTIMIZE=1或打开celery这个参数-O OPTIMIZATION2.注 ...

  4. Android：EditText属性大全

    一.inputType属性inputType属性在EditText输入值时启动的虚拟键盘的风格有着重要的作用.比如有时需要虚拟键盘只为字符或只为数字. <span style="fon ...

  5. [转]HTML5 Day 4: Add Drop Down Menu to ASP.NET MVC HTML5 Template using CSS and jQuery

    本文转自:http://pietschsoft.com/post/2010/11/17/HTML5-Day-4-Add-DropDown-Menu-ASPNET-MVC-HTML5-Template- ...

  6. synchronized关键字详解（一）

    synchronized官方定义: 同步方法支持一种简单的策略防止线程干扰和内存一致性错误,如果一个对象对多个线程可见,则对该对象变量的所有读取或写入都是通过同步方法完成的(这一个synchroniz ...

  7. JVM中线程状态转换图

    JVM中线程的状态转换图 线程在一定条件下,状态会发生变化.线程一共有以下几种状态: 1.新建状态(New):新创建了一个线程对象. 2.就绪状态(Runnable):线程对象创建后,其他线程调用了该 ...

  8. XML——读与写

    XML写入 private static void writeXml() { using (XmlTextWriter xml = new XmlTextWriter(@"C:\Users\ ...

  9. css 众妙之门 学习笔记

    伪类: 结构伪类: :empty :only-child :before :after :active :hover :focus :link :visited :first-child :last- ...

  10. Java_Web三大框架之Hibernate操作数据库（三）

    使用Hibernate操作数据库需要七个步骤: (1)读取并解析配置文件 Configuration conf = newConfiguration().configure(); (2)读取并解析映射 ...