animate.css效果预览页

一、编写原因:

由于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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值