特效(确认删除弹窗、返回顶部)"/>
常用小的特效(确认删除弹窗、返回顶部)
1、确认操作(如删除)弹窗。
<script language="javascript">function delcfm() {if (!confirm("确认要删除?")) {window.event.returnValue = false;}} </script><input name="" type="submit" value="删除" onClick="delcfm()" /></form>View Code
2、返回顶部
1 JS部分 2 3 <script type="text/javascript" src="/javascript/jquery.js"></script> 4 <script type="text/javascript"> 5 var scrolltotop={ 6 setting:{ 7 startline:100, //起始行 8 scrollto:0, //滚动到指定位置 9 scrollduration:400, //滚动过渡时间 10 fadeduration:[500,100] //淡出淡现消失 11 }, 12 controlHTML:'<div class="up"></div>', //返回顶部按钮 13 controlattrs:{offsetx:30,offsety:80},//返回按钮固定位置 14 anchorkeyword:"#top", 15 state:{ 16 isvisible:false, 17 shouldvisible:false 18 },scrollup:function(){ 19 if(!this.cssfixedsupport){ 20 this.$control.css({opacity:0}); 21 } 22 var dest=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto); 23 if(typeof dest=="string"&&jQuery("#"+dest).length==1){ 24 dest=jQuery("#"+dest).offset().top; 25 }else{ 26 dest=0; 27 } 28 this.$body.animate({scrollTop:dest},this.setting.scrollduration); 29 },keepfixed:function(){ 30 var $window=jQuery(window); 31 var controlx=$window.scrollLeft()+$window.width()-this.$control.width()-this.controlattrs.offsetx; 32 var controly=$window.scrollTop()+$window.height()-this.$control.height()-this.controlattrs.offsety; 33 this.$control.css({left:controlx+"px",top:controly+"px"}); 34 },togglecontrol:function(){ 35 var scrolltop=jQuery(window).scrollTop(); 36 if(!this.cssfixedsupport){ 37 this.keepfixed(); 38 } 39 this.state.shouldvisible=(scrolltop>=this.setting.startline)?true:false; 40 if(this.state.shouldvisible&&!this.state.isvisible){ 41 this.$control.stop().animate({opacity:1},this.setting.fadeduration[0]); 42 this.state.isvisible=true; 43 }else{ 44 if(this.state.shouldvisible==false&&this.state.isvisible){ 45 this.$control.stop().animate({opacity:0},this.setting.fadeduration[1]); 46 this.state.isvisible=false; 47 } 48 } 49 },init:function(){ 50 jQuery(document).ready(function($){ 51 var mainobj=scrolltotop; 52 var iebrws=document.all; 53 mainobj.cssfixedsupport=!iebrws||iebrws&&documentpatMode=="CSS1Compat"&&window.XMLHttpRequest; 54 mainobj.$body=(window.opera)?(documentpatMode=="CSS1Compat"?$("html"):$("body")):$("html,body"); 55 mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+"</div>").css({position:mainobj.cssfixedsupport?"fixed":"absolute",bottom:mainobj.controlattrs.offsety,right:mainobj.controlattrs.offsetx,opacity:0,cursor:"pointer"}).attr({title:"返回顶部"}).click(function(){mainobj.scrollup();return false;}).appendTo("body");if(document.all&&!window.XMLHttpRequest&&mainobj.$control.text()!=""){mainobj.$control.css({width:mainobj.$control.width()});}mainobj.togglecontrol(); 56 $('a[href="'+mainobj.anchorkeyword+'"]').click(function(){mainobj.scrollup();return false;}); 57 $(window).bind("scroll resize",function(e){mainobj.togglecontrol();}); 58 }); 59 } 60 }; 61 scrolltotop.init(); 62 </script> 63 64 65 66 67 CSS部分: 68 69 <style> 70 .up{width:54px;height:54px;background:url(/images/topback.gif) no-repeat 0 0;filter:alpha(Opacity=60);-moz-opacity:0.6;opacity: 0.6;}.up:hover{filter:alpha(Opacity=100);-moz-opacity:1;opacity:1;} 71 </style>View Code
需要使用到的图片
3、文本输入框有默认字体,输入后消失
1 html+css 2 3 4 <!DOCTYPE html> 5 <html> 6 <head> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 8 <title>输入框文字颜色变化 在线演示 DIVCSS5</title> 9 <!-- DIVCSS5 www.divcss5 请保留以便售后维护与服务 --> 10 <style> 11 .input{ border:1px solid #333; background:#FFF; line-height:20px} 12 #n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;} 13 #n a{ padding:0 4px; color:#333} 14 .form-box{ margin:0 auto; width:230px} 15 </style> 16 <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> 17 </head> 18 <body> 19 20 <p align="center">在线演示特效效果如下:</p> 21 <div class="form-box"> 22 <form action="" method="post"> 23 <input id="oncity" class="input" name="" value="请选择/输入发货城市" type="text" /> 24 <!-- divcss5提示: 修改默认显示文字"请选择/输入发货城市"需要与input.js代码内默认文字对应 --> 25 <input name="" type="submit" value="查询" /> 26 </form> 27 <!-- 提示以下JS需要放 表单输入框后 不能放前 --> 28 <script type="text/javascript" src="js/input.js"></script> 29 </div> 30 31 </body> 32 </html> 33 34 35 36 37 input.js 38 39 40 (function(doc){ 41 var $ = function(id) { return doc.getElementById(id); }; 42 var placeholder = '请选择/输入发货城市';//divcss5提示: 修改默认显示文字需要与Html表单默认文字对应 43 var inputname = $('oncity'); 44 45 inputname.onfocus = function(){ 46 if ( this.value == placeholder ) { 47 this.value = ''; 48 this.style.color = '#000'; 49 } 50 }; 51 inputname.onblur = function(){ 52 if (!this.value) { 53 this.value = placeholder; 54 this.style.color = '#9C9A9C'; 55 } 56 }; 57 58 if (inputname.value == placeholder) { 59 inputname.style.color = '#9C9A9C'; 60 } 61 62 // er 63 64 65 else if (capcha) { 66 capcha.focus(); 67 } 68 69 })(document);View Code
4、CSS3 圆角样式,支持IE 6 7 8
1 .yuan { 2 -moz-border-radius: 30px; 3 -webkit-border-radius: 30px; 4 border-radius: 30px; /*设置圆角*/ 5 position:relative; 6 z-index:2; 7 behavior: url(/Javascript/iecss3.htc); /*关键代码 兼容IE6 7 8 */ 8 } 9 10 11 下面是iecss3.htc代码,直接复制保存在记事本中 改下文件名和后缀即可。 12 13 --Do not remove this if you are using-- 14 Original Author: Remiz Rahnas 15 Original Author URL: 16 Published date: 2008/09/24 17 18 Changes by Nick Fetchak: 19 - IE8 standards mode compatibility 20 - VML elements now positioned behind original box rather than inside of it - should be less prone to breakage 21 - Added partial support for 'box-shadow' style 22 - Checks for VML support before doing anything 23 - Updates VML element size and position via timer and also via window resize event 24 - lots of other small things 25 Published date : 2010/03/14 26 27 28 Thanks to TheBrightLines () for enlightening me about the DropShadow filter 29 30 <public:attach event="ondocumentready" onevent="ondocumentready('v08vnSVo78t4JfjH')" /> 31 <script type="text/javascript"> 32 33 timer_length = 200; // Milliseconds 34 border_opacity = false; // Use opacity on borders of rounded-corner elements? Note: This causes antialiasing issues 35 36 37 // supportsVml() borrowed from 38 function supportsVml() { 39 if (typeof supportsVml.supported == "undefined") { 40 var a = document.body.appendChild(document.createElement('div')); 41 a.innerHTML = '<v:shape id="vml_flag1" adj="1" />'; 42 var b = a.firstChild; 43 b.style.behavior = "url(#default#VML)"; 44 supportsVml.supported = b ? typeof b.adj == "object": true; 45 a.parentNode.removeChild(a); 46 } 47 return supportsVml.supported 48 } 49 50 51 // findPos() borrowed from .html 52 function findPos(obj) { 53 var curleft = curtop = 0; 54 55 if (obj.offsetParent) { 56 do { 57 curleft += obj.offsetLeft; 58 curtop += obj.offsetTop; 59 } while (obj = obj.offsetParent); 60 } 61 62 return({ 63 'x': curleft, 64 'y': curtop 65 }); 66 } 67 68 function createBoxShadow(element, vml_parent) { 69 var style = element.currentStyle['iecss3-box-shadow'] || element.currentStyle['-moz-box-shadow'] || element.currentStyle['-webkit-box-shadow'] || element.currentStyle['box-shadow'] || ''; 70 var match = style.match(/^(\d+)px (\d+)px (\d+)px/); 71 if (!match) { return(false); } 72 73 74 var shadow = document.createElement('v:roundrect'); 75 shadow.userAttrs = { 76 'x': parseInt(RegExp.$1 || 0), 77 'y': parseInt(RegExp.$2 || 0), 78 'radius': parseInt(RegExp.$3 || 0) / 2 79 }; 80 shadow.position_offset = { 81 'y': (0 - vml_parent.pos_ieCSS3.y - shadow.userAttrs.radius + shadow.userAttrs.y), 82 'x': (0 - vml_parent.pos_ieCSS3.x - shadow.userAttrs.radius + shadow.userAttrs.x) 83 }; 84 shadow.size_offset = { 85 'width': 0, 86 'height': 0 87 }; 88 shadow.arcsize = element.arcSize +'px'; 89 shadow.style.display = 'block'; 90 shadow.style.position = 'absolute'; 91 shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px'; 92 shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px'; 93 shadow.style.width = element.offsetWidth +'px'; 94 shadow.style.height = element.offsetHeight +'px'; 95 shadow.style.antialias = true; 96 shadow.className = 'vml_box_shadow'; 97 shadow.style.zIndex = element.zIndex - 1; 98 shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=true,shadowOpacity='+ element.opacity +')'; 99 100 element.parentNode.appendChild(shadow); 101 //element.parentNode.insertBefore(shadow, element.element); 102 103 // For window resizing 104 element.vml.push(shadow); 105 106 return(true); 107 } 108 109 function createBorderRect(element, vml_parent) { 110 if (isNaN(element.borderRadius)) { return(false); } 111 112 element.style.background = 'transparent'; 113 element.style.borderColor = 'transparent'; 114 115 var rect = document.createElement('v:roundrect'); 116 rect.position_offset = { 117 'y': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.y, 118 'x': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.x 119 }; 120 rect.size_offset = { 121 'width': 0 - element.strokeWeight, 122 'height': 0 - element.strokeWeight 123 }; 124 rect.arcsize = element.arcSize +'px'; 125 rect.strokeColor = element.strokeColor; 126 rect.strokeWeight = element.strokeWeight +'px'; 127 rect.stroked = element.stroked; 128 rect.className = 'vml_border_radius'; 129 rect.style.display = 'block'; 130 rect.style.position = 'absolute'; 131 rect.style.top = (element.pos_ieCSS3.y + rect.position_offset.y) +'px'; 132 rect.style.left = (element.pos_ieCSS3.x + rect.position_offset.x) +'px'; 133 rect.style.width = (element.offsetWidth + rect.size_offset.width) +'px'; 134 rect.style.height = (element.offsetHeight + rect.size_offset.height) +'px'; 135 rect.style.antialias = true; 136 rect.style.zIndex = element.zIndex - 1; 137 138 if (border_opacity && (element.opacity < 1)) { 139 rect.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity='+ parseFloat(element.opacity * 100) +')'; 140 } 141 142 var fill = document.createElement('v:fill'); 143 fill.color = element.fillColor; 144 fill.src = element.fillSrc; 145 fill.className = 'vml_border_radius_fill'; 146 fill.type = 'tile'; 147 fill.opacity = element.opacity; 148 149 // Hack: IE6 doesn't support transparent borders, use padding to offset original element 150 isIE6 = /msie|MSIE 6/.test(navigator.userAgent); 151 if (isIE6 && (element.strokeWeight > 0)) { 152 element.style.borderStyle = 'none'; 153 element.style.paddingTop = parseInt(element.currentStyle.paddingTop || 0) + element.strokeWeight; 154 element.style.paddingBottom = parseInt(element.currentStyle.paddingBottom || 0) + element.strokeWeight; 155 } 156 157 rect.appendChild(fill); 158 element.parentNode.appendChild(rect); 159 //element.parentNode.insertBefore(rect, element.element); 160 161 // For window resizing 162 element.vml.push(rect); 163 164 return(true); 165 } 166 167 function createTextShadow(element, vml_parent) { 168 if (!element.textShadow) { return(false); } 169 170 var match = element.textShadow.match(/^(\d+)px (\d+)px (\d+)px (#?\w+)/); 171 if (!match) { return(false); } 172 173 174 //var shadow = document.createElement('span'); 175 var shadow = element.cloneNode(true); 176 var radius = parseInt(RegExp.$3 || 0); 177 shadow.userAttrs = { 178 'x': parseInt(RegExp.$1 || 0) - (radius), 179 'y': parseInt(RegExp.$2 || 0) - (radius), 180 'radius': radius / 2, 181 'color': (RegExp.$4 || '#000') 182 }; 183 shadow.position_offset = { 184 'y': (0 - vml_parent.pos_ieCSS3.y + shadow.userAttrs.y), 185 'x': (0 - vml_parent.pos_ieCSS3.x + shadow.userAttrs.x) 186 }; 187 shadow.size_offset = { 188 'width': 0, 189 'height': 0 190 }; 191 shadow.style.color = shadow.userAttrs.color; 192 shadow.style.position = 'absolute'; 193 shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px'; 194 shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px'; 195 shadow.style.antialias = true; 196 shadow.style.behavior = null; 197 shadow.className = 'ieCSS3_text_shadow'; 198 shadow.innerHTML = element.innerHTML; 199 // For some reason it only looks right with opacity at 75% 200 shadow.style.filter = '\ 201 progid:DXImageTransform.Microsoft.Alpha(Opacity=75)\ 202 progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=false,shadowOpacity=100)\ 203 '; 204 205 var clone = element.cloneNode(true); 206 clone.position_offset = { 207 'y': (0 - vml_parent.pos_ieCSS3.y), 208 'x': (0 - vml_parent.pos_ieCSS3.x) 209 }; 210 clone.size_offset = { 211 'width': 0, 212 'height': 0 213 }; 214 clone.style.behavior = null; 215 clone.style.position = 'absolute'; 216 clone.style.top = (element.pos_ieCSS3.y + clone.position_offset.y) +'px'; 217 clone.style.left = (element.pos_ieCSS3.x + clone.position_offset.x) +'px'; 218 clone.className = 'ieCSS3_text_shadow'; 219 220 221 element.parentNode.appendChild(shadow); 222 element.parentNode.appendChild(clone); 223 224 element.style.visibility = 'hidden'; 225 226 // For window resizing 227 element.vml.push(clone); 228 element.vml.push(shadow); 229 230 return(true); 231 } 232 233 function ondocumentready(classID) { 234 if (!supportsVml()) { return(false); } 235 236 if (this.className.match(classID)) { return(false); } 237 this.className = this.className.concat(' ', classID); 238 239 // Add a namespace for VML (IE8 requires it) 240 if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); } 241 242 // Check to see if we've run once before on this page 243 if (typeof(window.ieCSS3) == 'undefined') { 244 // Create global ieCSS3 object 245 window.ieCSS3 = { 246 'vmlified_elements': new Array(), 247 'update_timer': setInterval(updatePositionAndSize, timer_length) 248 }; 249 250 if (typeof(window.onresize) == 'function') { window.ieCSS3.previous_onresize = window.onresize; } 251 252 // Attach window resize event 253 window.onresize = updatePositionAndSize; 254 } 255 256 257 // These attrs are for the script and have no meaning to the browser: 258 this.borderRadius = parseInt(this.currentStyle['iecss3-border-radius'] || 259 this.currentStyle['-moz-border-radius'] || 260 this.currentStyle['-webkit-border-radius'] || 261 this.currentStyle['border-radius'] || 262 this.currentStyle['-khtml-border-radius']); 263 this.arcSize = Math.min(this.borderRadius / Math.min(this.offsetWidth, this.offsetHeight), 1); 264 this.fillColor = this.currentStyle.backgroundColor; 265 this.fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1'); 266 this.strokeColor = this.currentStyle.borderColor; 267 this.strokeWeight = parseInt(this.currentStyle.borderWidth); 268 this.stroked = 'true'; 269 if (isNaN(this.strokeWeight) || (this.strokeWeight == 0)) { 270 this.strokeWeight = 0; 271 this.strokeColor = fillColor; 272 this.stroked = 'false'; 273 } 274 this.opacity = parseFloat(this.currentStyle.opacity || 1); 275 this.textShadow = this.currentStyle['text-shadow']; 276 277 this.element.vml = new Array(); 278 this.zIndex = parseInt(this.currentStyle.zIndex); 279 if (isNaN(this.zIndex)) { this.zIndex = 0; } 280 281 // Find which element provides position:relative for the target element (default to BODY) 282 vml_parent = this; 283 var limit = 100, i = 0; 284 do { 285 vml_parent = vml_parent.parentElement; 286 i++; 287 if (i >= limit) { return(false); } 288 } while ((typeof(vml_parent) != 'undefined') && (vml_parent.currentStyle.position != 'relative') && (vml_parent.tagName != 'BODY')); 289 290 vml_parent.pos_ieCSS3 = findPos(vml_parent); 291 this.pos_ieCSS3 = findPos(this); 292 293 var rv1 = createBoxShadow(this, vml_parent); 294 var rv2 = createBorderRect(this, vml_parent); 295 var rv3 = createTextShadow(this, vml_parent); 296 if (rv1 || rv2 || rv3) { window.ieCSS3.vmlified_elements.push(this.element); } 297 298 if (typeof(vml_parent.document.ieCSS3_stylesheet) == 'undefined') { 299 vml_parent.document.ieCSS3_stylesheet = vml_parent.document.createStyleSheet(); 300 vml_parent.document.ieCSS3_stylesheet.addRule("v\\:roundrect", "behavior: url(#default#VML)"); 301 vml_parent.document.ieCSS3_stylesheet.addRule("v\\:fill", "behavior: url(#default#VML)"); 302 // Compatibility with IE7.js 303 vml_parent.document.ieCSS3_stylesheet.ie7 = true; 304 } 305 } 306 307 function updatePositionAndSize() { 308 if (typeof(window.ieCSS3.vmlified_elements) != 'object') { return(false); } 309 310 for (var i in window.ieCSS3.vmlified_elements) { 311 var el = window.ieCSS3.vmlified_elements[i]; 312 313 if (typeof(el.vml) != 'object') { continue; } 314 315 for (var z in el.vml) { 316 //var parent_pos = findPos(el.vml[z].parentNode); 317 var new_pos = findPos(el); 318 new_pos.x = (new_pos.x + el.vml[z].position_offset.x) + 'px'; 319 new_pos.y = (new_pos.y + el.vml[z].position_offset.y) + 'px'; 320 if (el.vml[z].style.left != new_pos.x) { el.vml[z].style.left = new_pos.x; } 321 if (el.vml[z].style.top != new_pos.y) { el.vml[z].style.top = new_pos.y; } 322 323 var new_size = { 324 'width': parseInt(el.offsetWidth + el.vml[z].size_offset.width), 325 'height': parseInt(el.offsetHeight + el.vml[z].size_offset.height) 326 } 327 if (el.vml[z].offsetWidth != new_size.width) { el.vml[z].style.width = new_size.width +'px'; } 328 if (el.vml[z].offsetHeight != new_size.height) { el.vml[z].style.height = new_size.height +'px'; } 329 } 330 } 331 332 if (event && (event.type == 'resize') && typeof(window.ieCSS3.previous_onresize) == 'function') { window.ieCSS3.previous_onresize(); } 333 } 334 </script>View Code
5、全选
<script type="text/javascript">function selectAll(c){ var form=c.form;var elems=form.elements;for (var i = 0; i<elems.length;i++) {if (elems[i].type=="checkbox" && elems[i].checked!=c.checked) {elems[i].click(); };};}</script>View Code
6、实时播报(上下滚动文字)
/
转载于:.html
更多推荐
常用小的特效(确认删除弹窗、返回顶部)
发布评论