博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 删除效果代码
阅读量:5844 次
发布时间:2019-06-18

本文共 4104 字,大约阅读时间需要 13 分钟。

效果

css文件delcss.css

代码如下:

*{
margin:0; padding:0;}#div1{
width:300px; height:100px; border-radius:10px; background:#f60; box-shadow:5px 5px 10px #ccc; position:absolute; left:50%; margin-left:-150px; z-index:2; opacity:0; filter:alpha(opacity:0); display:none;}#div1 h3{
height:20px; background:#60f;}#overlay{
width:100%; height:100%; background:#ccc; position:absolute; left:0; top:0; opacity:0; z-index:1; display:none;}#closeConfirm{
width:80px; height:20px; line-height:20px; background:#ccc; border-radius:5px; display:block; text-decoration:none; color:#000; text-align:center; position:absolute; bottom:10px; right:10px;}#trueConfirm{
width:80px; height:20px; line-height:20px; background:#ccc; border-radius:5px; display:block; text-decoration:none; color:#000; text-align:center; position:absolute; bottom:10px; right:100px;}#confirmCon{
text-align:center; color:#ccc; height:40px; line-height:40px;}

js文件confirmPop.js

代码如下:

function ConfirmPop(delObj,confirmMain,overlay,binkTitle,closeConfirm,trueConfirm){    this.oDelObj=document.getElementById(delObj);    this.oDiv=document.getElementById(confirmMain);    this.oOverlay=document.getElementById(overlay);    this.oTitle=document.getElementById(binkTitle);    this.oCloseConfirm=document.getElementById(closeConfirm);    this.oTrueConfirm=document.getElementById(trueConfirm);    this.oConStart=0;    this.oConItarget=0;    this.init();}ConfirmPop.prototype={    init:function(){        this.oConStart=parseInt((document.documentElement.clientHeight-this.oDiv.offsetHeight)/2-100);        this.oConItarget=parseInt((document.documentElement.clientHeight-this.oDiv.offsetHeight)/2-70);        this.oDiv.style.top=this.oConStart+'px';        document.title=this.oConStart+', '+this.oConItarget;        var _this=this;        this.oDelObj.οnclick=function(){            _this.confirmShow();        }        this.oOverlay.οnclick=function(){            _this.titleBink();        }        this.oCloseConfirm.οnclick=this.oTrueConfirm.οnclick=function(){            _this.confirmHide();        }        },    confirmShow:function(){        this.oOverlay.style.display='block';        this.oDiv.style.display='block';        striveMove(this.oOverlay,{ opacity:30});        striveMove(this.oDiv,{top:this.oConItarget, opacity:100})    },    titleBink:function(){        var _this=this;        var iLightTimer=null;        var i=0;        iLightTimer=setInterval(function(){            if(i%2){                _this.oTitle.style.background='#60f';            }else{                _this.oTitle.style.background='#ccc';                }            i++;            if(i>5){                clearInterval(iLightTimer);            }        },50)        },    confirmHide:function(){        striveMove(this.oOverlay,{opacity:0});        this.oOverlay.style.display='none';        striveMove(this.oDiv,{top:this.oConStart, opacity:0});        }        }function  striveMove(obj,json,fn){clearInterval(obj.iTimer);obj.iTimer=setInterval(function(){
var bStop=true;for(var attr in json){
var iCur=0;if(attr=='opacity'){iCur=Math.round(parseFloat(getStyle(obj,attr))*100);}else{iCur=parseInt(getStyle(obj,attr));}var iSpeed=(json[attr]-iCur)/8;iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);if(attr=='opacity'){obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';obj.style.opacity=(iCur+iSpeed)/100;}else{obj.style[attr]=iCur+iSpeed+'px';}if(iCur!==json[attr]){bStop=false;}}if(bStop){clearInterval(obj.iTimer);if(fn){fn();}}},30)}function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];}

使用方法

1.引入文件

2.调用方法

3.做好准备工作

您确定要进行删除操作么?
确定
取消

这段代码是提供空间的,自己写的div代码。其中确定框中的a标签中,可以把删除的地址填入其中。点击确定时,就跳转到删除的页面方法中了。

这段代码可以放入任何位置。不占空间。作者很犀利。

4.导火线,触发器

将删除图标加上id="btn",这样就会触发删除效果了。

如果想修改样式,可以到css中进行修改,调整。

 

小结:这样的js删除就比浏览器自带的弹出框美观一些了。作者用短短3k的js就写出这种效果,真心厉害。

ps,我只是拿来的。

缺点,只能针对一个内容,进行删除。因为所有的都是针对id的,单一化了。

本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/3282075.html,如需转载请自行联系原作者

你可能感兴趣的文章
macOS Sierra 代码显示未来 Mac 将搭载 ARM 芯片
查看>>
Linux 中如何通过命令行访问 Dropbox
查看>>
使用 Flutter 反序列化 JSON 的一些选项
查看>>
开发进度——4
查看>>
JS里验证信息
查看>>
Akka actor tell, ask 函数的实现
查看>>
windows10 chrome 调试 ios safari 方法
查看>>
Hello , Ruby!
查看>>
Netty 4.1.35.Final 发布,经典开源 Java 网络服务框架
查看>>
详解Microsoft.AspNetCore.CookiePolicy
查看>>
SCDPM2012 R2实战一:基于SQL 2008 R2集群的SCDPM2012 R2的安装
查看>>
SQL SERVER中字段类型与C#数据类型的对应关系
查看>>
Linux lsof命令详解
查看>>
SVG path
查看>>
js判断checkbox是否选中
查看>>
多系统盘挂载
查看>>
MySQL函数怎么加锁_MYSQL 函数调用导致自动生成共享锁问题
查看>>
python httpstr find_Python string.rfind方法代碼示例
查看>>
php 发布拼多多,拼多多补贴换增长的故事还能讲多久?
查看>>
Dynamic Performance Tables not accessible Automatic Statistics Disabled for this session
查看>>