简易的仿照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. Java学习笔记18（Object类）

    Object类是Java中最顶层的父类,所有类都是它的子类,接口不继承它 Object类中的方法: 官方资料:boolean equals(Object obj)  指示其他某个对象是否与此对象&qu ...

  2. Java学习笔记16（面向对象九：补充内容）

    总是看到四种权限,这里做一个介绍: 最大权限是public,后面依次是protected,default,private private修饰的只在本类可以使用 public是最大权限,可以跨包使用,不 ...

  3. ML笔记_机器学习基石01

    1  定义 机器学习 (Machine Learning):improving some performance measure with experience computed from data ...

  4. Node Express 初探

    一如既往,先上一张图 Express 基于 Node.js 平台,快速.开放.极简的 web 开发框架. 关于Express更多相关知识请链接至官网http://www.expressjs.com.c ...

  5. 在ASP.NET Core 2.0中使用CookieAuthentication

    在ASP.NET Core中关于Security有两个容易混淆的概念一个是Authentication(认证),一个是Authorization(授权).而前者是确定用户是谁的过程,后者是围绕着他们允 ...

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

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

  7. JS高级代码

    JS 的defineProperties 设置多个属性 var book = {}; //用Object.defineProperties()方法设置多个属性 Object.definePropert ...

  8. 使用socket搭建一个网络聊天室

    #服务器端import socket import threading #创建一个TCP端 sock = socket.socket(socket.AF_INET, socket.SOCK_STREA ...

  9. HDU 2438 Turn the corner(三分查找)

    托一个学弟的福,学了一下他的最简便三分写法,然后找了一道三分的题验证了下,AC了一题,写法确实方便,还是我太弱了,漫漫AC路!各路大神,以后你们有啥好的简便写法可以在博客下方留个言或私信我,谢谢了! ...

  10. c++(非递归排序)

    在上面一篇博客当中,我们发现普通查找和排序查找的性能差别很大.作为一个100万的数据,如果使用普通的查找方法,那么每一个数据查找平均下来就要几十万次,那么二分法的查找呢,20多次就可以搞定.这中间的差 ...