jQuery右下角浮动意见反馈表js代码

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

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

以下是 jQuery右下角浮动意见反馈表js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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右下角浮动意见反馈表</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="feedback">
	<span class="color color-1"></span>
    <span class="color color-2"></span>
    <span class="color color-3"></span>
    <span class="color color-4"></span>
    <span class="color color-5"></span>
    <div class="section">
        <h6><span class="arrow up"></span>Feedback</h6>
        <p class="message">Please include your contact information if you'd like to receive a reply.</p>
        <textarea></textarea>
        <a class="submit" href="#">Submit</a>
    </div>
</div>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="js/script.js"></script>
</body>
</html>

JS代码(script.js):

$(document).ready(function(){
	// The relative URL of the submit.php script.// You will probably have to changeit.var submitURL = '../submit.php';
	// Caching the feedback object:var feedback = $('#feedback');
	$('#feedback h6').click(function(){
	// We are storing the values of the animated// properties in a separate object:var anim={
	mb:0,// Margin Bottompt:25// Padding Top}
;
	var el = $(this).find('.arrow');
	if(el.hasClass('down')){
	anim ={
	mb:-270,pt:10}
;
}
// The first animation moves the form up or down,and the second one// moves the "Feedback heading" so it fits in the minimized versionfeedback.stop().animate({
	marginBottom:anim.mb}
);
	feedback.find('.section').stop().animate({
	paddingTop:anim.pt}
,function(){
	el.toggleClass('down up');
}
);
}
);
	$('#feedback a.submit').live('click',function(){
	var button = $(this);
	var textarea = feedback.find('textarea');
	// We use the working class not only for styling the submit button,// but also as kind of a "lock" to prevent multiple submissions.if(button.hasClass('working') || textarea.val().length < 5){
	return false;
}
// Locking the form and changing the button style:button.addClass('working');
	$.ajax({
	url:submitURL,type:'post',data:{
	message:textarea.val()}
,complete:function(xhr){
	var text = xhr.responseText;
	// This will help users troubleshoot their form:if(xhr.status == 404){
	text = 'Your path to submit.php is incorrect.';
}
// Hiding the button and the textarea,after which// we are showing the received response from submit.phpbutton.fadeOut();
	textarea.fadeOut(function(){
	var span = $('<span>',{
	className:'response',html:text}
).hide().appendTo(feedback.find('.section')).show();
}
).val('');
}
}
);
	return false;
}
);
}
);

CSS代码(styles.css):

*{margin:0;padding:0;}
body{background:url('img/page_bg.jpg') repeat-x #dddddd;color:#555555;font:13px "Lucida Sans Unicode",Arial,Helvetica,sans-serif;}
#feedback{background-color:#9db09f;width:310px;height:330px;position:fixed;bottom:0;right:120px;margin-bottom:-270px;z-index:10000;}
*html #feedback{/* ie6 hack */
position:absolute;margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}
#feedback .section{background:url('img/bg.png') repeat-x top left;border:1px solid #808f81;border-bottom:none;padding:10px 25px 25px;}
#feedback .color{float:left;height:4px;width:20%;overflow:hidden;}
#feedback .color-1{background-color:#d3b112;}
#feedback .color-2{background-color:#12b6d3;}
#feedback .color-3{background-color:#8fd317;}
#feedback .color-4{background-color:#ca57df;}
#feedback .color-5{background-color:#8ecbe7;}
#feedback h6{background:url("img/feedback.png") no-repeat;height:38px;margin:5px 0 12px;text-indent:-99999px;cursor:pointer;}
#feedback textarea{background-color:#fff;border:none;color:#666666;font:13px 'Lucida Sans',Arial,sans-serif;height:100px;padding:10px;width:236px;resize:none;outline:none;overflow:auto;-moz-box-shadow:4px 4px 0 #8a9b8c;-webkit-box-shadow:4px 4px 0 #8a9b8c;box-shadow:4px 4px 0 #8a9b8c;}
#feedback a.submit{background:url("img/submit.png") no-repeat;border:none;display:block;height:34px;margin:20px auto 0;text-decoration:none;text-indent:-99999px;width:91px;}
#feedback a.submit:hover{background-position:left bottom;}
#feedback a.submit.working{background-position:top right !important;cursor:default;}
#feedback .message{font-family:Corbel,Arial,sans-serif;color:#5a665b;text-shadow:1px 1px 0 #b3c2b5;margin-bottom:20px;}
#feedback .arrow{background:url('img/arrows.png') no-repeat;float:right;width:23px;height:18px;position:relative;top:10px;}
#feedback .arrow.down{background-position:left top;}
#feedback h6:hover .down{background-position:left bottom;}
#feedback .arrow.up{background-position:right top;}
#feedback h6:hover .up{background-position:right bottom;}
#feedback .response{font-size:21px;margin-top:70px;text-align:center;text-shadow:2px 2px 0 #889889;color:#FCFCFC;display:block;}

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