- 浏览: 437631 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
ubuntu的疯狂:
推荐一份完整的教程:http://blog.ddlisting ...
Emberjs学习 -
ptz19:
请问,如果把合并前的文件,不要dest 目标目录来。如: js ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
楼主,还有个问题,<a href="" ...
gulp下静态资源的合并、压缩、MD5后缀 -
zhouzq1008:
感谢楼主,用到了您的代码, 但现在好像有改动 否则会报错:修改 ...
gulp下静态资源的合并、压缩、MD5后缀 -
denverj:
感谢分享~
Emberjs学习
据说 translateZ(0)可以触发GPU渲染,提高动画的性能。
切换的属性变化,可以有2种:
1. transform:translateX的值
2. left的值;
这里动画切换比较简单,看不出有什么优势。
二、采用translateX属性值控制容器位置:
二、采用left属性值控制容器位置:
切换的属性变化,可以有2种:
1. transform:translateX的值
2. left的值;
这里动画切换比较简单,看不出有什么优势。
二、采用translateX属性值控制容器位置:
<!DOCTYPE html> <html><head> <title>qqqqqqqq</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <meta content="telephone=no" name="format-detection" /> <link type="text/css" href="lib/normalize.css" rel="stylesheet"/> <style> body,#wrapper{min-height:100%;height:100%;overflow-x:hidden;/**/} #wrapper section{position:absolute;width:100%;height:100%;min-height:100%;overflow:hidden;} section{top:0;left:0;opacity:0;-webkit-transform:translate(100%,0,0);z-index:1;} section.active{-webkit-transform:translateX(0);z-index:2;opacity:1; /*transition:all 1s;*/} /*更改元素的display属性,一些浏览器会触发重新布局,导致里面滚动条回到顶部。 section.none{display:none;}*/ /*真正的内容容器*/ section .container{height:100%;overflow:auto;} section.slideLeftPre{ -webkit-animation: slideLeftPre 1s 1; } @-webkit-keyframes slideLeftPre{ 0%{-webkit-transform:translateX(0);opacity:1;z-index:2;} 99%{-webkit-transform:translateX(-99%);opacity:1;z-index:2;} 100%{-webkit-transform:translateX(-100%);opacity:0;z-index:2;} } section.slideLeftNext{ -webkit-animation: slideLeftNext 1s 1; } @-webkit-keyframes slideLeftNext{ 0%{-webkit-transform:translateX(100%);opacity:1;z-index:2;} 100%{-webkit-transform:translateX(0);opacity:1;z-index:2;} } section.slideRightPre{ -webkit-animation: slideRightPre 1s 1; } @-webkit-keyframes slideRightPre{ 0%{-webkit-transform:translateX(0);opacity:1;z-index:2;} 99%{-webkit-transform:translateX(99%);opacity:1;z-index:2;} 100%{-webkit-transform:translateX(100%);opacity:0;z-index:2;} } section.slideRightNext{ -webkit-animation: slideRightNext 1s 1; } @-webkit-keyframes slideRightNext{ 0%{-webkit-transform:translateX(-100%);opacity:1;z-index:2;} 100%{-webkit-transform:translateX(0);opacity:1;z-index:2;} } .s1{background:#ccc;} .s2{background:gold;} .s3{background:pink;} .s4{background:green;} .swipeTip{position:absolute;width:3em;line-height:2em;bottom:0;left:0;right:0;margin:auto;z-index:10;text-align:center; color:#fff; background:#000; border-radius:100%; /**/-webkit-animation: st 1s infinite; animation: st 1s infinite; } @-webkit-keyframes st{ 0%{bottom:0;} 50%{bottom:0.8em;} 100%{bottom:0em;} } @keyframes st{ 0%{bottom:0;} 50%{bottom:0.4em;} 100%{bottom:0em;} } .slideLeft,.slideRight{font-size:36px;} </style> </head> <body onload="init()"> <div id="wrapper"> <section class="s1 active"> <div class="container"> <div style="border:1px solid red;height:1000px;"> <p>只是前面的一段文字</p> <a href="#" class="slideLeft">向左</a> <a href="#" class="slideRight">向右</a> </div> s1 <a href="#" class="slideLeft">向左</a> <a href="#" class="slideRight">向右</a> </div> </section> <section class="s2"> <div class="container"> <div style="border:1px solid blue;height:300px;">我是S2 </div> s2<a href="#" class="slideLeft">向左</a> <a href="#" class="slideRight">向右</a> </div> </section> <section class="s3"> <div class="container"> s3<a href="#" class="slideLeft">向左</a> <a href="#" class="slideRight">向右</a> </div> </section> <section class="s4"> <div class="container"> s4<a href="#" class="slideLeft">向左</a> <a href="#" class="slideRight">向右</a> </div> </section> </div> <script> var pfx = ["webkit", "moz", "MS", "o", ""]; function PrefixedEvent(element, type, callback) { for (var p = 0; p < pfx.length; p++) { if (!pfx[p]) type = type.toLowerCase(); element.addEventListener(pfx[p]+type, callback, false); } } var UID = (function(){ var id = new Date().getTime(); return function(){ return id++; } })(); function init(){ var sections = document.querySelectorAll("section"); var size = sections.length; var index = 0; var lock = false; for(var i=0; i < size; i++){ PrefixedEvent(sections[i], "AnimationEnd", function(){ var cls = ""; if(/Next/.test(this.className)){ cls = " active"; lock = false; }else{ cls = " none"; } this.className = this.className.replace(/slideLeftPre|slideLeftNext|slideRightPre|slideRightNext/g,"").replace(/\s*$/,"") + cls; }); } document.body.addEventListener("touchmove",function(e){ //e.preventDefault(); },false); document.body.addEventListener("touchend",function(e){ e.preventDefault(); if(e.target.tagName.toUpperCase() === "A"){ e.preventDefault(); if(lock){ return; } lock = true; if(e.target.className === "slideLeft"){ sections[index].className = sections[index].className.replace(/\s*active\s*/g,"") + " slideLeftPre"; index++; index = index % size; sections[index].className = sections[index].className.replace(/\s*none\s*/g,"") + " slideLeftNext"; }else if(e.target.className === "slideRight"){ sections[index].className = sections[index].className.replace(/\s*active\s*/g,"") + " slideRightPre"; index--; index = (index+size) % size; sections[index].className = sections[index].className.replace(/\s*none\s*/g,"") + " slideRightNext"; } } },false); } </script> </body></html>
二、采用left属性值控制容器位置:
section{top:0;left:100%;opacity:0;} section.active{left:0;z-index:2;opacity:1; /*transition:all 1s;*/} section.slideLeftPre{ -webkit-animation: slideLeftPre 1s 1; } @-webkit-keyframes slideLeftPre{ 0%{left:0;opacity:1} 99%{left:-99%;opacity:1} 100%{left:-100%;opacity:0} } section.slideLeftNext{ -webkit-animation: slideLeftNext 1s 1; } @-webkit-keyframes slideLeftNext{ 0%{left:100%;opacity:1;z-index:2;} 100%{left:0;opacity:1;z-index:2;} } section.slideRightPre{ -webkit-animation: slideRightPre 1s 1; } @-webkit-keyframes slideRightPre{ 0%{left:0;opacity:1} 99%{left:99%;opacity:1} 100%{left:100%;opacity:0} } section.slideRightNext{ -webkit-animation: slideRightNext 1s 1; } @-webkit-keyframes slideRightNext{ 0%{left:-100%;opacity:1;z-index:2;} 100%{left:0;opacity:1;z-index:2;} }
发表评论
-
简单下拉框模拟
2015-06-19 16:19 686<!doctype html> < ... -
四个方向鼠标滑入的css动画
2015-05-14 18:08 2111<!DOCTYPE html> <ht ... -
icon font VS svg font
2015-05-14 15:21 1151关于字体图标和SVG图标,CSS TRICK网站有较好的说明。 ... -
简单的css3全屏滚动
2015-04-27 16:41 1394<!DOCTYPE html> <ht ... -
纯CSS3的图片slider
2015-04-16 14:36 919<div class="container ... -
移动端的“点透”问题
2015-04-15 14:13 1598移动端的“点透”问题,这篇博文有较好的说明: http://w ... -
如何读写伪类元素的样式?
2014-12-17 10:00 1214示例: <p class="example ... -
模拟滚动条
2014-04-10 09:37 852<!DOCTYPE html> <ht ... -
纯CSS3的loading图案
2014-03-26 10:57 1112转自:http://www.cssplay.co.uk/men ... -
纯CSS3的图片集点击放大
2014-03-26 10:15 5116<div class="slideshow ... -
css3 简单slider
2014-01-24 15:16 3430<!DOCTYPE html> <ht ... -
css3的饼图
2013-12-31 15:12 1155来自:http://atomicnoggin.ca/test/ ... -
图片倒影
2013-09-18 11:13 1005<!DOCTYPE html PUBLIC &quo ... -
动态添加style元素
2013-09-03 15:42 1012/** * @description IE6~9下,页 ... -
备份一个简单的分页条
2013-07-20 10:57 1025<div class="pageBar ... -
页面布局:分5个区域
2013-05-15 17:19 930<!DOCTYPE html PUBLIC &quo ... -
关于getBoundingClientRect 与 getClientRects
2012-08-19 14:29 2971getBoundingClientRect 可以用来获取 元 ... -
兼容IE的 position:fixed
2011-06-15 14:38 2476<!DOCTYPE html PUBLIC &q ... -
三角区域
2010-09-02 08:57 888#triangle { border: 2px ... -
关于未设置父元素宽度的block子元素显示
2010-08-23 16:57 1639如果block父元素设置了宽度,而block子元素又没有设置宽 ...
相关推荐
这是一款效果非常炫酷的纯CSS3全屏幻灯片特效。该幻灯片特效的效果类似于全屏水平方向的单页滚动效果。该幻灯片效果使用纯CSS3制作,代码仅有100多行,非常的小巧。
51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery...
要在移动设备中实现单页滚动,请支持水平滚动和垂直滚动,并支持animate.css的所有动画指令。 在线演示 这是一个 安装 npm install fullpage-vue --save 如果要使用动画指令,请安装animate.css npm install ...
51.jquery简单控制上下、左右四方向滚动的特效插件下载 52.jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53.jquery网站顶部滑动广告插件 54.jquery自动播放图片滚动漂浮式效果的示例 55.jquery贴图...
1.结合fullpage.js实现全屏滚动 2.CSS中linear-gradient() 函数用于创建一个线性渐变的 “图像”。 background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 值 描述 ...
51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery贴图...
51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery贴图...
25.全屏广告代码.html ...27.如何用css自定义鼠标形状?...42.用css实现简单的进度条.html 43.在同一页面设置不同文字链接效果的样式.html 44.支持按键盘方向键实现翻页跳转的效果.html 45.支持键盘方向键.html
处理不同的屏幕方向 Android 动画 支持快速滚动 - 高渲染注册表提交和批准 自动自定义每件事在几分钟内(100% 自定义) Google Play 广告事件控制(横幅和全屏)选项菜单>联系页面选项菜单>关于我们选项菜单>主页...
51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery贴图...
第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 ...
第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 ...
利用GUI特性创建交互性 <br>12.1 网站和传统的GUI <br>12.2 GUI设计的含义 <br>12.3 窗口 <br>12.4 全屏窗口 <br>12.5 子窗口 <br>12.5.1 警告 <br>12.5.2 确认 <br>12.5.3 提示 ...
利用GUI特性创建交互性 <br>12.1 网站和传统的GUI <br>12.2 GUI设计的含义 <br>12.3 窗口 <br>12.4 全屏窗口 <br>12.5 子窗口 <br>12.5.1 警告 <br>12.5.2 确认 <br>12.5.3 提示 ...
0396 将CSS样式表应用到页面中 222 0397 在页面的源码中直接定义样式表 222 0398 动态加载主题到页面中 223 0399 利用Table布局Web页面 223 0400 FrameSet框架的应用 224 0401 IFrame框架的应用 224 ...
Java 3DMenu 界面源码 5个目标文件 内容索引:Java源码,窗体界面,3DMenu Java 3DMenu 界面源码,有人说用到游戏中不错,其实平时我信编写Java应用程序时候也能用到吧,不一定非要局限于游戏吧,RES、SRC资源都有,都...
一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化,用函数分别实现 2、对文件的加密,解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型(源代码...
2 <br>0003 设置程序代码行序号 3 <br>0004 开发环境全屏显示 3 <br>0005 设置窗口的自动隐藏功能 3 <br>0006 根据需要创建所需解决方案 4 <br>0007 如何使用“验证的目标架构”功能 4 ...