搜索
首页web前端js教程CSS+Js遮罩效果的TAB及焦点图片切换(推荐)_javascript技巧
CSS+Js遮罩效果的TAB及焦点图片切换(推荐)_javascript技巧
PHP中文网
PHP中文网
May 16, 2016 pm 06:42 PM
tab焦点图片遮罩效果

<!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(&#39;div&#39;); 
        this.dang = 0; 
        for(i=0;i<this.zIndex;i++){ 
            this.box[i].style.zIndex = this.zIndex-i; 
            var _em = document.createElement(&#39;em&#39;),_span = document.createElement(&#39;span&#39;); 
            var _dt = this.box[i].getElementsByTagName("dt")[0]; 
            _dt.appendChild(_span); 
            addEventHandler(_em,&#39;mouseover&#39;,Bind(this,this.emEvent,[this.zIndex-i-1,true])); 
            _div.appendChild(_em); 
            this.menu.push(_em); 
            if(this.zIndex-i==1){ 
            _em.className = &#39;d&#39;; 
            } 
        } 
        box.appendChild(_div); 
        addEventHandler(box,&#39;mouseover&#39;,Bind(this,function(){this.fl.stop()})); 
        addEventHandler(box,&#39;mouseout&#39;,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="http://files.jb51.net/demoimg/200911/wall_s1.jpg" border="0" /></a></dd> 
     </dl> 
     <dl> 
     <dt><a href="#">脚本之家演示</a></dt> 
    <dd><a href="#"><img src="http://files.jb51.net/demoimg/200911/wall_s2.jpg" border="0" /></a></dd> 
     </dl> 
     <dl> 
     <dt><a href="#">人间仙境</a></dt> 
    <dd><a href="#"><img src="http://files.jb51.net/demoimg/200911/wall_s3.jpg" border="0" /></a></dd> 
     </dl> 
</div> 

 

 

 

 
<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>

其实这个不只是效果，代码也是非常值得学习的。大家主要是注意页面最下面的代码
3f1c4e4b6b16bbbd69b2ee476dc4f83a
new ImgFlash($("box"));//初始化
new Tab($("tab1"),"mouseover");
2cacc6d41bbb37262a98f745aa00fbf0  

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
如何使用Golang对图片进行蒙版和遮罩效果如何使用Golang对图片进行蒙版和遮罩效果Aug 27, 2023 am 09:07 AM

如何使用Golang对图片进行蒙版和遮罩效果在现代图像处理中，蒙版和遮罩效果是非常常见的特效。本文将介绍如何使用Golang对图片进行蒙版和遮罩效果的操作。安装必要的库在开始之前，我们需要安装一些必要的库来处理图像。运行以下命令来安装必要的库：goget-ugithub.com/fogleman/gggoget-ugolang.org/x/im

解决CentOS7的Tab键无法补全命令问题解决CentOS7的Tab键无法补全命令问题Jan 17, 2024 pm 01:30 PM

今天在centOS上做实验，发现之前在Ubuntu下使用的比较习惯的tab键补全命令的方式不能使用，于是非常好奇，经过查找资料并亲自测试，将可行的解决方式记录如下：1）首先需要在终端中运行如下命令：#yuminstallbash-completion//也可以使用通配符安装：yuminstallbash-c*或者你可以安装一些初始化的包组yum-ygroupinstallBaseCompatibilitylibrariesDebuggingToolsDial-upNetworkingsupppo

Vue 中如何实现 tab 组件及多标签页？Vue 中如何实现 tab 组件及多标签页？Jun 25, 2023 am 09:33 AM

随着前端技术的不断更新，Vue作为一款流行的前端框架，已经成为很多开发者的首选。在实际项目中，常常需要使用tab组件以及多标签页来实现不同功能模块的切换和管理。在本文中，我们将介绍如何利用Vue实现一个简单的tab组件以及多标签页。一、实现一个简单的tab组件创建Tab.vue组件在项目中创建一个Tab.vue的组件，用于显示ta

vue实现tab三种方式是什么vue实现tab三种方式是什么Jan 29, 2023 pm 02:49 PM

vue实现tab三种方式：1、通过“v-show”控制tab内容切换；2、通过vue中is的特性和“keep-alive”缓存实现tab切换；3、通过“router-link”实现路由切换。

alt+tab切换不了界面什么原因alt+tab切换不了界面什么原因Mar 09, 2023 pm 02:11 PM

alt+tab切换不了界面的原因是此命令被禁用，其解决办法：1、打开电脑，点击开始菜单，选择运行指令；2、在开始右侧的空白栏中输入“regedit”后，点击确定；3、进入到注册表管理器，找到“AltTabSettings”选项；4、双击“AltTabSettings”，在打开的选项中修改数值数据为“00000001”，点击“确认”即可。

RedMagic Gaming Tablet Pro launches as first tab with Snapdragon 8 Gen 3 Leading VersionRedMagic Gaming Tablet Pro launches as first tab with Snapdragon 8 Gen 3 Leading VersionSep 05, 2024 pm 09:30 PM

RedMagic has fully unveiled the Gaming Tablet Pro, the first tab to feature the Snapdragon 8 Gen 3 Leading Version. It’s basically the overclocked version of the standard SoC, and the RedMagic 9S Pro leads benchmarks with it. The same is true for thi

RedMagic reveals more specs of its new gaming tabletRedMagic reveals more specs of its new gaming tabletSep 01, 2024 am 06:34 AM

The second RedMagic gaming tablet will be fully unveiled on September 5. A recent benchmark run on AnTuTu revealed that it will feature the Snapdragon 8 Gen 3 Leading Version, making it as capable as the company’s latest Android smartphone, the 9S Pr

Deal | Lenovo Tab P12 Android tablet with large 3K display gets enticing 29% price cutDeal | Lenovo Tab P12 Android tablet with large 3K display gets enticing 29% price cutAug 15, 2024 am 06:44 AM

Many travelers who are looking forward to their summer vacation are probably asking themselves how to kill some time on a long train ride or international flight, and a cheap multimedia tablet such as the Lenovo Tab P12 might solve this issue. Conseq

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
1 周前ByDDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
在哪里可以找到原子中的起重机控制钥匙卡
1 周前ByDDD
显示更多

热工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

显示更多

热门话题

gmail邮箱登陆入口在哪里
7433
15
CakePHP 教程
1359
52
steam的账户名称是什么格式
76
11
win11激活密钥永久
29
19
显示更多