网站地图
首页
php教程
asp.net教程
手机开发
css教程
网页制作
办公数码
jsp教程
asp教程
ps教程
当前位置:
编程学习网
>>
php教程
>
php常用代码
> >
javascript学习指南_javascript 遮罩过渡效果的图片幻灯和选项卡菜单
javascript学习指南_javascript 遮罩过渡效果的图片幻灯和选项卡菜单
发布时间:2018-04-29
【www.gdgbn.com--php常用代码】
提示:您可以先修改部分代码再运行
javascript 遮罩过渡效果的图片幻灯和选项卡菜单
javascript 遮罩过渡效果的图片幻灯和选项卡菜单
<script language="javascript"> var $ = function (d){return document.getElementById( d );}; var isIE = (document.all) ? true : false; var Bind = function (obj,fun,arr){return function() {arr || (arr = arguments);return fun.apply(obj,arr);}};//绑定 var Tween = function(t,b,c,d){return c*t/d + b;};//缓冲函数 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; } };//事件监听 function removeEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.removeEventListener) { oTarget.removeEventListener(sEventType, fnHandler, false); } else if (oTarget.detachEvent) { oTarget.detachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = null; } };//移除监听 var Timer = {};//Timer Timer.add = function (fn){return new this.fn(fn)}; Timer.fn = function (fn){ var timer; this.play = function (speed,only){ speed || ( speed = 10 ); if(only)timer = window.setTimeout(fn,speed); else timer = window.setInterval(fn,speed); }; this.stop = function (){clearTimeout(timer);clearInterval(timer)}; }; //Mask 遮罩动画 var Mask = function (){ this.fl = Timer.add(Bind(this,this.fn)); this.from_num = 0; this.speed = 50;//动画速度,越大越慢 }; Mask.prototype.ready = function (ele,pos){ if(this.ele)this.set(this.maxWidth,this.maxHeight); this.ele = ele; this.maxWidth = this.ele.offsetWidth; this.maxHeight = this.ele.offsetHeight; this.ele.style.position = "absolute"; this.from_num = 0; if(!pos){ var x = ["left","center","right",""][parseInt(4*Math.random())], y = ["top","center","bottom",""][parseInt(4*Math.random())]; if(x == "" && y == "")x = "left";//避免同时为"" this.position = [x,y]; }else{ this.position = pos; } this.set(0,0); this.fl.stop(); }; Mask.prototype.start = function (){this.fl.play();}; Mask.prototype.stop = function (){this.fl.stop();}; Mask.prototype.set = function (width,height){//设置遮罩的矩形,用于定位遮罩的变换方向 var t,r,b,l; switch(this.position[0]){ case "left" : l = 0; r = width; break; case "center" : l = (this.maxWidth - width)/2; r = (this.maxWidth + width)/2; break; case "right" : l = this.maxWidth - width; r = this.maxWidth; break; default: l = 0; r = this.maxWidth; } switch(this.position[1]){ case "top" : t = 0; b = height; break; case "center" : t = (this.maxHeight - height)/2; b = (this.maxHeight + height)/2; break; case "bottom" : t = this.maxHeight - height; b = this.maxHeight; break; default : t = 0; b = this.maxHeight; break; } this.ele.style.clip = "rect(" + t + "px," + r + "px," + b + "px," + l + "px)" ; }; Mask.prototype.fn = function (){ var w,h; this.from_num ++ ; if(this.from_num<=this.speed){ w = Tween(this.from_num,0,this.maxWidth,this.speed); h = Tween(this.from_num,0,this.maxHeight,this.speed); this.set(w,h); }else{ this.fl.stop(); //this.start();//若不需要重复动画,把这句注释,上句不注释 } }; function ImgFlash(box){ this.box = box.getElementsByTagName("dl"); this.ge = 4;//切换间隔秒数 this.menu = []; this.mask = new Mask();//加载遮罩动画,不设置参数即随机效果 this.zIndex = this.box.length; var _div = document.createElement("div"); this.dang = 0; for(i=0;i
1){ var A = _nav.getElementsByTagName("A")[0]; addEventHandler(A,type,Bind(this,fun,[A])); } if(_nav.nodeType == 1)_nav.getElementsByTagName("UL")[0].style.zIndex = nav.length-i; } function fun(ele){ var li = ele.parentNode; var ul = li.getElementsByTagName("UL")[0]; this.z += 1 ul.style.zIndex = this.z; if(li.className=="d")return; li.className+=(li.className.length>0? " ": "") + "d"; this.focusEle.className=this.focusEle.className.replace(/( ?|^)db/g, ""); this.focusEle = li; this.mask.ready(ul); this.mask.start(); }; } </script>
图片幻灯应用:
美女一
美女二
美女三
导航菜单
应用:
菜单一 菜单一内容1菜单一内容2菜单一内容3菜单一内容4菜单一内容5菜单一内容6 菜单二 菜单二内容1菜单二内容2菜单二内容3菜单二内容4菜单二内容5菜单二内容6 菜单三 菜单三内容1菜单三内容2菜单三内容3菜单三内容4菜单三内容5菜单三内容6 菜单四 菜单四内容1菜单四内容2菜单四内容3菜单四内容4菜单四内容5菜单四内容6 <script language="javascript"> //初始化 new ImgFlash($("box")); new Tab($("tab1"),"mouseover"); </script> 中国WEB第一站
提示:您可以先修改部分代码再运行
本文来源:
http://www.gdgbn.com/jiaocheng/22762/
上一篇:
javascript学习指南_javascript 仿flash焦点图片切换代码
下一篇:
css div 居中_Css+div 超简洁导航上伸菜单代码
相关推荐
css div变换背景图片_CSS+DIV变换背景导航下拉菜单
友情链接怎么添加_换8个友情链接导致网站首页被K跟踪报告
json|js 图片轮换代码
【json】js checkbox和按钮实现的多选框全选功能
【纯css框架】纯css 二级导航菜单
seo优化|SEO获得日5000IP百度流量
javascript学习指南_javascript 仿flash焦点图片切换代码
[净化网络环境标语]净化网络环境全面出击 引发空间选购新观念
怎么做网站页面|怎么做网站的长尾关键词
钻石经典纯和_经典纯css菜单代码
网友关注
[css左侧多级菜单]css左侧多级菜单
网站被百度k后如何使用_网站被百度K后如何恢复
【纯css导航栏】纯css导航菜单代码
兼容ie7吗_兼容IE7,ie6纯css右侧导航菜单
【json】js 右下角浮动广告代码
钻石经典纯和|经典纯css多级联动导航菜单
javascript学习指南|javascript 防开心网好友印象特效代码
【json】js 控制input输入框效果代码
【javascript学习指南】javascript仿window多窗口桌面效果(附模拟alert()提示.及confirm())
html代码_HTML代码:
热门标签
最新php常用代码
php常用代码
as3 api|as3 火燃烧效果实现代码
php常用代码
phpstudy|php continue和break流程控制语名用法
php常用代码
【sql语句查询】sql复合查询与null对查询结果影响分析
php常用代码
兼容firefox_兼容firefox和Opera,select中添加、修改、删除option元素
php常用代码
csrf-token_c 随机生成字符串或数组方法
php常用代码
css美化select_css美化select表单实现方法代码
php常用代码
【超简单的画】超简单php 大图生成缩略图实现代码
php常用代码
[asp.net core]asp.net ajax 检测用户名是否可用代码
php常用代码
phpstudy|php 获取目录下所有文件实现代码
php常用代码
asp.net core|asp.net ajax 检测用户名是否可用代码
php常用代码热门文章
php常
css div 居中_Css+div 超简洁导航上伸菜单代码
php常
[支付宝官方首页]支付宝首页宽滑动banner代码
php常
301重定向作用_301重定向代码与方法
php常
css下拉菜单代码|css下拉菜单导航条
php常
【纯css导航条下拉菜单】纯CSS导航条下拉菜单代码
php常
[css div 居中]css+div 横向二级菜单代码
php常
【php版本】PHPBB3的百度sitemap生成器代码
php常
javascript学习指南_JavaScript控制div垂直居中的方法
php常
phpstudy_PHP 源代码压缩小工具
php常
javascript学习指南|javascript 仿ping 效果代码
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
Copyright©2006-2019 编程学习网 www.gdgbn.com 版权所有