zoukankan      html  css  js  c++  java

  • 常用小的特效（确认删除弹窗、返回顶部）

    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&&document.compatMode=="CSS1Compat"&&window.XMLHttpRequest;
54             mainobj.$body=(window.opera)?(document.compatMode=="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({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.com 请保留以便售后维护与服务  -->
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 http://fetchak.com/ie-css3
 27 
 28 Thanks to TheBrightLines.com (http://www.thebrightlines.com/2009/12/03/using-ies-filter-in-a-cross-browser-way) 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 http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser
 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 http://www.quirksmode.org/js/findpos.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、实时播报（上下滚动文字） 

    http://www.16sucai.com/uploadfile/show2013/1229006/
  • 相关阅读:
    实例讲解Springboot以Repository方式整合Redis
    Spark join 源码跟读记录
    数理统计与参数估计杂记
    常见的距离算法和相似度（相关系数）计算方法
    生成模型（Generative Model）与判别模型（Discriminative Model）
    Java 积累复习用
    RangePartitioner 实现简记
    Spark常见问题汇总
    2016年终总结
    学习资料库
  • 原文地址：https://www.cnblogs.com/lxf1117/p/4193250.html
Copyright © 2011-2022 走看看