CSS+Js遮罩效果的TAB及焦点图片切换(推荐)_javascript技巧
<!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="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>其实这个不只是效果，代码也是非常值得学习的。大家主要是注意页面最下面的代码
<script> <br>new
ImgFlash($("box"));//初始化 <br>new Tab($("tab1"),"mouseover"); <br></script>
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Comment utiliser Golang pour masquer et masquer les effets sur les images
Aug 27, 2023 am 09:07 AM
Comment utiliser Golang pour masquer et masquer les effets sur les images Dans le traitement d'images moderne, le masquage et les effets de masquage sont des effets spéciaux très courants. Cet article expliquera comment utiliser Golang pour masquer et masquer les effets sur les images. Installation des bibliothèques nécessaires Avant de commencer, nous devons installer certaines bibliothèques nécessaires au traitement des images. Exécutez la commande suivante pour installer les bibliothèques nécessaires : goget-ugithub.com/fogleman/gggoget-ugolang.org/x/im
Résolvez le problème selon lequel la touche Tab de CentOS7 ne peut pas terminer les commandes
Jan 17, 2024 pm 01:30 PM
Aujourd'hui, je faisais une expérience sur centOS et j'ai découvert que la méthode de complétion des touches de tabulation habituelle utilisée sous Ubuntu ne pouvait pas être utilisée. J'étais donc très curieux après avoir recherché des informations et les avoir testées moi-même, j'ai enregistré les solutions possibles comme suit : 1) Tout d'abord, vous devez exécuter la commande suivante dans le terminal : #yuminstallbash-completion//Vous pouvez également utiliser une installation générique : yuminstallbash-c* ou vous pouvez installer certains groupes de packages d'initialisation yum-ygroupinstallBaseCompatibilitylibrariesDebuggingToolsDial-upNetworkingsupppo
Comment implémenter des composants d'onglets et des pages multi-onglets dans Vue ?
Jun 25, 2023 am 09:33 AM
Avec la mise à jour continue de la technologie front-end, Vue, en tant que framework front-end populaire, est devenu le premier choix de nombreux développeurs. Dans les projets réels, il est souvent nécessaire d'utiliser des composants à onglets et des pages multi-onglets pour basculer et gérer différents modules fonctionnels. Dans cet article, nous présenterons comment utiliser Vue pour implémenter un composant à onglets simples et une page multi-onglets. 1. Implémentez un composant onglet simple. Créez un composant Tab.vue dans le projet pour l'afficher.
Quelles sont les trois façons d'implémenter l'onglet dans Vue ?
Jan 29, 2023 pm 02:49 PM
Il existe trois façons d'implémenter les onglets dans Vue : 1. Contrôler le changement de contenu des onglets via "v-show" ; 2. Implémenter le changement d'onglet via la fonctionnalité is et le cache "keep-alive" dans Vue 3. Implémenter le changement d'itinéraire via "router" ; -lien" .
Pourquoi alt+tab ne peut-il pas changer d'interface ?
Mar 09, 2023 pm 02:11 PM
La raison pour laquelle alt+tab ne peut pas changer d'interface est que cette commande est désactivée. La solution : 1. Allumez l'ordinateur, cliquez sur le menu Démarrer et sélectionnez la commande Exécuter. 2. Entrez « regedit » dans la barre vide ; à droite du début, puis cliquez sur OK ; 3. Entrez dans le gestionnaire de registre et recherchez l'option "AltTabSettings" ; 4. Double-cliquez sur "AltTabSettings", modifiez les données de valeur dans l'option ouverte en "00000001" et cliquez sur "Confirmer". .
RedMagic révèle plus de spécifications de sa nouvelle tablette de jeu
Sep 01, 2024 am 06:34 AM
La deuxième tablette de jeu RedMagic sera entièrement dévoilée le 5 septembre. Une récente analyse de référence sur AnTuTu a révélé qu'elle comportera la version principale Snapdragon 8 Gen 3, la rendant aussi performante que le dernier smartphone Android de la société, le 9S Pr.
RedMagic Gaming Tablet Pro est lancé comme premier onglet avec Snapdragon 8 Gen 3 Leading Version
Sep 05, 2024 pm 09:30 PM
RedMagic a entièrement dévoilé la Gaming Tablet Pro, le premier onglet à présenter la version leader du Snapdragon 8 Gen 3. Il s’agit essentiellement de la version overclockée du SoC standard, et le RedMagic 9S Pro est en tête des benchmarks avec lui. La même chose est vraie pour ça
Offre | La tablette Android Lenovo Tab P12 avec grand écran 3K bénéficie d'une réduction de prix alléchante de 29 %
Aug 15, 2024 am 06:44 AM
De nombreux voyageurs qui attendent avec impatience leurs vacances d'été se demandent probablement comment perdre du temps lors d'un long trajet en train ou sur un vol international, et une tablette multimédia bon marché telle que la Lenovo Tab P12 pourrait résoudre ce problème. Conséquence
