网站地图
首页
php教程
asp.net教程
手机开发
css教程
网页制作
办公数码
jsp教程
asp教程
ps教程
当前位置:
编程学习网
>>
网页特效
>
窗口特效
> >
[漂亮女局长]漂亮javascript弹出层实现代码
[漂亮女局长]漂亮javascript弹出层实现代码
发布时间:2019-04-02
【www.gdgbn.com--窗口特效】
提示:您可以先修改部分代码再运行
可显隐弹出窗口
0 1 aaaaaaaaaaaaffffffffff
ddddddddddddddddd
ddddddddddddd
dddddddddd
aaaaa 2 aaaaaaaaaaaaaaaaa 3 aaaaaaaaaaaaaaaaa 4 aaaaaaaaaaaaaaaaa 5 aaaaaaaaaaaaaaaaa 6 aaaaaaaaaaaaaaaaa <script language="javascript"> var zindex=0; function $id(id){ return document.getElementById(id); } var Bind = function(object,fun){ var args = Array.prototype.slice.call(arguments).slice(2); return function(){ return fun.apply(object,args); } } function addEventHandler(oTarget, sEventType, fnHandler){ if(oTarget.addEventListener){oTarget.addEventListener(sEventType, fnHandler, false);} else if(oTarget.attachEvent){oTarget.attachEvent("on" + sEventType, fnHandler);} else{oTarget["on" + sEventType] = fnHandler;} } var Shower=function(){ this.list=null; this.comment=null; this.moveLeft=80; //弹出div的水平偏移距离 this.moveTop=20; //弹出div的竖直偏移距离 this.height=150; //弹出div的高 this.width=250; //弹出div的宽 this.time=800; //弹出div所用时间 this.init=function(lisObj,comObj){ this.list=lisObj; this.comment=comObj; var _this=this; this._fnMove=Bind(this,this.move); (function(){ var obj=_this; addEventHandler(obj.list,"click",obj._fnMove); })(); }; this.move=function(){ var _this=this; var w=0; //水平偏移 var h=0; //竖直偏移 var height=0; //弹出div的高 var width=0; //弹出div的宽 var t=0; var startTime = new Date().getTime();//开始执行的时间 if(!_this.comment.style.display||_this.comment.style.display=="none"){ _this.comment.style.display="block"; _this.comment.style.height=0+"px"; _this.comment.style.width=0+"px"; _this.list.style.zIndex=++zindex; _this.list.className="listShow"; var comment=_this.comment.innerHTML; _this.comment.innerHTML=""; //去掉显示内容 var timer=setInterval(function(){ var newTime = new Date().getTime(); var timestamp = newTime - startTime; _this.comment.style.left=Math.ceil(w)+"px"; _this.comment.style.top=Math.ceil(h)+"px"; _this.comment.style.height=height+"px"; _this.comment.style.width=width+"px"; t++; var change=(Math.pow((timestamp/_this.time-1), 3) +1); //根据运行时间得到基础变化量 w=_this.moveLeft*change; h=_this.moveTop*change; height=_this.height*change; width=_this.width*change; $id("show").innerHTML=w; if(w>_this.moveLeft){ clearInterval(timer); _this.comment.style.left=_this.moveLeft+"px"; _this.comment.style.top=_this.moveTop+"px"; _this.comment.style.height=_this.height+"px"; _this.comment.style.width=_this.width+"px"; _this.comment.innerHTML=comment; //回复显示内容 } },1,_this.comment); }else{ _this.hidden(); } } this.hidden=function(){ var _this=this; var flag=1; var hiddenTimer=setInterval(function(){ if(flag==1){ _this.comment.style.height=parseInt(_this.comment.style.height)-10+"px"; }else{ _this.comment.style.width=parseInt(_this.comment.style.width)-15+"px"; _this.comment.style.left=parseInt(_this.comment.style.left)+5+"px"; } if(flag==1 && parseInt(_this.comment.style.height)<10){ flag=-flag; } if(parseInt(_this.comment.style.width)<20){ clearInterval(hiddenTimer); _this.comment.style.left="0px"; _this.comment.style.top="0px"; _this.comment.style.height="0px"; _this.comment.style.width="0px"; _this.comment.style.display="none"; if(_this.list.style.zIndex==zindex){ zindex--; }; _this.list.style.zIndex=0; _this.list.className="list"; } },1) } } window.onload=function(){ //建立各个菜单对象 var shower1=new Shower(); shower1.init($id("list1"),$id("comment1")); var shower2=new Shower(); shower2.init($id("list2"),$id("comment2")); var shower3=new Shower(); shower3.init($id("list3"),$id("comment3")); var shower4=new Shower(); shower4.init($id("list4"),$id("comment4")); var shower5=new Shower(); shower5.init($id("list5"),$id("comment5")); var shower6=new Shower(); shower6.init($id("list6"),$id("comment6")); } </script>
提示:您可以先修改部分代码再运行
本文来源:
http://www.gdgbn.com/wangyetexiao/28170/
上一篇:
[css样式三种定义方式]纯css定义带箭头的窗口代码
下一篇:
[javascript学习指南]javascript 弹出新窗口代码
相关推荐
jpgraph中文乱码_JpGraph中文乱码处理办法
javascript学习指南|javascript 定义在新的标签中打开连接实现代码
【json】js 正则表达式 验证数字,邮箱地址,删除空格
【javascript学习指南】javascript页面跳转的几种方法
[javascript学习指南]javascrip 消息确认弹出窗实现代码
[php编码转换函数]php编码转换函数
[一款可以雷达锁定的飞机游戏]一款实用js广告延迟加载方法
ps淘宝主图制作视频|ps制作非主流lomo风格照片教程
【phpstudy】php json_encode实现与中文乱码解决方法
浏览器兼容模式怎么设置_兼容多浏览器iframe 自适应高度
网友关注
json_js 删除所有cookie值代码
未利用地_利用ps打造非主流红黄色照片
电脑怎么拦截弹出广告|不被拦截弹出背投广告代码
[php中文url编码]PHP中文URL编解码详细说明
【javascript学习指南】javascript 获取用户IP地址与所在地信息
【css超出部分省略号】CSS HACK 与float浮动实现代码
【javascript学习指南】javascript 获取select的值实现代码
[javascript学习指南]javascript 获取Textarea 元素的光标位置代码
phpstudy|php ajax验证用户名实现代码
json|js 类继承 简单例代码
热门标签
漂亮的她
干得漂亮
最新窗口特效
窗口特效
csrf-token|c dos 删除所有的.svn文件夹
窗口特效
【asp.net core】asp.net C#中父窗口及其子窗口标题调用方法
窗口特效
【asp.net core】asp.net 窗口之间值、控件的传递值
窗口特效
[window.showmodaldialog]window.show与ShowDialog()区别与实例
窗口特效
javascript学习指南_javascript iframe 父窗口和子窗口实现代码
窗口特效
[javascript学习指南]javascript 弹出新窗口代码
窗口特效
[漂亮女局长]漂亮javascript弹出层实现代码
窗口特效
[css样式三种定义方式]纯css定义带箭头的窗口代码
窗口特效
ps教你调出来的_PS教你调出来水嫩皮肤效果
窗口特效
【flash player】flash getURL或navigateToURL弹出窗口被IE拦截方法
窗口特效热门文章
窗口特效
[javascript学习指南]javascript 弹出新窗口代码
窗口特效
javascript学习指南_javascript iframe 父窗口和子窗口实现代码
窗口特效
[window.showmodaldialog]window.show与ShowDialog()区别与实例
窗口特效
【asp.net core】asp.net 窗口之间值、控件的传递值
窗口特效
【asp.net core】asp.net C#中父窗口及其子窗口标题调用方法
窗口特效
csrf-token|c dos 删除所有的.svn文件夹
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
Copyright©2006-2019 编程学习网 www.gdgbn.com 版权所有