网站地图
首页
php教程
asp.net教程
手机开发
css教程
网页制作
办公数码
jsp教程
asp教程
ps教程
当前位置:
编程学习网
>>
网页特效
>
窗口特效
> >
[javascript学习指南]javascript无法屏蔽的网页右下角浮动窗口效果
[javascript学习指南]javascript无法屏蔽的网页右下角浮动窗口效果
发布时间:2018-06-06
【www.gdgbn.com--窗口特效】
提示:您可以先修改部分代码再运行
_× www.111cn.net 中国站长天空,站长建站乐园 <script language="javascript"> var Message={ set: function() {//最小化与恢复状态切换 var set=this.minbtn.status == 1?[0,1,"block",this.char[0],"最小化"]:[1,0,"none",this.char[1],"恢复"]; this.minbtn.status=set[0]; this.win.style.borderBottomWidth=set[1]; this.content.style.display =set[2]; this.minbtn.innerHTML =set[3] this.minbtn.title = set[4]; this.win.style.top = this.getY().top; }, close: function() {//关闭 this.win.style.display = "none"; window.onscroll = null; }, setOpacity: function(x) {//设置透明度 var v = x >= 100 ? "": "Alpha(opacity=" + x + ")"; this.win.style.visibility = x<=0?"hidden":"visible";//IE有绝对或相对定位内容不随父透明度变化的bug this.win.style.filter = v; this.win.style.opacity = x / 100; }, show: function() {//渐显 clearInterval(this.timer2); var me = this,fx = this.fx(0, 100, 0.1),t = 0; this.timer2 = setInterval(function() { t = fx(); me.setOpacity(t[0]); if (t[1] == 0) {clearInterval(me.timer2) } },10); }, fx: function(a, b, c) {//缓冲计算 var cMath = Math[(a - b) > 0 ? "floor": "ceil"],c = c || 0.1; return function() {return [a += cMath((b - a) * c), a - b]} }, getY: function() {//计算移动坐标 var d = document,b = document.body, e = document.documentElement; var s = Math.max(b.scrollTop, e.scrollTop); var h = /BackCompat/i.test(document.compatMode)?b.clientHeight:e.clientHeight; var h2 = this.win.offsetHeight; return {foot: s + h + h2 + 2+"px",top: s + h - h2 - 2+"px"} }, moveTo: function(y) {//移动动画 clearInterval(this.timer); var me = this,a = parseInt(this.win.style.top)||0; var fx = this.fx(a, parseInt(y)); var t = 0 ; this.timer = setInterval(function() { t = fx(); me.win.style.top = t[0]+"px"; if (t[1] == 0) { clearInterval(me.timer); me.bind(); } },10); }, bind:function (){//绑定窗口滚动条与大小变化事件 var me=this,st,rt; window.onscroll = function() { clearTimeout(st); clearTimeout(me.timer2); me.setOpacity(0); st = setTimeout(function() { me.win.style.top = me.getY().top; me.show(); },600); }; window.onresize = function (){ clearTimeout(rt); rt = setTimeout(function() {me.win.style.top = me.getY().top},100); } }, init: function() {//创建HTML function $(id) {return document.getElementById(id)}; this.win=$("msg_win"); var set={minbtn: "msg_min",closebtn: "msg_close",title: "msg_title",content: "msg_content"}; for (var Id in set) {this[Id] = $(set[Id])}; var me = this; this.minbtn.onclick = function() {me.set();this.blur()}; this.closebtn.onclick = function() {me.close()}; this.char=navigator.userAgent.toLowerCase().indexOf("firefox")+1?["_","::","×"]:["0","2","r"];//FF不支持webdings字体 this.minbtn.innerHTML=this.char[0]; this.closebtn.innerHTML=this.char[2]; setTimeout(function() {//初始化最先位置 me.win.style.display = "block"; me.win.style.top = me.getY().foot; me.moveTo(me.getY().top); },0); return this; } }; Message.init(); </script>
提示:您可以先修改部分代码再运行
本文来源:
http://www.gdgbn.com/wangyetexiao/23369/
上一篇:
右而左新浪博客_新浪博客右下角小窗口效果
下一篇:
[百度空间登录]仿百度空间右下角悬浮窗口代码
相关推荐
phpstudy|php 图片转换成ascii 输出图像
mysql下载|mysql 全文搜索fulltext
[如何注册google账号]Google如何辨认作弊网站
phpstudy|php 异常处理try catch Exceptions
【怎么用ps制作新年贺卡图片制作】怎么用ps制作新年贺卡图片
phpstudy_php 一行行读取文本文件
基督教歌曲新年祝福|春节新年祝福贺卡-flash春节贺卡
新年号|新年温馨电子祝福flash动画贺卡-温炖祝福
[photoshop怎么样抠图]怎么样用Photoshop调出人物照片强对比的橙蓝色
phpstudy_php 给GIF 缩略图实例代码
网友关注
春节祝福成语|春节flash祝福贺卡-卡通动画新年贺卡
电子贺卡制作_新年电子贺卡-新春快乐flash
js动态可控制左右滚动的图片|JS动态可控制左右滚动的图片
【ps证件照换底色】ps 照片转换成油墨画教程
[虎年是哪一年]虎年flash思念电子贺卡
[phpstudy]php 利用GD创建缩略图
【搜索引擎优化的方法有哪些】搜索引擎优化实战技巧之关键词的选择及优化
【新年flash动画片】新年flash动画电子祝福贺卡
phpstudy|php checkdate日期验证
快速提高网站权重和收录稳定的方法|快速提高网站权重和收录稳定的方法
热门标签
最新窗口特效
窗口特效
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 可拖拉缩放的窗口效果
窗口特效
太拖拉|可拖拉缩放的div 层窗口效果
窗口特效
[javascript学习指南]javascript 在关闭IE窗口的时候弹出窗口
窗口特效
javascript学习指南|javascript 慢慢变大的窗口 效果代码
窗口特效
ashe_as 3.0 打开新窗口的几方法
窗口特效
【网页广告屏蔽】无法屏蔽的网页右下角浮动窗口
窗口特效
[兼容ie8的前端框架]兼容ie8 ff ie6获取窗口顶部与左边像素代码
窗口特效
【flash player】flash getURL或navigateToURL弹出窗口被IE拦截方法
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
Copyright©2006-2019 编程学习网 www.gdgbn.com 版权所有