简易的仿照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. 【读书笔记】【深入理解ES6】#4-扩展对象的功能性

    对象类别 ES6规范清晰定义了每一个类别的对象. 普通(Ordinary)对象 具有JS对象所有的默认内部行为 特异(Exotic)对象 具有某些与默认行为不符的内部行为 标准(Standard)对象 ...

  2. js中的伪数组

    一, 伪数组 1. 具有length属性 2. 按索引方式存储数据 3. 不具有数组的方法, 比如push(),pop()等 二, 生成伪数组的方法 在js中生成伪数组的方法比较多 1. functi ...

  3. MDK C++中对内联的极度优化

    先来看看我们SmartIRQ的具体实现 // 智能IRQ,初始化时备份,销毁时还原 class SmartIRQ { public: force_inline SmartIRQ(bool enable ...

  4. Django---->视图(View)

    视图层之路由配置系统(views) URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于这个 ...

  5. JS原型、原型链深入理解

    原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性. 一.初识原 ...

  6. logback的使用和logback.xml详解

    一.logback的介绍 Logback是由log4j创始人设计的另一个开源日志组件,官方网站: http://logback.qos.ch.它当前分为下面下个模块: logback-core:其它两 ...

  7. Web前端：改变鼠标样式

    <span style="cursor:auto">浏览器设置的光标</span><br /> <span style="cur ...

  8. vueThink权限配置

    vueThink中的 admin 默认是展示所有权限,其他的权限组用户就要自己去特定进行配置 http://vuedemo.cn:8181 这里我是默认本地配置了apache到  php\public ...

  9. 解Linux SSH命令大全，新手必看SSH命令

    下面介绍一些基本的常用的Linux SSH命令,都是一些很简单的Linux SSH命令,新手掌握了这几个,一般管理一般的vps或者linux主机就可以了!     我们的教程介绍了putty的使用方法 ...

  10. Rootkit 核心技术——利用 nt!_MDL（内存描述符链表）突破 SSDT（系统服务描述符表）的只读访问限制 Part I

    -------------------------------------------------------- 在 rootkit 与恶意软件开发中有一项基本需求,那就是 hook Windows ...