首页 > 代码库 > 常用小的特效（确认删除弹窗、返回顶部）
常用小的特效（确认删除弹窗、返回顶部）
1、确认操作（如删除）弹窗。
<script language="javascript"> function delcfm() { if (!confirm("确认要删除？")) { window.event.returnValue = false; } }</script><input name="" type="submit" value="删除" onClick="delcfm()" /></form>
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="http://www.mamicode.com/‘+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 =http://www.mamicode.com/= placeholder ) {>
常用小的特效（确认删除弹窗、返回顶部）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。