html css 磁贴,使用JS配合CSS实现Windows Phone中的磁贴效果
Windows Phone的tile设计的美丽对我来说有余音绕梁的效果。我从来不知道优雅的方块盒子布局能给我深刻的印象。因此我尝试在web里用CSS和Jquery去实现这种tile设计。我已尝试Tile Flip动画效果,它能展示两种不同的信息一个在tile的前端而另外一个就在后端。
首先我们要为tile创建和下面图片的效果一样的HTML的内容。每个tile包含了两个分别在前后的div。他们都能包含要展示的信息。下面的html代码生成所需的tile布局。
tile设计包含了CSS的类名
CSS Code复制内容到剪贴板
Internet Explorer
Windows Phone Tiles using CSS and jQuery
This is a wide tile
CSS关心的是tile的大小和对齐。(请下载源代码来查看)。这里我要对CSS重要部分进行高亮处理,这部分在tile旋转的时候会创建透明师视图。
CSS Code复制内容到剪贴板
.tile {
float:left;
font-family:'Roboto',sans-serif;
font-size:20px;
margin-left:2px;
margin-top:2px;
-moz-perspective:500px;
-webkit-perspective:500px;
-o-perspective:500px;
-ms-perspective:500px;
perspective:500px;
}
下面的JQuery代码关系Tile Flip。这里我为动画使用了 Transit,它是JQuery的一个扩展。它确实是对平滑动画有好处,同时提供大量在我们这种情况下非常需要的易用的技术,这普通易用的技术能让Tile Flip看起来想两块动画。
JavaScript Code复制内容到剪贴板
$(document).ready(function() {
$(".back").hide();
$(".tile").mouseenter(function() {
$(this).children(".front").transit( {
"rotateX":"90deg"
},500,"easeInCirc",function() {
varback;
$(this).hide();
back = $(this).siblings(".back");
back.css({
"rotateX":"-90deg"
});
back.show();
back.transit( {
"rotateX":"0deg"
},500,"easeOutCirc");
});
});
$(".tile").mouseleave(function() {
$(this).children(".back").transit( {
"rotateX":"90deg"
},500,"easeInCirc",function() {
varfront;
$(this).hide();
front = $(this).siblings(".front");
front.css({
"rotateX":"-90deg"
});
front.show();
front.transit({
"rotateX":"0deg"
},500,"easeOutCirc");
});
});
});
一开始,所有的图块都是隐藏的,rotateX是90°,前面的部分是可以看到的,rotateX是0°。所有的图块在鼠标指针进入的时候翻过来,在鼠标指针出来的时候又翻回来。
上面的图解释了在鼠标指针进入时调用的函数这个过程是怎么进行的,鼠标指针出来的时候的工作原理和这个差不多。
这个设计使用的是在最新版本的浏览器才有的CSS 远景属性。我已经测试过它了,发现在火狐20.0和chrome26.0上可以运行。最好是你在chrome里有硬件图像渲染。如果你的浏览器不支持远景属性的话,它在正交直线视图上看起来还是有效的。
html css 磁贴,使用JS配合CSS实现Windows Phone中的磁贴效果相关推荐
- JS配合css实现slide文字框缩放伸展效果
<!DOCTYPE html> <html> <head> <meta http-equiv="content" content=&quo ...
- 怎样用原生js配合css的transition写个无缝滚动
之所以想要写原生js配合css转换的无缝滚动,是因为之前在简书上看到一哥们写的一篇文章,说是在网上找了一堆js配合css transition属性写的轮播插件,可惜没有无缝的效果,结果他用原生js重写 ...
- js写css字体,js如何写出css动画 ?js写css动画的方法(代码)
本篇文章给大家带来的内容是关于js如何写出css动画 ?js写css动画的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 使用setTimeout()或者setInter ...
- linux css压缩工具下载,JS和CSS的压缩混淆工具(JsCompressor)下载 v3.0
JsCompressor是一款web前端人员必备利器,它主要用来压缩混淆JS(Javascript)与CSS,基于YUI Compressor,目的是方便不熟悉Java或者不喜欢命令行方式进行压缩的W ...
- js找css选择器,Nightwatch.js通过CSS选择器查找的问题(最新版本)
我查看了this question与CSS选择器的问题.接受的答案是完全离开nightwatch.js.我希望这种情况不是这样,但有问题.Nightwatch.js通过CSS选择器查找的问题(最新版本 ...
- JS行间改变css的方法,js改变css样式的三种方法推荐
共用代码: this is a div var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:25 ...
- js修改css hover样式,JS实现css hover操作的方法示例
JS实现css hover操作的方法示例 发布时间:2020-09-01 14:46:32 来源:脚本之家 阅读:118 作者:谢玉胜 本文实例讲述了JS实现css hover操作的方法.分享给大家供 ...
- js css代表什么,js与css的区别是什么
区别是:1.CSS为网页表现.JS为网页行为:2.css对网页进行静态修饰,可以使页面以一定的布局方式显示出来,而js对页面的各种动态效果进行处理,可用来实现网页和人交互的功能等. 本教程操作环境:w ...
- css 加载js文字,css js 环形字体,字体异步加载
html: html> 环形文字的纯js插件 html, body { height: 100%; margin: 0; overflow: hidden; background: #EA6D3 ...
最新文章
- linux 公钥登录
- 关于 Group 的另一个函数
- 隐藏滚动条或更改滚动条样式加制作三角形
- Action详解(一)
- 360浏览器 当前环境不支持支付宝控件_360 小程序来了,进攻 PC 端!
- Java设计模式学习总结(9)——结构型模式之过滤器模式(标准模式)
- 将Java项目从maven迁移到gradle
- 时间戳转为时间友好显示
- java字符串转字符串数组_Java字符串数组到字符串
- 【版本控制工具】svn服务器、客户端安装配置及eclipse的svn检出
- Ubuntu图形界面和终端界面切换快捷键
- salt自定义returner+fluent+mysql进行数据采集
- 正交db小波 图像处理 matlab,基于matlab小波工具箱的数字图像处理及小波分析
- liunx系统下搭建domian
- SpringBoot项目启动报错:Field userMapper in com.demo.controller.MemberController required a bean of type ‘c
- 解决无字幕问题--射手影音VS迅雷影音
- 语义分析(semantic analysis)概述
- matlab牛顿解方程,牛顿迭代法解非线性方程matlab实现
- 网银互联获杭州市云计算协会理事单位授牌
- 图像的二维傅里叶变换频谱图特点研究
热门文章
- linux root目录install,Linux如何建立、删除、切换目录?
- python localtime 与utc时间差5分钟_在linux中用localtime()显示的时间与实际时间不相符,不是与北京时间差8个小时,而是差15个小时...
- Qt 之 Qt/Qt Lite 自编译详解(VS/MinGW/...)
- FreeRTOS 之二 Tracealyzer for FreeRTOS(FreeRTOS+Trace) 详解(源码解析+移植)
- Oracle原理:11g的体系结构
- windows server 2012 FTP 服务器 / 创建服务器
- 乐鑫代理-启明云端分享ESP32系列教程之二:Linux搭建esp-idf环境
- 处理自己的数据集_手写代码实现KDD CUP99数据集的数据归一化处理
- matplotlib.pyplot_Matplotlib Pyplot教程
- Openwrt系统初始时间