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

Rumah

hujung hadapan web

tutorial js

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

PHP中文网

May 16, 2016 pm 06:42 PM

tabgambar fokusKesan topeng

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

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Enjin JavaScript: Membandingkan PelaksanaanApr 13, 2025 am 12:05 AM

Enjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.

Beyond the Browser: JavaScript di dunia nyataApr 12, 2025 am 12:06 AM

Aplikasi JavaScript di dunia nyata termasuk pengaturcaraan sisi pelayan, pembangunan aplikasi mudah alih dan Internet of Things Control: 1. Pengaturcaraan sisi pelayan direalisasikan melalui node.js, sesuai untuk pemprosesan permintaan serentak yang tinggi. 2. Pembangunan aplikasi mudah alih dijalankan melalui reaktnatif dan menyokong penggunaan silang platform. 3. Digunakan untuk kawalan peranti IoT melalui Perpustakaan Johnny-Five, sesuai untuk interaksi perkakasan.

Membina aplikasi SaaS Multi-penyewa dengan Next.js (Integrasi Backend)Apr 11, 2025 am 08:23 AM

Saya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing

Cara Membina Aplikasi SaaS Multi-Tenant dengan Next.js (Integrasi Frontend)Apr 11, 2025 am 08:22 AM

Artikel ini menunjukkan integrasi frontend dengan backend yang dijamin oleh permit, membina aplikasi edtech SaaS yang berfungsi menggunakan Next.Js. Frontend mengambil kebenaran pengguna untuk mengawal penglihatan UI dan memastikan permintaan API mematuhi dasar peranan

JavaScript: meneroka serba boleh bahasa webApr 11, 2025 am 12:01 AM

JavaScript adalah bahasa utama pembangunan web moden dan digunakan secara meluas untuk kepelbagaian dan fleksibiliti. 1) Pembangunan front-end: Membina laman web dinamik dan aplikasi satu halaman melalui operasi DOM dan kerangka moden (seperti React, Vue.js, sudut). 2) Pembangunan sisi pelayan: Node.js menggunakan model I/O yang tidak menyekat untuk mengendalikan aplikasi konkurensi tinggi dan masa nyata. 3) Pembangunan aplikasi mudah alih dan desktop: Pembangunan silang platform direalisasikan melalui reaktnatif dan elektron untuk meningkatkan kecekapan pembangunan.

Evolusi JavaScript: Trend Semasa dan Prospek Masa DepanApr 10, 2025 am 09:33 AM

Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.

Demystifying JavaScript: Apa yang berlaku dan mengapa pentingApr 09, 2025 am 12:07 AM

JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.

Adakah Python atau JavaScript lebih baik?Apr 06, 2025 am 12:14 AM

Python lebih sesuai untuk sains data dan pembelajaran mesin, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python terkenal dengan sintaks ringkas dan ekosistem perpustakaan yang kaya, dan sesuai untuk analisis data dan pembangunan web. 2. JavaScript adalah teras pembangunan front-end. Node.js menyokong pengaturcaraan sisi pelayan dan sesuai untuk pembangunan stack penuh.

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang laluByDDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

Dreamweaver Mac版

Alat pembangunan web visual

Pelayar Peperiksaan Selamat

Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7476

Tutorial CakePHP

1377

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi