iphone手机桌面滑动效果使用css3实现

iphone手机桌面效果，因为用了css3样式，只测试了谷歌浏览器。

iphone手机桌面效果

body,div,ul,li{padding: 0; margin: 0; }
li{list-style: none; }
body {background: #333; }
#iphone {width: 900px; height: 600px; background: url(http://zsrimg.ikafan.com/file_images/article/201212/mobilhdmenu/bg.jpg); position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -450px; }
#wrap {width: 240px; height: 360px; position: absolute; top: 121px; left: 326px; overflow:hidden; }
#iphone ul#zm {width: 1200px; height: 360px; cursor: pointer; position: absolute; top: 0px; left: 0px; background:url(http://zsrimg.ikafan.com/file_images/article/201212/mobilhdmenu/background.jpg) center center;}
#iphone ul#zm li {float: left; width:240px; height:350px;padding-top:10px;overflow:hidden;}
#iphone ul#zm li div{float: left; width:60px; height:80px; background-repeat: no-repeat;margin: 10px;position: relative;}
#iphone ul#zm li div.icon::after{bottom: -8px;color:#fff;content: attr(title);font-size: 12px;height: 20px;left: -8px;overflow: hidden;position: absolute;text-align: center;white-space: nowrap;width: 74px;text-shadow: 0 0 3px #222;}
#iphone ul#btn{position:absolute;left:60px;bottom:5px;width:140px;height:30px;}
#iphone ul#btn li{float:left;width:6px;height:6px;border-radius:50%;background:#fff;margin:10px;}
#iphone ul#btn li.current{background:#00A2D6;}

function startMove(e,t){if(e.oTimer){clearInterval(e.oTimer)}e.oTimer=setInterval(function(){doMove(e,t)},30)}function doMove(e,t){var n=e.offsetLeft;iSpeed+=(t-n)/5;iSpeed*=.7;n+=iSpeed;if(Math.abs(t-n)=0){if(e.offsetLeft>e.iStartX){iNow--;if(iNow=t.length){iNow=t.length-1}}}startMove(e,-iNow*t[0].offsetWidth);var n=document.getElementById("btn");var r=n.getElementsByTagName("li");for(var i=0;i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • javascript判断iphone/android手机横竖屏模式的函数

    查了不少资料,最后结论如下: 复制代码 代码如下: function orientationChange(){ switch(window.orientation) { case 0: // Portrait case 180: // Upside-down Portrait // Javascript to setup Portrait view break; case -90: // Landscape: turned 90 degrees counter-clockwise case 90

  • 仿iPhone风格对话框(附件包含例子/jar包/jar包源码)

    仿iPhone风格对话框(附件包含例子/jar包/jar包源码)

    效果图: 这个对框完全继承.仿照AlertDialog,只是实现了自定义效果.另外,没有实现setIcon,因为iphone中的对话框多数都没有图标. 附件包含例子.jar包.jar包源码.文件简介: aIphoneDialogTest.rar 这是示例工程 使用时注意先要在build path中导入iPhoneDialogLib.rar中的jar包 iPhoneDialogLib.rar 这是控件jar包及资源文件 使用时先备份自己的strings.xml,然后将三个目录下的资源文件复制到项目

  • iphone的safari浏览器中实现全屏浏览的方法

    正常情况下,当你用手机浏览器打开网页时,导航就停留在上面,这样实际展示的屏幕就变小了.那能不能加载后,屏幕就自动全屏呢?这就是本文要讨论的. Add to Home Screen 说到全屏不得不谈iPhone下的safari有一个特别且重要的功能就是"Add to Home Screen".(就在Safari浏览器最下方,最中间的那个位置,点击选择即可)这个功能类似于把网页地址作为一个超链接的方式放到手机桌面,并且可以直接访问.不过要注意的是每个链接都需要js进行一次特殊处理,那就是监

  • Android之IphoneTreeView带组指示器的ExpandableListView效果

    Android之IphoneTreeView带组指示器的ExpandableListView效果

    之前实现过一次这种效果的ExpandableListView:http://www.jb51.net/article/38482.htm,带效果比较挫,最近,在参考联系人源码PinnedHeaderListView,以及网上各位大侠的源码,封装了一个效果最好,而且使用最简单的IphoneTreeView,下面先看看效果图:  首先让我们看看封装得比较完善的IphoneTreeView: 复制代码 代码如下: public class IphoneTreeView extends Expandab

  • 基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码

    其实主要是通过window.orientation实现,下面看下代码吧 复制代码 代码如下: function orient() {if (window.orientation == 90 || window.orientation == -90) {//ipad.iphone竖屏:Andriod横屏$("body").attr("class", "landscape");orientation = 'landscape';return fals

  • 如何在iphon IOS设备上使用二维码

    如何在iphon IOS设备上使用二维码

    下面给大家介绍下二维码简介 二维码 (2-dimensional bar code) 是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的:在代码编制上巧妙地利用构成计算机内部逻辑基础的"0"."1"比特流的概念,使用若干个与二进制相对应的几何形体来表示文字数值信息,通过图象输入设备或光电扫描设备自动识读以实现信息自动处理: 二维条码/二维码能够在横向和纵向两个方位同时表达信息,因此能在很小的面积内表达大量的信息. 下面介绍下如

  • iphone safari不支持position fixed的解决方法

    需求是这样的,许多pc web页面的导航都是固定的,比如google的首页,现在要将这种固定的导航转移到mobile web下,很自然地就会想到position:fixed; bottom: 0,android下运行正常,但在iphone safari下就会出现问题,当滚动条滚动时,导航条就会出现屏幕的上方,黑乎乎的一块,很不协调.许多人推荐iscroll.jquery mobile等框架,但有时效果不如意或是得阅读框架源码进行二次开发,会花费好长一段时间的.经过一段时间的研究,找到了一种解决办

  • iphone手机桌面滑动效果使用css3实现

    iphone手机桌面效果,因为用了css3样式,只测试了谷歌浏览器. iphone手机桌面效果 body,div,ul,li{padding: 0; margin: 0; } li{list-style: none; } body {background: #333; } #iphone {width: 900px; height: 600px; background: url(http://files.jb51.net/file_images/article/201212/mobilhdmen

  • js仿小米手机上下滑动效果

    本文实例为大家分享了js上下滑动效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 512px; height: 400px; margin:100px auto; overflo

  • wap手机图片滑动切换特效无css3元素js脚本编写

    手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上完蛋了,所 有下定决心自己做一个,谁知出现了很多的问题,其中最重要的是给图片加链接,网页中的上下滚动条不能在拖动图片的时候滚动,并且不能兼容pc机器上的拖动:在这里就简单介绍一下遇到的问题和解决的方法: 问题一:给图片加上链接后,在拖动的时候总是跳到其他页面: 问题根源主要是不能判断是点击还是拖动,

  • js实现手机web图片左右滑动效果

    最近在做一个手机端web站点,里面有一个图片展示效果: 1.点击任意图片时图片全屏展示,左右滑动能展示其他的图片. 2.滑动超过一定范围自动滑到下一张图片,不超过则回退到当前照片位置.此处的滑动要带动画效果 实现: 每张图片外面一个div,将其宽度设置为100%,最外层有一个div[命名为outerDiv],其宽度设为:总图片数量*100+'%'.给最外层div设置touchstart,touchmove,touchend事件监听处理函数,在touchmove中根据移动的x轴距离动态改变oute

  • Jquery+CSS3实现一款简洁大气带滑动效果的弹出层

    Jquery+CSS3实现一款简洁大气带滑动效果的弹出层

    此Jquery特效是一款Jquery+CSS3实现简洁大气带滑动效果的弹出层,应用范围很广泛,比如用在消息提示.弹出层显示内容.弹出层登录等,带遮罩效果,虽然没有封装成插件,但使用起来也非常简单,宽度和高度直接调样式. 包含了以下功能: 1.弹出层 2.带关闭按钮 3.遮罩层效果 4.从上向下滑动显示 5.点击层外面任何地方关闭 6.绑定控制按钮 7.内容过多自动显示滚动条 如果不满足大家的要求,自己可以二次开发哦 效果如下: 在线演示

  • 基于Vue实现页面切换左右滑动效果

    基于Vue的页面切换左右滑动效果,具体内容如下 HTML文本页面: <template> <div id="app> <transition :name="direction" mode="out-in"> <!--动态获得transition 的name值--> <router-view class="app-view" wechat-title></router-vi

  • js实现移动端导航点击自动滑动效果

    js实现移动端导航点击自动滑动效果

    本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码,供大家参考,具体内容如下 移动端模拟导航可点击自动滑动 0.1.4. 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js]. 废话不多说直接上代码: /* * 移动端模拟导航可点击自动滑动 0.1.4 * Date: 2017-01-11 * by: xiewei * 导航可左右滑动,可点击边缘的一个,自动滚动下一个到可视范围[依赖于iscroll.js] */ (function ($) { $.

  • Android实现上下菜单双向滑动效果

    这是研究了网上大神双向左右滑动后实现的上下双向滑动特效,有兴趣的朋友可以看下面代码,注释很详细,原理就是根据手指滑动的方向,来将上下两个布局进行显示与隐藏.主要用了onTouch方法,获取滑动的距离进行偏移. import android.content.Context; import android.os.AsyncTask; import android.util.AttributeSet; import android.view.MotionEvent; import android.vi

  • Android仿正点闹钟时间齿轮滑动效果

    Android仿正点闹钟时间齿轮滑动效果

    看到正点闹钟上的设置时间的滑动效果非常好看,自己就想做一个那样的,在网上就开始搜资料了,看到网上有的齿轮效果的代码非常多,也非常难懂,我就决定自己研究一下,现在我就把我的研究成果分享给大家.我研究的这个效果出来了,而且代码也非常简单,通俗易懂.效果图如下: 首先是MainActivity的布局文件,这个布局文件非常简单,就是一个Button:activity_main.xml文件,代码如下: <?xml version="1.0" encoding="utf-8&quo

  • 微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例

    微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例

    本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY() 属性,给需要动画的元素添加上一个动画class. 先上效果图: 1.蒙层的结构: <!-- 购物车蒙层 --> <view class='list-fix' wx:if="{{mengShow}}" bindt

随机推荐