animate.css效果预览页

来源：互联网发布：vb应用程序编辑：程序博客网时间：2024/05/22 06:25

一、编写原因：

由于animate.css作者的官方效果预览网站无法登陆，为了方便自己预览各个效果

二、实现思路：

刚开始想把animate.css的所有类都筛选出来，写个静态的数组，但是由于比较懒，所以想了其他办法:用正则表达式从样式表里面筛选出来所有的类，然后当select触发change事件的时候来改变实例的class

三、代码实现：

样式表：base.css主要是用来reset样式的、style.css的样式如下

html{height: 100%;}body{background: #E9E9E9;font-family: 'Poiret One',cursive,serif;height: 100%;overflow: hidden;}.main{width: 960px;margin: 0 auto;height: 100%;}#prew{padding-top: 100px;font-size: 50px;color: #666;text-align: center;}.classStyle{font-size: 40px;height:60px;line-height: 60px;background-color: #3299BB;background: rgba(50, 153, 187, .5) !important;text-shadow: 0 1px white;width:100%;margin-top: 50px;border-radius: 10px;outline: none;padding-left: 50px; }

（1）使用jQuery+animate.css

index.html 代码

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>animate.css</title><meta name="viewport" content="width=device-width; initial-scale=1.0"><link rel="stylesheet" type="text/css" href="css/base.css"><link href="css/animate.css" rel="stylesheet" type="text/css" /><link href="css/style.css" rel="stylesheet" type="text/css" /><script src="js/jquery.js"></script></head><body><div class="main"><h1  id="prew">Animate Preview</h1><select id="class_container" class="classStyle"></select></div><script type="text/javascript">$(function(){$.ajax({url:"css/animate.css",success: function(r){var arr = r.match(/\.\w* \{/g),classes = [],//所有的类名template = "",$select = $("#class_container"),$prew = $("#prew");for(var i = 0;i<arr.length;i++){//去除animated类if(i == 0){template += '<option value="">请选择样式</option>';}else{classes[i] = arr[i].match(/\w+/);template += '<option value="'+classes[i]+'">'+classes[i]+'</option>';}}$select.html(template);$select.change(function(){var val = $(this).val();$prew.removeClass().addClass("animated").addClass(val);$prew[0].addEventListener("webkitAnimationEnd",function(){$prew.removeClass();});})}})})</script></body></html>

（2）由于最近刚开始学习angularJs，所以又用angular写了一个

<!DOCTYPE html><html lang="en" ng-app="myApp"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>animate.css</title><meta name="viewport" content="width=device-width; initial-scale=1.0"><link rel="stylesheet" type="text/css" href="../css/base.css"><link href="../css/animate.css" rel="stylesheet" type="text/css" /><link href="../css/style.css" rel="stylesheet" type="text/css" /><script src="../js/angular.js"></script></head><body><div class="main" ng-controller="classesCtrl"><animatePre></animatePre><select id="class_container" class="classStyle" ng-model="value" ng-options="item for item in items"><option value="">请选择</option></select></div><script type="text/javascript">var myApp_module = angular.module("myApp",[]);myApp_module.controller('classesCtrl', ['$scope','$http', function($scope,$http){$http.get("../css/animate.css").success(function(r){var arr = JSON.stringify(r.match(/\.\w* \{/g));$scope.items = arr.match(/\w+/g);$scope.items.shift();});}]);myApp_module.directive("animatepre",function(){return {restrict: 'EA',controller:'',template: '<h1 id="prew" class="animated {{value}}" data-value="{{value}}">Animate Preview</h1>',replace: true,link: function(scope,element,attrs){element[0].addEventListener("webkitAnimationEnd",function(){element.removeClass(element.attr("data-value"));this.removeEventListener("webkitAnimationEnd");});}}});</script></body></html>

页面效果：

0 0