CSS+Js遮罩效果的TAB及焦点图片切换(推荐)_javascript技巧-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

CSS+Js遮罩效果的TAB及焦点图片切换(推荐)_javascript技巧

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>

Nach dem Login kopieren

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

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Wie lange dauert es, um Split Fiction zu schlagen?

1 Monate vor By DDD

R.E.P.O. Beste grafische Einstellungen

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

1 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7401

Java-Tutorial

1630

CakePHP-Tutorial

1358

Laravel-Tutorial

1268

PHP-Tutorial

1217

Related knowledge

So verwenden Sie Golang zum Maskieren und Maskieren von Effekten auf Bildern Aug 27, 2023 am 09:07 AM

So verwenden Sie Golang zum Maskieren und Maskieren von Effekten auf Bildern. In der modernen Bildverarbeitung sind Maskierung und Maskierungseffekte weit verbreitete Spezialeffekte. In diesem Artikel wird erläutert, wie Sie Golang zum Maskieren und Maskieren von Effekten auf Bildern verwenden. Installieren der erforderlichen Bibliotheken Bevor wir beginnen, müssen wir einige erforderliche Bibliotheken installieren, um Bilder zu verarbeiten. Führen Sie den folgenden Befehl aus, um die erforderlichen Bibliotheken zu installieren: goget-ugithub.com/fogleman/gggoget-ugolang.org/x/im

Lösen Sie das Problem, dass die Tabulatortaste von CentOS7 Befehle nicht ausführen kann Jan 17, 2024 pm 01:30 PM

Heute habe ich ein Experiment mit centOS durchgeführt und festgestellt, dass die unter Ubuntu übliche Tabulatortasten-Vervollständigungsmethode nicht verwendet werden konnte. Nachdem ich nach Informationen gesucht und sie selbst getestet hatte, habe ich die möglichen Lösungen wie folgt aufgezeichnet: 1) Zuerst müssen Sie den folgenden Befehl im Terminal ausführen: #yuminstallbash-completion//Sie können auch die Wildcard-Installation verwenden: yuminstallbash-c* oder Sie können einige Initialisierungspaketgruppen yum-ygroupinstallBaseCompatibilitylibrariesDebuggingToolsDial-upNetworkingsupppo installieren

Wie implementiert man Tab-Komponenten und Multi-Tab-Seiten in Vue? Jun 25, 2023 am 09:33 AM

Mit der kontinuierlichen Aktualisierung der Front-End-Technologie ist Vue als beliebtes Front-End-Framework zur ersten Wahl vieler Entwickler geworden. In tatsächlichen Projekten ist es häufig erforderlich, Registerkartenkomponenten und Seiten mit mehreren Registerkarten zu verwenden, um verschiedene Funktionsmodule zu wechseln und zu verwalten. In diesem Artikel stellen wir vor, wie Sie mit Vue eine einfache Tab-Komponente und eine Seite mit mehreren Tabs implementieren. 1. Implementieren Sie eine einfache Tab-Komponente. Erstellen Sie eine Tab.vue-Komponente im Projekt, um sie anzuzeigen.

Welche drei Möglichkeiten gibt es, Tabs in Vue zu implementieren? Jan 29, 2023 pm 02:49 PM

Es gibt drei Möglichkeiten, Tabs in Vue zu implementieren: 1. Tab-Inhaltsumschaltung über „v-show“ steuern; 2. Tab-Umschaltung über die IS-Funktion und „Keep-Alive“-Cache in Vue implementieren; -link" .

Warum kann Alt+Tab nicht zwischen Schnittstellen wechseln? Mar 09, 2023 pm 02:11 PM

Der Grund, warum Alt+Tab die Schnittstelle nicht wechseln kann, ist, dass dieser Befehl deaktiviert ist: 1. Schalten Sie den Computer ein, klicken Sie auf das Startmenü und wählen Sie den Befehl „Ausführen“. 2. Geben Sie „regedit“ in die leere Leiste ein rechts vom Start und klicken Sie auf OK. 3. Rufen Sie den Registrierungsmanager auf und suchen Sie die Option „AltTabSettings“. Ändern Sie die Wertdaten in der geöffneten Option in „00000001“ und klicken Sie auf „Bestätigen“. .

RedMagic enthüllt weitere Spezifikationen seines neuen Gaming-Tablets Sep 01, 2024 am 06:34 AM

Das zweite RedMagic-Gaming-Tablet wird am 5. September vollständig vorgestellt. Ein kürzlich durchgeführter Benchmark-Durchlauf auf AnTuTu ergab, dass es mit der führenden Version Snapdragon 8 Gen 3 ausgestattet sein wird und damit genauso leistungsfähig ist wie das neueste Android-Smartphone des Unternehmens, das 9S Pr

Das RedMagic Gaming Tablet Pro wird als erstes Tab mit der führenden Version von Snapdragon 8 Gen 3 eingeführt Sep 05, 2024 pm 09:30 PM

RedMagic hat das Gaming Tablet Pro vollständig vorgestellt, das erste Tablet mit der führenden Version von Snapdragon 8 Gen 3. Es handelt sich im Grunde um die übertaktete Version des Standard-SoC, und damit führt das RedMagic 9S Pro die Benchmarks an. Das Gleiche gilt auch hier

Deal | Das Android-Tablet Lenovo Tab P12 mit großem 3K-Display erhält einen verlockenden Preisnachlass von 29 % Aug 15, 2024 am 06:44 AM

Viele Reisende, die sich auf den Sommerurlaub freuen, fragen sich wahrscheinlich, wie sie auf einer langen Zugfahrt oder einem internationalen Flug die Zeit totschlagen können, und ein günstiges Multimedia-Tablet wie das Lenovo Tab P12 könnte dieses Problem lösen. Folge

See all articles