简易的仿照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. 内核,配置WinDbg,调试操作系统(双机调试)

    配置WinDbg,调试操作系统(双机调试) PS: 设置双机调试之前,请先安装虚拟机,并且安装好XP系统.这里不做演示.直接设置. 一丶WinDbg的设置 1) 配置WinDbg的环境,在path变量 ...

  2. 手把手教你构建 Kubernetes 1.8 + Flannel 网络（一）

    一.环境说明 操作系统:CentOS7 Kubernetes版本:v1.8.4 Docker版本:v17.06-ce Flannel 版本: flannel-v0.9.1 二.Ntp 服务器配置   ...

  3. PHP使用文件流下载文件方法（附：解决下载文件内容乱码问题）

    1.flush - 刷新输出缓冲 2.ob_clean - 清空(擦掉)输出缓冲区 此函数用来丢弃输出缓冲区中的内容. 此函数不会销毁输出缓冲区,而像 ob_end_clean() 函数会销毁输出缓冲 ...

  4. JavaScript获取当前url路径

    1.假设当前页完整地址是:http://localhost:61768/Home/Index?id=2 //获取当前窗口的Url var url = window.location.href; //结 ...

  5. vijos 1110小胖邮递员；bzoj 1210: [HNOI2004]邮递员

    Description Smith在P市的邮政局工作,他每天的工作是从邮局出发,到自己所管辖的所有邮筒取信件,然后带回邮局.他所管辖的邮筒非常巧地排成了一个m*n的点阵(点阵中的间距都是相等的).左上 ...

  6. tju_4147 kd树+最小生成树

    kd树模板+全图最小生成树 标签(空格分隔): kd树+最小生成树 题目链接 题意: k维太空中有n个点,每个点可以与距离它m近的点连边,现在给你一堆点,并给出坐标,现在要建立通信网络,一些可以互相到 ...

  7. kafka数据迁移实践

    欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者:mikealzhou 本文重点介绍kafka的两类常见数据迁移方式:1.broker内部不同数据盘之间的分区数据迁移:2.不同broker ...

  8. vi 方向键和Backspace键失效问题的解决方法

    安装的ubuntu默认的编辑器是vi,遇到了两个问题: ① insert模式下,按方向键将产生A.B.C.D等字符,解决方案: :set nocompatible ② insert模式下Backspa ...

  9. js闭包的真正理解

    <高级程序设计>上,这样说:当在函数内部定义了其他函数时候,就创建了闭包.闭包有权访问包含函数内部的所有变量. 这个说的太晦涩了,而且我觉得很容易理解错,闭包就是一个嵌套函数嘛?但是我觉得 ...

  10. 工作小结（关于webpack）

    今天在工作中遇到了一个新问题,是关于webpack的. 是这样的,我在项目中添加了一个新页面,修改完配置文件后,开始运行,刚开始并没有什么问题,很顺利,后来我又添加了一个页面,然后修改配置文件,然后运 ...