<!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. 数据库部署到linux服务器，供本地访问。

    1.  将本地的sql文件上传至服务器 scp /Users/fangke/Documents/article.sql root@IP:/usr/local 2. 登陆服务器的mysql 3. 创建数 ...

  2. tp 3.2 组合查询, 字符串模式查询

    $User = M("User"); // 实例化User对象 $map['id'] = array('neq',1); $map['name'] = 'ok'; $map['_s ...

  3. hdu---3177 Crixalis's Equipment 根据 两个元素 之间的权衡进行排序

    Crixalis's Equipment Problem Description Crixalis - Sand King used to be a giant scorpion(蝎子) in the ...

  4. excel另存为csv

    # -*- coding: utf-8 -*- """ Created on Tue Jul 11 21:25:57 2017 import pandas as pd i ...

  5. Android Activity作为dialog对话框的使用详细介绍

    Activity做为Android应用层四大组件的重要组成部分,它的灵活性.可扩性无论是在应用还是游戏方面都得到了广泛应用,本文主要介绍Activity作为dialog对话框 的使用方法进行说明. 本 ...

  6. CSS——样式隐藏

    overflow:hidden:  溢出隐藏 visibility:hidden:   隐藏元素    隐藏之后还占据原来的位置. display:none:      隐藏元素    隐藏之后不占据 ...

  7. ProE常用曲线方程：Python Matplotlib 版本代码（玫瑰曲线）

    Pyplot教程:https://matplotlib.org/gallery/index.html#pyplots-examples 玫瑰曲线 文字描述 平面内,围绕某一中心点平均分布整数个正弦花瓣 ...

  8. 微智魔盒APP开发程序解析

    微智魔盒系统开发找崔经理l88Z.6ZZ685l.微智魔盒app开发.微智魔盒商城开发.微智魔盒软件开发,微智魔盒模式开发,微智魔盒源码开发.微智魔盒开发. @Override publicvoidr ...

  9. 使用jquery将表单自动封装成json对象 /json对象元素的添加删除和转换

    $.fn.serializeObject = function () { var o = {}; var a = this.serializeArray(); $.each(a, function ( ...

  10. HDU3336Count the string

    HDU3336Count the string Problem Description It is well known that AekdyCoin is good at string proble ...