Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > TAB and focus image switching with CSS Js mask effect (recommended)_javascript skills

TAB and focus image switching with CSS Js mask effect (recommended)_javascript skills

PHP中文网
Release： 2016-05-16 18:42:13
Original
1129 people have browsed it

<!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>
Copy after login

In fact, this is not only the effect, the code is also worth learning. Everyone mainly pays attention to the code at the bottom of the page
<script> <br>new ImgFlash($("box"));//Initialization <br>new Tab($("tab1"),"mouseover"); <br></script>

Related labels：
tab focus picture Mask effect
source：php.cn
Previous article：Different text flashes, flashing in turn_Text special effects Next article：Add String.Format method to javascript_javascript tips
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
CSS styles not applied to site I'm making a website using Bootstrap5 but the index.css properties are not being applied t...
From 2024-04-06 17:12:23
0
1
336
Why does omitting 0ms sleep break my css transitions? I'm trying to implement a FLIP animation to see if I understand it correctly. In this code...
From 2024-04-06 16:29:50
0
2
490
Invalid React child element (found: Object with key {clientVersion}). If you want to render a collection of child elements, use an array instead I have a multi-step form and when I try to submit it shows this error. However, if I use c...
From 2024-04-06 16:25:39
0
1
346
Modify matSelect style when displaying options How to change properties of mat-select when option is on? <mat-selectclass="select...
From 2024-04-05 09:23:19
0
1
1374
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template