<!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. C语言过时了？为什么还要推荐每一位程序员都来学一下C语言？

    互联网蓬勃发展的时代,有一类人做出了巨大的贡献,这一群人被大家称之为程序员,怎样才能成为一名优秀的程序员呢,为什么每一个程序员都需要学习C语言呢? 就让我来跟大家分享分享:   在学习C/C++或者想 ...

  2. vue-router路由加载两种模式

    路由安装npm install --save vue-router 安装完成后,打开package.json,如果看到这个"vue-router": 版本号, 就代表安装成功了   ...

  3. 数据清洗——python定位csv中的特定字符位置

    之前发过一篇关于定位csv中的特殊字符的,主要是用到了python的自带的函数,近期又遇到了一些新的问题,比如isdigit()的缺点在于不能判断浮点型,以及小数中有多个小数点的情况.发现还是正则表达 ...

  4. Unity3d dotween

    位置 1. 移动到指定位置 obj.transform.DOMove(, , ), 2f); a. 单方向可以用DOMoveX.DOMoveY.DOMoveZ b. 本地坐标系版本:DOLocalMo ...

  5. PB连接SQLITE

    sqlite3数据库,简单而功能强大,比起ini文件保存用户设置,更简单安全,为什么使用数据库存用户设置,由开发者自己去想吧进入话题:pb中可以用ole DB方式在不注册odbc的情况下直接连接数据库 ...

  6. CSS——个人资料demo

    1.上下外边距合并,选最大值. 2.两个input标签在编辑中如果换行了,在浏览器中显示的时候会自动增加一些距离. <!DOCTYPE html> <html lang=" ...

  7. C#——简单工厂

    简单工厂的方法实现过程核心就是之前介绍的接口应用.所以直接上代码: public interface IPerson { void Say(); } public class Student : IP ...

  8. 【技术累积】【点】【java】【22】UUID

    基础概念&使用 UUID是Universally Unique Identifier的缩写,它是在一定的范围内(从特定的名字空间到全球)唯一的机器生成的标识符. 说白了就是个唯一键,只不过到处 ...

  9. 06--ubuntu的sqlite安装

    知道学习嵌入式技术,数据库是必须懂的,看的书上嵌入式的教程都在用,看来我是非学不可了,下面就简单的记录一下我在Ubuntu 12.04系统上安装 SQLite 的过程以及使用. 相关阅读: SQLit ...

  10. zepto处理touch事件

    处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过eve ...