input 输入框获得/失去焦点时隐藏/显示文字
1 /*---------------输入框获取焦点文字显示，---------------*/
2 function inputdefaule(inputbox){
3 $(inputbox).on({
4 focus:function(){
5 if (this.value == this.defaultValue){
6 this.value="";
7 }
8 },blur:function(){
9 if (this.value == ""){
10 this.value = this.defaultValue;
11 }
12 }
13 });
14 }
输入框获取焦点文字显示 inputdefaule
弹出提示框
1 /* -----------------弹出提示框-----------------*/
2 // bg页面背景遮盖,showbtn点击此按钮,showbox显示的弹出框,close关闭弹出框
3 function popup(popbg,showbtn,showbox,close){
4 $(showbtn).click(function(){
5 $(popbg).css({
6 display: ‘block‘,
7 height: $(‘body‘).height()
8 });
9 $showbox = $(showbox);
10 $showbox.css({
11 //设置弹出层距离左边的位置
12 left: ($(window).width() - $showbox.width()) / 2 + "px",
13 //设置弹出层距离上面的位置
14 top: ($(window).height() - $showbox.height()) / 2 + "px",
15 display: ‘block‘,
16 });
17 });
18 //点击关闭按钮的时候，遮罩层关闭
19 $(close).click(function () {
20 $(popbg).css(‘display‘,‘none‘);
21 $(showbox).css(‘display‘,‘none‘);
22 });
23 };
弹出提示框 popup
tab切换
1 /*-----------------tab切换--tabmenu 切换的按钮，tabwrap要切换的容器------------*/
2 function tab(tabmenu,tabwrap) {
3 $(tabmenu).click(function(){
4 var index = $(this).index();
5 $(this).addClass(‘on‘).siblings(tabmenu).removeClass(‘on‘);
6 $(tabwrap).eq(index).addClass(‘on‘).siblings(tabwrap).removeClass(‘on‘);
7 })
8 };
tab切换
右侧广告滚动到指定地点显示
1 /*右侧广告滚动到指定地点显示*/
2 function adsScroll(scrollbox,scrolltop){
3 var $windowscroll= $(window).scrollTop();
4 var $threadRightAd = scrollbox.height();
5 if($windowscroll>scrolltop){
6 // $(".thread-right-ad").css({ position:"fixed",top: ($(window).height() - $threadRightAd) / 2 + "px",});
7 scrollbox.css({ position:‘fixed‘,top: ‘40px‘});
8 }else{
9 scrollbox.css({position:‘relative‘,top: 0 });
10 }
11 };
右侧广告滚动到指定地点显示adsScroll
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title> 多行文字实现垂直居中 </title>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <style type="text/css">
7 body { font-size:12px;font-family:tahoma;}
8 div.wrap {
9 height:400px;
10 display:table;
11 }
12 div.content {
13 vertical-align:middle;
14 display:table-cell;
15 border:1px solid #FF0099;
16 background-color:#FFCCFF;
17 width:760px;
18 }
19 </style>
20 </head>
21 <body>
22 <div class="wrap">
23 <div class="content">服务器名字服名字服名字服名字服务器服务器名字服名字服名字服名字服务器服务器名字服名字服名字服名字服务器服务器名字服名字服名字服名字服务器
24 }
25 </div>
26 </div>
27 </body>
28 </html>
多行文字实现垂直居
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>fiexd定位悬浮窗口</title>
6 <style>
7 @charset "utf-8";
8 /* CSS Document */
9
10 body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input { margin:0; padding:0; }
11 body {font:14px/1.5 "Microsoft YaHei",Helvetica, Tahoma, Arial, STXihei, SimSun, sans-serif;}
12 /*input.background:none;是为解决IE6*/
13 input, select, textarea { outline:none; border:none; background:none; }
14 textarea { resize:none; }
15 img { border:none; }
16 li { list-style:none;}
17 a { text-decoration:none; color:#666666;}
18
19
20 /*清浮动*/
21 .clearfix:before,
22 .clearfix:after {content:""; display:block; clear:both;}
23 .clearfix { *zoom:1; }
24
25 /* .clearfix:before,
26 .clearfix:after { content: ""; display: table; }
27 .clearfix:after { clear: both; }
28 .clearfix{ *zoom:1; } IE6、7 Hack _IE6,+IE7 */
29
30 /*设置浮动*/
31 .fl { float:left; }
32 .fr { float:right; }
33
34 .leftArea { float: left; }
35 .rightArea { float: right; }
36
37 /*最新评论悬浮滚动*/
38 input, select, textarea { outline:none; border:none; background:none; }
39 .susfixed {
40 width: 100%;
41 height: 45px;
42 position: fixed;
43 bottom: 0;
44 left: 0;
45 z-index: 9999;
46 }
47 .suscomments {
48 position: relative;
49 width: 100%;
50 height: 45px;
51 }
52 .suswrap {
53 width: 1000px;
54 height: 45px;
55 margin: 0 auto;
56 }
57 .suscomments-bg {
58 position: absolute;
59 top: 0;
60 left: 0;
61 display: inline-block;
62 width:100%;
63 height:45px;
64 background: #000;
65 opacity: .4;
66 filter:alpha(opacity=40);
67 z-index: -1;
68 }
69 .comments{
70 width:440px;
71 height:45px;
72 line-height:45px;
73 overflow:hidden;
74 }
75 .comments li{
76 height:45px;
77 max-width: 440px;
78 _width:expression(document.body.clientWidth >440 ? "440px" : "auto"); /*ie6/7*/
79 white-space: nowrap;
80 overflow: hidden;
81 text-overflow: ellipsis;
82 color: #fff;
83 }
84
85 .comments .head {
86 display: inline-block;
87 width: 30px;
88 height: 30px;
89 margin-right: 20px;
90 vertical-align: middle;
91 }
92 .comments img {
93 display: inline-block;
94 width: 30px;
95 height: 30px;
96 }
97 .suscomments a{
98 display: inline-block;
99 line-height: 45px;
100 color: #fff;
101 }
102 .suscomments a.arrow {
103 display: inline-block;
104 height: 45px;
105 margin-left: 20px;
106 line-height: 45px;
107 font-size: 24px;
108 }
109 .suscomments .comments-prev {
110 }
111 .suscomments .comments-next {
112 }
113 .susreply {
114 width: 450px;
115 height: 31px;
116 margin-top: 8px;
117 color: #fff;
118 }
119 .susreply input {
120 display: inline-block;
121 width: 387px;
122 height: 31px;
123 background: #000;
124 opacity: .4;
125 filter:alpha(opacity=40);
126 z-index: -1;
127 vertical-align: middle;
128 color: #fff;
129 text-indent: 10px;
130 cursor: pointer;
131 }
132 .susreply span {
133 display: inline-block;
134 width: 55px;
135 height: 31px;
136 background: #1dc764;
137 line-height: 31px;
138 text-align: center;
139 vertical-align: middle;
140 cursor: pointer;
141 }
142 .suscomments .close {
143 position: absolute;
144 top: 15px;
145 right: 50px;
146 display: inline-block;
147 width: 17px;
148 height: 17px;
149 background: url(../images/forum/bankuai_index.png) no-repeat -224px -126px;
150 cursor: pointer;
151 }
152 </style>
153 </head>
154 <body>
155 <div class="susfixed">
156 <div class="suscomments">
157 <div class="suscomments-bg"></div>
158 <div class="suswrap">
159 <div class="comments fl">
160 <ul>
161 <li><a><img src="images/forum/active1.jpg" alt="" class="head" />评论111111111111111111111111111</a></li>
162 <li><a><img src="images/forum/comments-head.jpg" alt="" class="head" />评论2222222222222222222222222222222222222222222222222</a></li>
163 <li><a><img src="images/forum/comments-head.jpg" alt="" class="head" />评论3333333333333333</a></li>
164 <li><a><img src="images/forum/comments-head.jpg" alt="" class="head" />评论444444444444444444</a></li>
165 <li><a><img src="images/forum/comments-head.jpg" alt="" class="head" />评论555555555555555555555555555555555555</a></li>
166 </ul>
167 </div>
168 <a href="javascript:;" class="comments-prev arrow"><</a>
169 <a href="javascript:;" class="comments-next arrow">></a>
170 <div class="susreply fr">
171 <input type="text" placeholder="加入讨论，可多获得1个木头噢~~" /><span class="replyok">评论</span>
172 </div>
173 </div>
174 <i class="close fr"></i>
175 </div>
176 </div>
177 </body>
178 <!-- // 最新评论悬浮滚动 -->
179 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
180 <script>
181 $(function(){
182 var $this = $(".suswrap");
183 var scrollTimer;
184 var commentsPrev = $(‘.suscomments .comments-prev‘);
185 var commentsNext = $(‘.suscomments .comments-next‘);
186 $this.hover(function(){
187 clearInterval(scrollTimer);
188 },function(){
189 scrollTimer = setInterval(function(){
190 scrollNewsNext( $this );
191 }, 2000 );
192 }).trigger("mouseout");
193 commentsPrev.bind(‘click‘, function () {
194 scrollNewsPrev( $this );
195 });
196 commentsNext.bind(‘click‘, function () {
197 scrollNewsNext( $this );
198 });
199 });
200 function scrollNewsNext(obj){
201 var $self = obj.find("ul");
202 var lineHeight = $self.find("li").height();
203 $self.animate({ "margin-top" : -lineHeight +"px" },600 , function(){
204 $self.css({"margin-top":"0px"}).find("li:first").appendTo($self);
205 })
206 }
207 function scrollNewsPrev(obj){
208 var $self = obj.find("ul");
209 var lineHeight = $self.find("li").height();
210 $self.animate({ "margin-top" : "0px"},600 , function(){
211 $self.css({"margin-top": -lineHeight +"px" }).find("li:last").prependTo($self);
212 })
213 }
214 $(".suscomments .close").click(function(){
215 $(".susfixed").css(‘display‘,‘none‘);
216 });
217 </script>
218
219 </html>
fiexd定位悬浮窗口滚动
1 /*----------word limit input. limitarea 要限制的输入框, numtips 字数提示, num 允许输入字数-----------*/
2 function words_limit(limitarea,numtips,num) {
3 var curLength=limitarea.val().length;
4 if(curLength>num) {
5 var num=limitarea.val().substr(0,num);
6 limitarea.val(num);
7 alert("超过字数限制，多出的字将被截断！" );
8 }else {
9 numtips.text(num-limitarea.val().length);
10 }
11 }
字数限制 words_limit
1 <input id="amount" style="IME-MODE: disabled; WIDTH: 60px; HEIGHT: 15px" onkeyup="this.value=this.value.replace(/\D/g,‘‘)" onafterpaste="this.value=this.value.replace(/\D/g,‘‘)" maxlength="5" size="14" name="amount" type="text" />
5.输入框只能输入数字
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>a模拟单、复选框</title>
6 <style>
7 .checkbox {
8 display: inline-block;
9 width: 15px;
10 height: 15px;
11 margin-right: 8px;
12 background: url(bankuai_index.png) no-repeat -84px -104px;
13 vertical-align: middle;
14 }
15 .checkbox.checked {
16 background: url(bankuai_index.png) no-repeat -100px -104px;
17 }
18 </style>
19 </head>
20 <body>
21 <p class="uplist size">
22 <span class="titl">尺寸</span>
23 <span class="mcsize on">
24 <span><a href="javascript:void(0)" class="checkbox"></a>64x32 </span>
25 <span><a href="javascript:void(0)" class="checkbox"></a>128x64 </span>
26 <span><a href="javascript:void(0)" class="checkbox"></a>256x128</span>
27 <span><a href="javascript:void(0)" class="checkbox"></a>512x256</span>
28 <span><a href="javascript:void(0)" class="checkbox"></a>1024x512</span>
29 </span>
30 <span class="titl"></span>
31 <span><a href="javascript:void(0)" class="checkbox"></a>添加其他尺寸</span>
32 <span class="must">*</span>
33 </p>
34 <div class="c"></div>
35 </body>
36 <script src="http://cdn.mckuai.com/js/jquery.1.10.min.js" type="text/javascript"></script><script>
37
38 // a模拟复选框
39 $(".checkbox").each(function(){
40 $(this).on(‘click‘,function(){
41 //$(this).addClass("checked").parent().siblings().children("a").removeClass("checked"); //单选
42 $(this).toggleClass("checked");
43 });
44 });
45 // 判断a.checked选中的个数
46 /*var countChecked = function() {
47 var n = $( "a.checked" ).length;
48 $( ".c" ).text( n + (n === 1 ? " is" : " are") + " checked!" );
49 };
50 countChecked();
51 $( ".uplist" ).on( "click", countChecked );*/
52 </script>
53 </html>
a模拟单、复选框
时间： 2024-10-02 00:40:01