码迷,mamicode.com
首页 > 其他好文 > 详细

常用小的特效(确认删除弹窗、返回顶部)

时间:2014-12-30 13:08:07      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:

1、确认操作(如删除)弹窗。

技术分享
 <script language="javascript">
    function delcfm() {
        if (!confirm("确认要删除?")) {
            window.event.returnValue = false;
        }
    }
</script>

<input name="" type="submit" value="删除" onClick="delcfm()" /></form>
View Code

 

2、返回顶部

JS部分

<script type="text/javascript" src="/javascript/jquery.js"></script>
    <script type="text/javascript">
    var scrolltotop={
    setting:{
        startline:100, //起始行
        scrollto:0, //滚动到指定位置
        scrollduration:400, //滚动过渡时间
        fadeduration:[500,100] //淡出淡现消失
    },
    controlHTML:<div class="up"></div>, //返回顶部按钮
    controlattrs:{offsetx:30,offsety:80},//返回按钮固定位置
    anchorkeyword:"#top",
    state:{
        isvisible:false,
        shouldvisible:false
    },scrollup:function(){
        if(!this.cssfixedsupport){
            this.$control.css({opacity:0});
        }
        var dest=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto);
        if(typeof dest=="string"&&jQuery("#"+dest).length==1){
            dest=jQuery("#"+dest).offset().top;
        }else{
            dest=0;
        }
        this.$body.animate({scrollTop:dest},this.setting.scrollduration);
    },keepfixed:function(){
        var $window=jQuery(window);
        var controlx=$window.scrollLeft()+$window.width()-this.$control.width()-this.controlattrs.offsetx;
        var controly=$window.scrollTop()+$window.height()-this.$control.height()-this.controlattrs.offsety;
        this.$control.css({left:controlx+"px",top:controly+"px"});
    },togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop();
        if(!this.cssfixedsupport){
            this.keepfixed();
        }
        this.state.shouldvisible=(scrolltop>=this.setting.startline)?true:false;
        if(this.state.shouldvisible&&!this.state.isvisible){
            this.$control.stop().animate({opacity:1},this.setting.fadeduration[0]);
            this.state.isvisible=true;
        }else{
            if(this.state.shouldvisible==false&&this.state.isvisible){
                this.$control.stop().animate({opacity:0},this.setting.fadeduration[1]);
                this.state.isvisible=false;
            }
        }
    },init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop;
            var iebrws=document.all;
            mainobj.cssfixedsupport=!iebrws||iebrws&&document.compatMode=="CSS1Compat"&&window.XMLHttpRequest;
            mainobj.$body=(window.opera)?(document.compatMode=="CSS1Compat"?$("html"):$("body")):$("html,body");
            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();
            $(a[href="+mainobj.anchorkeyword+"]).click(function(){mainobj.scrollup();return false;});
            $(window).bind("scroll resize",function(e){mainobj.togglecontrol();});
        });
    }
};
scrolltotop.init();
    </script>




CSS部分:

<style>
.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;}
</style>

 需要使用到的图片   技术分享

 

3、文本输入框有默认字体,输入后消失

html+css


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>输入框文字颜色变化 在线演示 DIVCSS5</title>
<!--  DIVCSS5 www.divcss5.com 请保留以便售后维护与服务  -->
<style>
.input{ border:1px solid #333; background:#FFF; line-height:20px}
#n{margin:10px auto; width:920px; border:1px solid #CCC;font-size:12px; line-height:30px;}
#n a{ padding:0 4px; color:#333}
.form-box{ margin:0 auto; width:230px}
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>

<p align="center">在线演示特效效果如下:</p>
    <div class="form-box">
        <form action="" method="post">
            <input id="oncity" class="input" name="" value="请选择/输入发货城市" type="text" />
            <!-- divcss5提示: 修改默认显示文字"请选择/输入发货城市"需要与input.js代码内默认文字对应 -->
            <input name="" type="submit" value="查询" />
        </form>
        <!-- 提示以下JS需要放 表单输入框后 不能放前 -->
        <script type="text/javascript" src="js/input.js"></script>
    </div>

</body>
</html>




input.js


(function(doc){
var $ = function(id) { return doc.getElementById(id); };
var placeholder = ‘请选择/输入发货城市‘;//divcss5提示: 修改默认显示文字需要与Html表单默认文字对应
var inputname = $(‘oncity‘);

    inputname.onfocus = function(){
      if ( this.value == placeholder ) {
        this.value = ‘‘;
        this.style.color = ‘#000‘;
      }
    };
    inputname.onblur = function(){
      if (!this.value) {
        this.value = placeholder;
        this.style.color = ‘#9C9A9C‘;
      }
    };

  if (inputname.value == placeholder) {
    inputname.style.color = ‘#9C9A9C‘;
  }
  
// er
  
  
  else if (capcha) {
    capcha.focus();
  }

})(document);

 

常用小的特效(确认删除弹窗、返回顶部)

标签:

原文地址:http://www.cnblogs.com/lxf1117/p/4193250.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!