滑动门

最新推荐文章于 2021-06-03 03:04:44 发布
最新推荐文章于 2021-06-03 03:04:44 发布
阅读量390 收藏
点赞数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js遮罩效果的TAB及图片切换</title>
<style>
div, ul, ol, li, dl, dt, dd {
margin:0;
padding:0;
}
.imgFlash,.tab{margin:auto}
/*------焦点图片的css-------*/
.imgFlash {
height:230px;width:270px;
position:relative;
}
.imgFlash dl {
height:100%;
overflow:hidden;
position:absolute;
width:100%;
}
.imgFlash img {
height:100%;
position:absolute;
width:100%;
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: center center;
}
.imgFlash dt {
bottom:0;
font-size:12px;
height:24px;line-height:24px;
left:0;
position:absolute;
width:100%;
z-index:1;
}
.imgFlash dt span {
background-color:#000000;
height:100%;
opacity:0.4;filter:Alpha(Opacity=40);
position:absolute;
width:100%;
}
.imgFlash dt a {
color:#FFFFFF;
position:absolute;
text-decoration:none;
text-indent:5px;
z-index:1;
}
.imgFlash dt a:hover {
text-decoration:underline;
}
.imgFlash div {
bottom:8px;
cursor:pointer;
display:block;
position:absolute;
right:8px;
z-index:99999;
}
.imgFlash div em {
background-color:#000000;
border:1px solid #FFFFFF;
display:block;
float:right;
height:4px;
margin-right:3px;
filter:Alpha(Opacity=50);opacity:0.5;
overflow:hidden;
width:4px;
}
.imgFlash div em.d {/*激活的小方块的样式*/
background-color:#CC0000;
filter:Alpha(Opacity=80);
opacity:0.8;
}
/*-------------------------Tab的css----------------------------*/
.tab,.tab ul{list-style-type: none;}
.tab{
width:270px;
background-color:#FFFFFF;
height: 160px;
font-size: 12px;
position: relative;
border-top-width: 30px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #0066FF;
border-right-color: #0066FF;
border-bottom-color: #0066FF;
border-left-color: #0066FF;
}
.tab ul {
position: absolute;
top: -30px;
}
.tab li{
float:left;
background-color:#A9CEEB;
background-repeat:no-repeat;
background-position:left top;
margin-top:5px;
margin-left: 5px;
}
.tab li.d {
background-color: #FFFFFF;
}
.tab li a{text-decoration:none;display:block;padding-right:8px;padding-left:8px;line-height:25px;color:#2B6FA2;}
.tab li.d a{color:#0C3E74;}
.tab li ul{
border-bottom-style:none;
position:absolute;
left:0px;
top:30px;
background-color: #FFFFFF;
padding-top: 10px;
width: 270px;
}
.tab li li{
float:none;
background-image:none;
margin:0px;
background-color: #FFFFFF;
}
.tab li li a{
background-image:none;
line-height:22px;
color: #000000;
float: none;
height: 22px;
}
.tab li ul li a:hover{text-decoration:underline;}
.tab li.d li a{color:#000000;}
</style>
<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 < this.zIndex; i++) {
            this.box[i].style.zIndex = this.zIndex - i;
            var _em = document.createElement('em'), _span = document.createElement('span');
            var _dt = this.box[i].getElementsByTagName("dt")[0];
            _dt.appendChild(_span);
            addEventHandler(_em, 'mouseover', Bind(this, this.emEvent, [this.zIndex - i - 1, true]));
            _div.appendChild(_em);
            this.menu.push(_em);
            if (this.zIndex - i == 1) {
                _em.className = 'd';
            }
        }
        box.appendChild(_div);
        addEventHandler(box, 'mouseover', Bind(this, function () { this.fl.stop() }));
        addEventHandler(box, 'mouseout', Bind(this, function () { this.fl.play(this.ge * 1000) }));
        this.fl = Timer.add(Bind(this, this.enterFrame))
        this.fl.play(this.ge * 1000);
    }
    ImgFlash.prototype.enterFrame = function () {
        var ddd = this.dang == 2 ? 0 : this.dang + 1;
        this.emEvent(ddd);
    };
    ImgFlash.prototype.emEvent = function (index, b) {
        if (b) this.fl.stop();
        if (index == this.dang) return;
        this.menu[this.menu.length - 1 - this.dang].className = "";
        var odl = this.box[this.dang];
        this.zIndex++;
        this.dang = index;
        this.menu[this.menu.length - 1 - this.dang].className = "d";
        var ndl = this.box[this.dang];
        var img = ndl.getElementsByTagName("img")[0];
        this.mask.ready(img);
        this.mask.start();
        ndl.style.zIndex = this.zIndex;
    }
    function Tab(id, type) {
        var nav = id.getElementsByTagName("ul")[0].childNodes;
        var _nav, i = 0;
        this.mask = new Mask(); //初始化遮罩动画
        this.z = 1000;
        while (_nav = nav[i++]) {
            if (_nav.className == "d") this.focusEle = _nav;
            if (_nav.childNodes.length > 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(/( ?|^)d\b/g, "");
            this.focusEle = li;
            this.mask.ready(ul);
            this.mask.start();
        };
    }
</script>
</head>
<body>
<div class="imgFlash" id="box">
<dl>
<dt><a href="#">神秘花园</a></dt>
<dd><a href="#"><img src="/jscss/demoimg/wall_s1.jpg" border="0" /></a></dd>
</dl>
<dl>
<dt><a href="#">源码爱好者</a></dt>
<dd><a href="#"><img src="/jscss/demoimg/wall_s2.jpg" border="0" /></a></dd>
</dl>
<dl>
<dt><a href="#">人间仙境</a></dt>
<dd><a href="#"><img src="/jscss/demoimg/wall_s3.jpg" border="0" /></a></dd>
</dl>
</div>
<br />
<br />
<br />
<br />
<div class="tab" id="tab1">
<ul>
<li class="d"><a href="javascript:;">WEB前端</a>
<ul>
<li><a href="/soft/6675.shtml" target="_blank">VB封装一个文本文件读写类含示例</a></li><li><a href="/soft/6680.shtml" target="_blank">Csdn网站右下角的滑出弹出提示（带关闭功能）</a></li><li><a href="/soft/6668.shtml" target="_blank">VC++做的精美仿XP开始菜单</a></li><li><a href="/soft/6660.shtml" target="_blank">VB+Access学生综合档案管理系统</a></li><li><a href="/soft/6669.shtml" target="_blank">Delphi随机抽取幸运观众Access数据库版</a></li><li><a href="/soft/6665.shtml" target="_blank">多线程的VC++高速文件搜索代码</a></li>
</ul>
</li>
<li><a href="javascript:;">源码下载</a>
<ul>
<li><a href="/soft/6638.shtml" target="_blank">15个jQuery学习实例（菜单、滚动、层隐藏等）</a></li><li><a href="/soft/6647.shtml" target="_blank">VB取汉字拼音首码（第一个字母）源码</a></li><li><a href="/soft/6646.shtml" target="_blank">VB 多进制转换源程序</a></li><li><a href="/soft/6657.shtml" target="_blank">杰奇网站管理系统 JIEQI CMS  v1.7</a></li>
</ul>
</li>
<li><a href="javascript:;">短标题</a>
<ul>
<li><a href="/soft/2182.shtml" target="_blank">Delphi版视频监控系统</a></li><li><a href="/soft/1852.shtml" target="_blank">《Java2核心技术卷2:高级特性》第7版中文高清 PDF</a></li><li><a href="/soft/2674.shtml" target="_blank">基于Delphi的HIS自动更新程序 v2.0</a></li><li><a href="/soft/2972.shtml" target="_blank">C#早期开发的摄像头监控系统源码</a></li><li><a href="/soft/3715.shtml" target="_blank">随机密码生成器VC++源程序</a></li>
</ul>
</li>
<li><a href="javascript:;">更短</a>
<ul>
<li><a href="/soft/4561.shtml" target="_blank">C# 酒店管理（SQL2005）</a></li><li><a href="/soft/3041.shtml" target="_blank">云台C#家庭视频监控系统完整版</a></li><li><a href="/soft/3228.shtml" target="_blank">VS2008开发的C#高校宿舍管理系统</a></li><li><a href="/soft/3330.shtml" target="_blank">C#落雪无痕IP端口扫描器VS2005</a></li><li><a href="/soft/4339.shtml" target="_blank">火狐浏览器 Firefox v3.5</a></li>
</ul>
</li>
</ul>
</div>
<script>
    new ImgFlash($("box")); //初始化
    new Tab($("tab1"), "mouseover");
</script>
</body>
</html>
wu_jing_sheng0
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
滑动门技术
山河月色
07-18 732
滑动门技术 滑动门技术的实现主要是通过两个父子标签互相嵌套来实现的 例给a标签嵌套了一个span标签 分别给a和span设置其背景图片 其中给a的背景图片让他 放在左顶部 span放在右顶部 通过设置内边距来填充左右的距离通过内容来填充进而实现滑动们的技术 代码如下 两侧对称滑动门 <div class="box"> <div class="list"> <ul class="clearfix"> <!-- li做布
html滑动门案例
08-09
滑动门案例
css滑动门技术
楠886
11-23 561
css滑动门技术 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了css滑动门技术。 使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。 工作原理 滑动门技术的关键主要在于图片拼接， 利用CSS精灵Sprite（主要是背景位置position）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。 原背景图–> 切开...
html 滑动门效果,怎样用DW做滑动门的效果
weixin_39605414的博客
06-03 348
滑动门永远是新手的目标！而且单纯的DW是做不出这种效果的，必须要有javascript的！html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}UL{list-style-type:none;margin:0px;}.ctt{height:auto;clear:both;border:1pxs...
滑动门效果的实现
sinat_41660714的博客
11-12 648
滑动门 滑动门常常是用在导航栏中的一种效果，就例如聊天工具中的聊天框，会随着文字的增加而拉长，但是两侧的效果比如尖角并不会变形。 下面介绍两种实现思路 1，三盒子法 思路，将滑动门分成三块，左边放一个背景，右边放一个背景，中间的块用背景水平平铺 如下： <div class="box"> <div class="left"></div> <...
基于HTML+CSS实现网页滑动门效果
01-19
一、什么是滑动门 大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门。 小米官网，网页滑动门效果 二、实现滑动...
基于JavaScript实现滑动门效果
10-20
主要为大家详细介绍了js实现滑动门效果的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js滑动门代码制作js滑动门导航鼠标滑过滑动门效果
11-23
js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果
126邮箱页 html源码 单页源码 网站后台登陆界面HTML源码.zip
04-23
126邮箱页 html源码 单页源码 网站后台登陆界面HTML源码
武汉开放数据创新大赛——烽火杯文件.zip
04-23
武汉开放数据创新大赛——烽火杯文件
mmexport1713881481676.png
04-23
mmexport1713881481676.png
Digital currency trading platformAdobeXD源码下载设计素材UI设计.xd
最新发布
04-23
Digital currency trading platform landing pageAdobeXD源码下载设计素材UI设计
了解Java及环境搭建
04-23
了解Java及环境搭建
专业实习-三创赛.zip
04-23
专业实习-三创赛
第三届全国大学生服务外包创新创业大赛（智能楼宇能耗管理系统）.zip
04-23
第三届全国大学生服务外包创新创业大赛（智能楼宇能耗管理系统）
allPort Design SystemAdobeXD源码下载设计素材UI设计.xd
04-23
allPort Design SystemAdobeXD源码下载设计素材UI设计
JAVA ssm 实现论坛网站 毕业设计参考demo（内附源码+使用说明）
04-23
系统介绍 本系统根据企业的需求进行设计，具有以下特点：界面友好，采用人机对话方式，操作简单。信息查询灵活、快捷、数据存储安全。实现用户管理功能，主要包括用户登录与注册功能。对用户输入的数据，系统进行严格的数据检查，尽可能排除人为错误。要实现模糊查询功能，允许用户查询一类的文章。系统运行稳定，安全可靠。 操作注意事项 本系统的后台用户名为：mr，密码为：mrsoft 操作流程 （1）通过首页提供的数据可实现搜索数据。 （2）可通过首页的“进入论坛”超链接进入论坛区，此时用户可以浏览文章，并为文章添加评论。 （3）访客可登录系统来发表文章。
js实现多项滑动门选项卡特效
05-29
好的，以下是一个简单的实现多项滑动门选项卡特效的示例代码： HTML结构： ``` <span class="tab active">Tab 1 <span class="tab">Tab 2 <span class="tab">Tab 3 <p>Tab 1 content <p>Tab 2 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值