基于Animate.css炫酷jQuery消息通知框插件源码.zip资源-CSDN文库

共17个文件

css：4个

jpg：3个

js：3个

版权申诉

138 浏览量 2022-11-09 22:27:24 上传评论收藏 113KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

基于Animate.css炫酷jQuery消息通知框插件源码.zip （17个子文件）

132689905643243197

jQuery_Animate.css

css

animate.min.css 60KB

notification.css 749B

default.css 5KB

index.css 2KB

2.jpg 32KB

1.jpg 24KB

img

user.jpg 23KB

arrow_right.png 3KB

fonts

icomoon.woff 1KB

icomoon.svg 2KB

icomoon.eot 2KB

icomoon.ttf 1KB

index.html 10KB

index.js 759B

notification.js 2KB

jquery-2.1.1.min.js 82KB

sass

notification.scss 661B

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>基于Animate.css的炫酷jQuery消息通知框插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title> <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="css/default.css"> <link rel='stylesheet' href='css/animate.min.css'> <link rel="stylesheet" href="css/notification.css"> <link rel="stylesheet" href="css/index.css">  </head> <body> <article class="htmleaf-container"> <header class="htmleaf-header"> <h1>基于Animate.css的炫酷jQuery消息通知框插件 <span>A Nice Corner Notification System with JavaScript and Animate.css</span></h1> <div class="htmleaf-links"> </div> </header> <div class="container"> <nav class="navbar"> <h1 class="text-center">Notification</h1> </nav> <div class="settings row"> <div class="col-md-12"> <h2 class="panel-title text-center">Position</h2> <div class="positions"> <div class="position top left selected" data-position="1"></div> <div class="position top right" data-position="2"></div> <div class="position bottom right" data-position="3"></div> <div class="position bottom left" data-position="4"></div> </div> </div> <div class="col-md-12"> <h2 class="panel-title text-center">Effect</h2> <div class="in col-md-4"> <h3>In</h3>  <fieldset> <legend>Bounce</legend> <div class="notify btn" value="bounceIn">bounceIn</div> <div class="notify btn" value="bounceInDown">bounceInDown</div> <div class="notify btn" value="bounceInLeft">bounceInLeft</div> <div class="notify btn" value="bounceInRight">bounceInRight</div> <div class="notify btn" value="bounceInUp">bounceInUp</div> </fieldset>  <fieldset> <legend>Fade</legend> <div class="notify btn" value="fadeIn">fadeIn</div> <div class="notify btn" value="fadeInDown">fadeInDown</div> <div class="notify btn" value="fadeInDownBig">fadeInDownBig</div> <div class="notify btn" value="fadeInLeft">fadeInLeft</div> <div class="notify btn" value="fadeInLeftBig">fadeInLeftBig</div> <div class="notify btn" value="fadeInRight">fadeInRight</div> <div class="notify btn" value="fadeInRightBig">fadeInRightBig</div> <div class="notify btn" value="fadeInUp">fadeInUp</div> <div class="notify btn" value="fadeInUpBig">fadeInUpBig</div> </fieldset>  <fieldset> <legend>Zoom</legend> <div class="notify btn" value="zoomIn">zoomIn</div> <div class="notify btn" value="zoomInDown">zoomInDown</div> <div class="notify btn" value="zoomInLeft">zoomInLeft</div> <div class="notify btn" value="zoomInRight">zoomInRight</div> <div class="notify btn" value="zoomInUp">zoomInUp</div> </fieldset>  <fieldset> <legend>Rotate</legend> <div class="notify btn" value="rotateIn">rotateIn</div> <div class="notify btn" value="rotateInDownLeft">rotateInDownLeft</div> <div class="notify btn" value="rotateInDownRight">rotateInDownRight</div> <div class="notify btn" value="rotateInUpLeft">rotateInUpLeft</div> <div class="notify btn" value="rotateInUpRight">rotateInUpRight</div> </fieldset>  <fieldset> <legend>Flip</legend> <div class="notify btn" value="flipInX">flipInX</div> <div class="notify btn" value="flipInY">flipInY</div> </fieldset>  <fieldset> <legend>Light</legend> <div class="notify btn" value="lightSpeedIn">lightSpeedIn</div> </fieldset>  <fieldset> <legend>Roll</legend> <div class="notify btn" value="rollIn">rollIn</div> </fieldset> </div> <div class="alert col-md-4"> <h3>Alert</h3> <fieldset> <legend></legend> <div class="notify btn" value="bounce">bounce</div> <div class="notify btn" value="flash">flash</div> <div class="notify btn" value="pulse">pulse</div> <div class="notify btn" value="rubberBand">rubberBand</div> <div class="notify btn" value="shake">shake</div> <div class="notify btn" value="swing">swing</div> <div class="notify btn" value="tada">tada</div> <div class="notify btn" value="wobble">wobble</div> </fieldset> </div> <div class="col-md-4"> <h3>Out</h3>  <fieldset> <legend>Bounce</legend> <div class="notify btn" value="bounceOut">bounceOut</div> <div class="notify btn" value="bounceOutDown">bounceOutDown</div> <div class="notify btn" value="bounceOutLeft">bounceOutLeft</div> <div class="notify btn" value="bounceOutRight">bounceOutRight</div> <div class="notify btn" value="bounceOutUp">bounceOutUp</div> </fieldset>  <fieldset> <legend>Fade</legend> <div class="notify btn" value="fadeOut">fadeOut</div> <div class="notify btn" value="fadeOutDown">fadeOutDown</div> <div class="notify btn" value="fadeOutDownBig">fadeOutDownBig</div> <div class="notify btn" value="fadeOutLeft">fadeOutLeft</div> <div class="notify btn" value="fadeOutLeftBig">fadeOutLeftBig</div> <div class="notify btn" value="fadeOutRight">fadeOutRight</div> <div class="notify btn" value="fadeOutRightBig">fadeOutRightBig</div> <div class="notify btn" value="fadeOutUp">fadeOutUp</div> <div class="notify btn" value="fadeOutUpBig">fadeOutUpBig</div> </fieldset>

评论收藏

内容反馈

版权申诉