文档章节

JQuery控制CSS3动画与超方便的清除Float

睡觉谁教谁叫呢
 睡觉谁教谁叫呢
发布于 2014/06/08 17:37
字数 647
阅读 73
收藏 0
点赞 0
评论 0

先上css代码:

body,ul,li,a{
    padding: 0 ;
    margin:0;
    font-size: 18px;
    color: white;
    font-weight: 900;
}
.all{
    width: 260px;
    height: 240px;
    margin:100px auto;
}
.clear:after{
    content: ".";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
}
.Css{
    width: 140px;
    height: 140px;
    background: #6bd179;
    float: left;
    text-align: center;
    line-height: 140px;
}
.Node{
    width: 120px;
    height: 70px;
    background: #309ed5;
    float: left;
    text-align: center;
    line-height: 70px;
}
.JQuery{
    width: 120px;
    height: 70px;
    background: #3ebfd5;
    float: left;
    text-align: center;
    line-height: 70px;
}
.Javascript{
    width: 100px;
    height: 100px;
    background: #ebb742;
    float: left;
    text-align: center;
    line-height: 100px;
}
.Html{
    width: 160px;
    height: 100px;
    background: #80e35e;
    float: left;
    text-align: center;
    line-height: 100px;
}
@-webkit-keyframes FZ {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(180deg);
        opacity: 0;
    }
}
@-webkit-keyframes XZ {
    0% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        opacity: 0;
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(180deg);
        opacity: 1;
    }
}

.clear:after{

    content: ".";//生成内容作为最后一个元素,至于content里面是点还是其他都是可以的。

    height: 0;//避免生成内容破坏原有布局的高度。

    visibility: hidden;//使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互。

    display: block; //使生成的元素以块级元素显示,占满剩余空间。

    clear: both;

}

要在IE下触发 hasLayout  还需要多设置一个属性: zoom:1。

这个原理就是给父元素设置类名,css样式里用after伪元素在浮动后的子元素添加。


这样做的好处喃?我也是在网上看的,大神都说:“结构和语义化完全正确,代码量居中



html:


JQuery控制的CSS3动画,还是有些bug,大家把代码复制下来 运行运行就知道了。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="1.css"/>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="all clear">
    <div class="Css">Css</div>
    <div class="Node">Node.js</div>
    <div class="JQuery">JQuery</div>
    <div class="Javascript">Javascript</div>
    <div class="Html">Html</div>
</div>
<script>
    $(function(){
        $(".Css").on({mouseover:function(){
            $(this).css({
                webkitAnimation:"FZ 0.5s linear"
            },setTimeout(function(){
                $(".Css").css({
                    webkitAnimation:"",
                    background:"white",
                    color:"#6bd179"
                });
            },500)
            );
        },mouseout:function(){
            $(this).css({
                webkitAnimation:"",
                background:"#6bd179",
                color:"white"
            });
        }
        });
        $(".Javascript").on({mouseover:function(){
            $(this).css({
                        webkitAnimation:"XZ 0.5s linear"
                    },setTimeout(function(){
                $(".Javascript").css({
                    webkitAnimation:"",
                    background:"white",
                    color:"#ebb742"
                });
            },500));
        },mouseout:function(){
            $(this).css({
                webkitAnimation:"",
                background:"#ebb742",
                color:"white"
            });
        }
        });
        $(".Node").on({mouseover:function(){
            $(this).css({
                webkitAnimation:"FZ 0.5s linear"
            },setTimeout(function(){
                $(".Node").css({
                    webkitAnimation:"",
                    background:"white",
                    color:"#309ed5"
                });
            },500));
        },mouseout:function(){
            $(this).css({
                webkitAnimation:"",
                background:"#309ed5",
                color:"white"
            });
        }
        });
        $(".JQuery").on({mouseover:function(){
            $(this).css({
                webkitAnimation:"XZ 0.5s linear"
            },setTimeout(function(){
                $(".JQuery").css({
                    webkitAnimation:"",
                    background:"white",
                    color:"#3ebfd5"
                });
            },500));
        },mouseout:function(){
            $(this).css({
                webkitAnimation:"",
                background:"#3ebfd5",
                color:"white"
            });
        }
        });
        $(".Html").on({mouseover:function(){
            $(this).css({
                webkitAnimation:"FZ 0.5s linear"
            },setTimeout(function(){
                $(".Html").css({
                    webkitAnimation:"",
                    background:"white",
                    color:"#80e35e"
                });
            },500));
        },mouseout:function(){
            $(this).css({
                webkitAnimation:"",
                background:"#80e35e",
                color:"white"
            });
        }
        });
    });
</script>
</body>
</html>


© 著作权归作者所有

共有 人打赏支持
睡觉谁教谁叫呢
粉丝 4
博文 4
码字总数 2353
作品 0
成都
来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

写的一个轻量级javascript框架的设计模式

公司一直使用jQuery框架,一些小的项目还是觉得jQuery框架太过于强大了,于是自己周末有空琢磨着写个自己的框架。谈到js的设计模式,不得不说说js的类继承机制,javascript不同于PHP可以轻松...

thinkyoung ⋅ 2014/12/05 ⋅ 0

【BS学习】jQuery视频总结

【背景】 这两天看完了jQuery视频的视频,对学习到的东西做一个记录。 【内容】 一、JQuery框架简介 1、官方网站:www.jquery.com 2.创立者:John Resig 3.历史: 4.特点:(1)Write Less,...

yym15732626210 ⋅ 03/12 ⋅ 0

dabeng/OrgChart

Native JavaScript(ES6) Version Web Components Version Foreword First of all, thanks a lot for wesnolte's great work -- jOrgChart. The thought that using nested tables to build o......

dabeng ⋅ 06/07 ⋅ 0

WEB前端开发学习:调试过很多次bug,你了解Chrome控制台的$符的用法吗?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 06/01 ⋅ 0

huangdf/seezoon-framework-all

项目介绍 基于spring,mybatis,shiro面向接口开发的的一套后台管理系统,方便快速开发;采用常用的技术栈,降低学习成本,项目完全前后端分离,后端定义统一的接口格式,统一参数校验,统一权...

huangdf ⋅ 04/20 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

jQuery学习笔记--效果,操作html元素,遍历DOM树

参考W3school: http://www.w3school.com.cn/jquery/jqueryhideshow.asp jQuery效果: 隐藏: 基础语句: $(selector).hide(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以...

codingcoge ⋅ 05/19 ⋅ 0

jQuery函数attr()和prop()的区别

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。 但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别...

Apirl ⋅ 05/16 ⋅ 0

jQuery之validate验证表单

访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 vali...

codingcoge ⋅ 05/19 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Mahout推荐算法API详解

前言 用Mahout来构建推荐系统,是一件既简单又困难的事情。简单是因为Mahout完整地封装了“协同过滤”算法,并实现了并行化,提供非常简单的API接口;困难是因为我们不了解算法细节,很难去根...

xiaomin0322 ⋅ 26分钟前 ⋅ 0

WampServer默认web服务器根目录位置

安装WampServer之后的web服务器根目录默认位置在WampServer安装目录下的www:

临江仙卜算子 ⋅ 27分钟前 ⋅ 0

Redux的一些手法记录

Redux Redux的基本概念见另一篇文。 这里记录一下Redux在项目中的实际操作的手法。 actions 首先定义action.js,actions的type,可以另起一个action-type.js文件。 action-type.js用来存...

LinearLaw ⋅ 28分钟前 ⋅ 0

android 手势检测(左右滑动、上下滑动)

GestureDetector类可以让我们快速的处理手势事件,如点击,滑动等。 使用GestureDetector分三步: 1. 定义GestureDetector类 2. 初始化手势类,同时设置手势监听 3. 将touch事件交给gesture...

王先森oO ⋅ 42分钟前 ⋅ 0

java 方法的执行时间监控 设置超时(Future 接口)

java 方法的执行时间监控 设置超时(Future 接口) import java.util.concurrent.Callable; import java.util.concurrent.ExecutionException; import java.util.concurrent.Executor......

青峰Jun19er ⋅ 47分钟前 ⋅ 0

一名开源小白的Apache成长自述

今天收到了来自Apache Vote我成为Serviceomb项目Committer的邮件,代表自己的贡献得到了充分的肯定;除了感谢团队的给力支持,我更希望将自己的成长经历——如何践行Apache Way的心得介绍给大...

微服务框架 ⋅ 49分钟前 ⋅ 0

vim介绍、颜色显示和移动光标、一般模式下复制、剪切和粘贴

1.vim 是 vi 的升级版 vim 是带有颜色显示的 mini安装的系统,一般都不带有vim [root@aminglinux-128 ~]# yum install -y vim-enhanced已加载插件:fastestmirror, langpacksLoading mir...

oschina130111 ⋅ 49分钟前 ⋅ 0

Deepin 操作系统四面楚歌

作为国内做的最好的 Linux 发行版,源自 Debian sid 的 Deepin 目前正面临重重困境,新版本不断延期,开发人员离职,bug 长期得不到修复,和 Debian/Ubuntu 的兼容性问题也面临越来越严重的挑...

六库科技 ⋅ 50分钟前 ⋅ 0

MyBatis之动态sql

我们需要知道的是,使用mybatis重点是对sql的灵活解析和处理。在原先的UserMappser.xml中,我们这样查询表中满足条件的记录 : 123 <select id="findUserList" parameterType="userQuery...

瑟青豆 ⋅ 50分钟前 ⋅ 0

这届俄罗斯世界杯的冷门那么多怎么办?

最纯粹的世界杯,最神奇的大冷门。 德国0比1被墨西哥摩擦了。 日本历史性的赢了哥伦比亚。 C罗也挑平了西班牙。 梅西被冰岛狮吼吼愣神了。 就连11次进世界杯4强的巴西也被瑞士逼平了。 天台已...

开源中国众包平台 ⋅ 51分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部