jQuery+CSS3点击动画弹出表单代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery+CSS3点击动画弹出表单代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+CSS3点击动画弹出表单代码</title>
<link rel="stylesheet" href="css/Quttons.css">
<link rel="stylesheet" href="css/main.css">
</head>

<body>
<div class="buttonCollection">
	<div class="qutton" id="qutton_upload">
		<div class="qutton_dialog" id="uploadDialog">
			<h2>上传</h2>
			<div class="urlField">
				<input type="text" id="fileUrl" placeholder="文件地址">
			</div>
			<div id="button_basic_upload">选择文件</div>
		</div>
	</div>

	<div class="qutton" id="qutton_delete">
		<div class="qutton_dialog" id="deleteDialog">
			<h2>确定？</h2>
			<div id="button_basic_confirm_delete">确定删除</div>
		</div>
	</div>

	<div class="qutton" id="qutton_comment">
		<div class="qutton_dialog" id="commentDialog">
			<textarea name="comment" id="commentInput" placeholder="你的评论..."></textarea>
			<div id="button_basic_submit_comment">发送</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/velocity.js"></script>
<script type="text/javascript" src="js/velocity.ui.js"></script>
<script type="text/javascript" src="js/Quttons.js"></script>
<script type="text/javascript">
$(function() {
	var quttonUpload = Qutton.getInstance($('#qutton_upload'));
	quttonUpload.init({
		icon: 'images/icon_upload.png',
		backgroundColor: '#917466'
	});

	var quttonDelete = Qutton.getInstance($('#qutton_delete'));
	quttonDelete.init({
		icon: 'images/icon_delete.png',
		backgroundColor: "#eb1220"
	});

	var quttonComment = Qutton.getInstance($('#qutton_comment'));
	quttonComment.init({
		icon: 'images/icon_comment.png',
		backgroundColor: "#41aaf1"
	});
});
</script>
</body>
</html>

JS代码(Quttons.js):

(function($){
	/********************************************* Quttons.js ** Quttons are buttons made of Quantum Paper ** Author:Nash Vail **********************************************/
'use strict';
	// Exporting module to globalwindow.Qutton={
}
;
	// Factory method for producing new Material Dialog objectswindow.Qutton.getInstance = function(jQueryDOMElement){
	if(jQueryDOMElement === null) throw new Error("Passed in element doesn't exist in DOM");
	return new Qutton(jQueryDOMElement);
}
;
	// Qutton Objectfunction Qutton(jQueryDOMElement){
	// Cache the important elements as jQuery objectthis.$container = jQueryDOMElement;
	// Dialog is alias of the box that pops up on clicking the Quttonthis.$dialog = this.$container.children();
	// Cache the close button if it existsthis.$closeButton = this.$container.find('.close');
	// When button is expanded into a dialog isOpen holds truethis.isOpen = false;
	// Configuration of the popped up dialogthis.dialogConfig ={
	width:this.$dialog.outerWidth(),height:this.$dialog.outerHeight(),backgroundColor:toHex(this.$dialog.css('background-color')),borderRadius:this.$dialog.css('border-radius'),zIndex:this.$dialog.css('z-index')}
;
	// Configuration of Quttonthis.quttonConfig ={
	width:60,height:60,backgroundColor:"#EB1220",icon:"",// Url of the icon that the button is supposed to holdeasing:'easeInOutQuint'}
;
}
// Initializes the click listeners on the qutton itself,document and close buttonQutton.prototype.init = function(quttonConfig){
	$.extend(this.quttonConfig,quttonConfig);
	this.$dialog.hide();
	// Set up the icon and other properties of the divthis.setIcon();
	this.$container.css({
	'width':this.quttonConfig.width + "px",'height':this.quttonConfig.height + "px",'background-color':this.quttonConfig.backgroundColor,'border-radius':this.quttonConfig.height + "px"}
);
	// Initialize the event handlersthis.events.click.call(this);
	this.events.click_document.call(this);
	this.events.click_close_button.call(this);
}
;
	Qutton.prototype.closeDialog = function(){
	this.setIcon();
	this.animateOut();
}
;
	Qutton.prototype.openDialog = function(){
	this.removeIcon();
	this.animateIn();
}
;
	Qutton.prototype.setIcon = function(){
	this.$container.css('background-image','url(' + this.quttonConfig.icon + ')');
	this.$container.css('cursor','pointer');
}
;
	Qutton.prototype.removeIcon = function(){
	this.$container.css('background-image','none');
	this.$container.css('cursor','auto');
}
;
	// Animates the button into dialogQutton.prototype.animateIn = function(){
	var that = this;
	// Translate amount to make the dialog look like exploding from desired locationvar translate ={
	X:-1 * (this.dialogConfig.width/2 - this.quttonConfig.width/2),Y:-0.5 * (this.dialogConfig.height/2 - this.quttonConfig.width/2)}
;
	var inSequence = [{
	e:this.$container,p:{
	width:this.dialogConfig.width +"px",height:this.dialogConfig.height + "px",borderRadius:this.dialogConfig.borderRadius,backgroundColor:this.dialogConfig.backgroundColor,translateX:translate.X + this.keepInBounds().X + "px",translateY:translate.Y + this.keepInBounds().Y + "px"}
,o:{
	duration:500,easing:this.quttonConfig.easing,begin:function(){
	that.$container.after(that.$container.clone().css('visibility','hidden'));
	that.$container.css({
	'position':'absolute','z-index':'10000'}
);
}
,complete:function(){
	that.isOpen = true;
}
}
}
,{
	e:this.$dialog,p:"fadeIn",o:{
	duration:300}
}
];
	$.Velocity.RunSequence(inSequence );
}
;
	// Animtes dialog into buttonQutton.prototype.animateOut = function(){
	var that = this;
	var outSequence = [{
	e:this.$dialog,p:"fadeOut",o:{
	duration:150}
}
,{
	e:this.$container,p:{
	width:this.quttonConfig.width + "px",height:this.quttonConfig.height + "px",backgroundColor:this.quttonConfig.backgroundColor,// For a perfect circle we will give border radius the same value as height and widthborderRadius:this.quttonConfig.width,// Neutralize movement of button after it translated to maintain positiontranslateX:"0px",translateY:"0px"}
,o:{
	easing:this.quttonConfig.easing,duration:200,complete:function(){
	that.$container.css({
	'position':'static','z-index':that.dialogConfig.zIndex}
);
	that.$container.next().remove();
	that.isOpen = false;
}
}
}
];
	$.Velocity.RunSequence(outSequence);
}
;
	// Check if the explosion of Qutton is within the document bounds.// Returns an object containing values to translate in X or Y direction in order to// keep the dialog in bounds of the document on explosion.Qutton.prototype.keepInBounds= function(){
	var $window = $(window);
	var windowWidth = $window.width();
	var windowHeight = $window.height();
	var position = this.$container.position();
	// Coordinates of top center of Qutton before it converts to a a dialogvar buttonCenterTop ={
	top:position.top,left:position.left + (this.quttonConfig.width/2)}
;
	// Coordinates of the dialog once it opensvar dialogCoords ={
	top:buttonCenterTop.top - ( 0.5 * (this.dialogConfig.height/2 - this.quttonConfig.height/2)),left:buttonCenterTop.left - (this.dialogConfig.width/2)}
;
	// How much the dialog extends beyond the documentvar extend ={
	left:dialogCoords.left,right:windowWidth - (dialogCoords.left + this.dialogConfig.width),top:dialogCoords.top,bottom:windowHeight - (dialogCoords.top + this.dialogConfig.height)}
;
	// Amount to translate in X and Y if possible to bring dialog in bounds of documentvar translateInBounds ={
	X:this.calculateTranslateAmount(extend.left,extend.right),Y:this.calculateTranslateAmount(extend.top,extend.bottom)}
;
	return translateInBounds;
}
;
	// Calculates and returns the amount to translate the dialog to keep in bounds of the windowQutton.prototype.calculateTranslateAmount = function(extendSideOne,extendSideTwo){
	if((extendSideOne < 0 && extendSideTwo < 0) || (extendSideOne > 0 && extendSideTwo > 0 )){
	return 0;
}
// We want to translate in opposite direction of extensionreturn (extendSideOne < 0 ? -extendSideOne:extendSideTwo);
}
;
	// Event listenersQutton.prototype.events ={
	// Handles the click on Quttonclick:function(){
	var that = this;
	this.$container.on('click',function(){
	if(!that.isOpen){
	that.openDialog();
}
}
);
}
,// Handle clicks on the document,aimed at closing the dialogclick_document:function(){
	var that = this;
	$(document).on('click',function(event){
	if(!$(event.target).closest(that.$container.selector).length){
	if(that.isOpen){
	that.closeDialog();
}
}
}
);
}
,// Initializes clicks on close button if it existsclick_close_button:function(){
	var that = this;
	if(this.$closeButton.length){
	this.$closeButton.on('click',function(event){
	if(that.isOpen){
	that.closeDialog();
}
}
);
}
}
}
;
	// Converts and returns RGB color code to Hex Code(String)function toHex(rgb){
	rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
	return (rgb && rgb.length === 4) ? "#" + ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) + ("0" + parseInt(rgb[3],10).toString(16)).slice(-2):'';
}
}
)(jQuery);

CSS代码(Quttons.css):

*{margin:0;padding:0;}
.qutton{box-sizing:content-box !important;background-repeat:no-repeat !important;background-position:center center !important;box-shadow:0 3px 6px 0 rgba(0,0,0,0.3);cursor:auto;}
.qutton.close{position:absolute !important;cursor:pointer;}

附件:下载该文件资源,减少时间成本(增值服务)