简易的仿照iphone 效果 笔记备份

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport"   content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"  />

<title>iphone 文字效果</title>

<style>

*{ margin:0; padding:0;}

html,body,.wrap{width: 100%; height: 100%; overflow: hidden;}

.wrap{ background: #666 url(http://127.0.0.1:8020/try/loveImg/TaylorSwift3.jpg) no-repeat center top; -webkit-background-size: 100%;background-size: 100%; }

.slider_text{ width:80px; margin: 0px auto; height: 20px; line-height: 20px;  position: relative; }

#div1 , #div2{ position:absolute; left:0; top:0;}

#div2{ color:#f2f2f2; width:15px; height:20px; overflow:hidden;}

#div2 span{ position:absolute; left:0; top:0; width:auto; height: 20px;;}

</style>

</head>

<body>

	<div class="wrap">

	http://www.cnblogs.com/surfaces/

	<div class="slider_text" style="margin-top: 400px;">

    <div id="div1"><span>滑动解锁></span></div>

    <div id="div2"><span>滑动解锁></span></div>

    </div>

    </div>

 <script>

window.onload = function(){

	var oDiv1 = document.getElementById('div1');

    var oDiv2 = document.getElementById('div2');

	var oSpan2 = oDiv2.getElementsByTagName('span')[0];

	function getStyle(obj, name){

	if(obj.currentStyle){

		return obj.currentStyle[name];

	}else{

		return getComputedStyle(obj, false)[name];

	}

  }

	setInterval(function(){

		  var moveLeft=parseInt(getStyle(oDiv2,'left'));

		  var maxWidth=oDiv1.offsetWidth;

		  console.log(maxWidth)

		if(moveLeft>maxWidth){

			oDiv2.style.left = 0 + 'px';

		    oSpan2.style.left = 0 + 'px';

		}else{

		   oDiv2.style.left = oDiv2.offsetLeft + 1 + 'px';

		   oSpan2.style.left = -oDiv2.offsetLeft + 'px';

		}

	},30);

};

</script>

</body>

</html>

　　

移动端 iphone锁屏文字效果的更多相关文章

  1. Android端恶意锁屏勒索应用分析

    一.前言 5月12日,一场全球性互联网灾难悄然而至,一款名为WannaCRY的PC端恶意勒索软件利用NSA泄漏的危险漏洞“永恒之蓝”,给100多个国家和地区10万台电脑造成了巨大的损失.到2017年为 ...

  2. iBeacon在iPhone锁屏下有几率扫描不到蓝牙设备以及折中解决方案

    前言: 这个问题的确困扰了很久,查了国内外各种论坛.社区,都没找到一个有效的解决办法. 所幸后来用一种折中的办法解决了,但也不是从技术根本上解决的,所以有解决的兄弟还望指导下. 正文如下: 一.需求描 ...

  3. 手动ubuntu 18.04修改登录锁屏界面效果(含登录背景修改)flat-remix

    前言 在ubuntu 18.04,可以通过修改/etc/alternatives/gdm3.css来进行修改 本来想直接使用flat-remix主题,但是只有这个登录界面没有达到作者演示的效果,所以手 ...

  4. 【腾讯Bugly干货分享】浅谈Android自定义锁屏页的发车姿势

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57875330c9da73584b025873 一.为什么需要自定义锁屏页 锁屏 ...

  5. 浅谈 Android 自定义锁屏页的发车姿势

    作者:blowUp,原文链接:http://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=2653577446&idx=2&sn= ...

  6. 浅谈Android自定义锁屏页的发车姿势

    一.为什么需要自定义锁屏页 锁屏作为一种黑白屏时代就存在的手机功能,至今仍发挥着巨大作用,特别是触屏时代的到来,锁屏的功用被发挥到了极致.多少人曾经在无聊的时候每隔几分钟划开锁屏再关上,孜孜不倦,其酸 ...

  7. iOS微信自动抢红包插件(支持后台和锁屏下抢红包)

    前言:本文主要讲述使用hook方式实现红包插件,涉及到tweak相关知识,如果你不想了解具体实现细节可直接到我的Github地址参考安装(包含越狱和非越狱两种方法)   转眼间2017即将过去,又到了 ...

  8. 用swift开发自己的MacOS锁屏软件(3)

    前两篇中实现了MacOS端的锁屏软件,现在需要再实现一个移动端的app用来实现和mac的通信,以后的文章可能就会两个项目来回穿插了. 写完MacOS的软件又回来接着写iOS真的是享受,看着堆积如山的各 ...

  9. 360wifi: 手机锁屏360wifi掉线的解决方法

    如遇到iphone锁屏断网的情况,按照以下操作步骤可以解决一部分用户的问题 (该问题并不是360WifFi问题,与苹果机制有关)如有安卓手机掉线,请确保手机连接其他Wifi并不会掉线,然后尝试粉色字体 ...

随机推荐

  1. Spark 学习笔记大纲

    Spark 内核 第28课:Spark天堂之门解密 (点击进入博客)从 SparkContext 创建3大核心对象开始到注册给 Master 这个过程中的源码鉴赏 第29课:Master HA彻底解密 ...

  2. C盘里的桌面文件移到E盘里了，然后E盘里的文件都显示到桌面上了，怎么将桌面文件还原回C盘

    1 . 直接按Windows键+R,打开"运行"对话框,在输入框中输入"regedit"命令,会打开注册表编辑窗口: 2.打开注册表文件将HKEY_CURREN ...

  3. 警惕phpstudy等开发神器使用默认配置可能带来的危险

    0x00 前言 其实这个点早在之前,我就已经想到了,当时也觉得没啥就记在了我的印象笔记里. 而今天重新把这个点拿出来讲,主要是因为今天早上在温习nmap的时候,一不小心利用这个点,拿下了一位同事的电脑 ...

  4. windows虚拟内存管理

    内存管理是操作系统非常重要的部分,处理器每一次的升级都会给内存管理方式带来巨大的变化,向早期的8086cpu的分段式管理,到后来的80x86 系列的32位cpu推出的保护模式和段页式管理.在应用程序中 ...

  5. TLB和MMU的区别

    MMU是Memory Management Unit的缩写,中文名是内存管理单元,它是中央处理器(CPU)中用来管理虚拟存储器.物理存储器的控制线路,同时也负责虚拟地址映射为物理地址,以及提供硬件机制 ...

  6. Zabbix实战-简易教程--动作（Actions）--自动发现

    一.概述 Zabbix提供了有效和非常灵活的网络自动发现功能. 设置网络发现后你可以: 加快Zabbix部署(自动添加主机.添加模板) 简化管理(自动删除主机.删除模板.禁用主机) 无需过多管理就能在 ...

  7. AWS上获取监控数据（EC2/RDS都支持）

    方法1:mon-cmd http://docs.aws.amazon.com/zh_cn/AmazonCloudWatch/latest/cli/SetupCLI.html(安装连接) ● Step ...

  8. java_web学习(七) MySQL的配置与安装

    一:下载MySQL 1.进入oracle官网 2. 3. 4. 5. 6. 7. 网址:https://dev.mysql.com/downloads/file/?id=469273 二:配置MySQ ...

  9. CodeChef June Challenge 2017

    好气啊,本来以为比赛时间还有很多,结果回家养病两天回到学校怎么比赛就结束了(雾),大约是小高考弄错了时间? 挑3道有意思的写写题解吧. Cloning 题目大意:给一个序列,每次询问两个等长区间,问区 ...

  10. UVA 1030 - Image Is Everything【模拟+思维+迭代更新】

    题目链接:uva 1030 - Image Is Everything 题目大意:有一个最大为n*n*n的立方体的一个不规整立体,由若干个1*1*1的小正方体构成(每一个小正方体被涂成不同的颜色),给 ...