简易的仿照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. 使用腾讯云无服务器云函数（SCF）分析天气数据

    欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者:李想 无服务器云函数(SCF)是腾讯云提供的Serverless执行环境,也是国内首款FaaS(Function as a Service ...

  2. java String 不可变

    关于String不可变的问题也看了很多,最近看了一篇讲的非常好的文章,总结如下 所谓的不可变,并非真的不可变String s = "123"; s = "456" ...

  3. 【ASP.NET MVC系列】数据验证和注解

    [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作篇)(下) [04]浅谈ASP. ...

  4. UML 类图基础

    先留个坑, 后续再填 UML 类图中主要包括以下几种关系: 1. 泛化: 定义:继承关系,指定子类继承父类的所有特征与行为. 图形:三角形箭头,指向父类.         2. 实现 定义:类与接口的 ...

  5. 移动端吸顶（iOS与安卓）

    有的时候经常会遇到移动端吸顶效果,开始我也只是上网查了一下,分别有iOS和android两种样式,如下: /*!*Android*!*/ .head { position: fixed; top: 0 ...

  6. 记一次lvs-tunnel模式的故障分析（7）

    一.测试环境   类型 IP 负载均衡器 eth0:10.20.73.20 VIP eth0:0 10.20.73.29 后端真实机 10.0.0.7(web01).10.0.0.9(web02)   ...

  7. 将控制台信息显示在前台页面的js插件

    在拿出插件之前,先回顾一下apply()的用法,这里和call()做比较. JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法,它们的语法分别为: /* ...

  8. Mistakes in Hello World

    今天在cmd中用Python写第一行代码"Hello World"出现错误. 写好的源码"HelloWorld.py"存放于" F:\learning ...

  9. async/await 执行顺序详解

    随着async/await正式纳入ES7标准,越来越多的人开始研究据说是异步编程终级解决方案的 async/await.但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 ...

  10. Django普通文件上传

    前端代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...