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

</p> <p><title>Js<a href="https://www.kunjuke.com/tag/66356/" title="遮罩效果" target="_blank">遮罩效果</a>的TAB及图片切换</title> </p> <p>div, ul, ol, li, dl, dt, dd {<br /> margin:0;<br /> padding:0;<br /> }<br /> .imgFlash,.<a href="https://www.kunjuke.com/tag/2275/" title="tab" target="_blank">tab</a>{margin:auto}<br /> /*------<a href="https://www.kunjuke.com/tag/67429/" title="焦点图片" target="_blank">焦点图片</a>的css-------*/<br /> .imgFlash {<br /> height:230px;width:270px;<br /> position:relative;<br /> }<br /> .imgFlash dl {<br /> height:100%;<br /> overflow:hidden;<br /> position:absolute;<br /> width:100%;<br /> }<br /> .imgFlash img {<br /> height:100%;<br /> position:absolute;<br /> width:100%;<br /> background-color: #FFFFFF;<br /> background-repeat: no-repeat;<br /> background-position: center center;<br /> }<br /> .imgFlash dt {<br /> bottom:0;<br /> font-size:12px;<br /> height:24px;line-height:24px;<br /> left:0;<br /> position:absolute;<br /> width:100%;<br /> z-index:1;<br /> }<br /> .imgFlash dt span {<br /> background-color:#000000;<br /> height:100%;<br /> opacity:0.4;filter:Alpha(Opacity=40);<br /> position:absolute;<br /> width:100%;<br /> }<br /> .imgFlash dt a {<br /> color:#FFFFFF;<br /> position:absolute;<br /> text-decoration:none;<br /> text-indent:5px;<br /> z-index:1;<br /> }<br /> .imgFlash dt a:hover {<br /> text-decoration:underline;<br /> }<br /> .imgFlash div {<br /> bottom:8px;<br /> cursor:pointer;<br /> display:block;<br /> position:absolute;<br /> right:8px;<br /> z-index:99999;<br /> }<br /> .imgFlash div em {<br /> background-color:#000000;<br /> border:1px solid #FFFFFF;<br /> display:block;<br /> float:right;<br /> height:4px;<br /> margin-right:3px;<br /> filter:Alpha(Opacity=50);opacity:0.5;<br /> overflow:hidden;<br /> width:4px;<br /> }<br /> .imgFlash div em.d {/*激活的小方块的样式*/<br /> background-color:#CC0000;<br /> filter:Alpha(Opacity=80);<br /> opacity:0.8;<br /> }<br /> /*-------------------------Tab的css----------------------------*/<br /> .tab,.tab ul{list-style-type: none;}<br /> .tab{<br /> width:270px;<br /> background-color:#FFFFFF;<br /> height: 160px;<br /> font-size: 12px;<br /> position: relative;<br /> border-top-width: 30px;<br /> border-right-width: 1px;<br /> border-bottom-width: 1px;<br /> border-left-width: 1px;<br /> border-top-style: solid;<br /> border-right-style: solid;<br /> border-bottom-style: solid;<br /> border-left-style: solid;<br /> border-top-color: #0066FF;<br /> border-right-color: #0066FF;<br /> border-bottom-color: #0066FF;<br /> border-left-color: #0066FF;<br /> }<br /> .tab ul {<br /> position: absolute;<br /> top: -30px;<br /> }<br /> .tab li{<br /> float:left;<br /> background-color:#A9CEEB;<br /> background-repeat:no-repeat;<br /> background-position:left top;<br /> margin-top:5px;<br /> margin-left: 5px;<br /> }<br /> .tab li.d {<br /> background-color: #FFFFFF;<br /> }<br /> .tab li a{text-decoration:none;display:block;padding-right:8px;padding-left:8px;line-height:25px;color:#2B6FA2;}<br /> .tab li.d a{color:#0C3E74;}<br /> .tab li ul{<br /> border-bottom-style:none;<br /> position:absolute;<br /> left:0px;<br /> top:30px;<br /> background-color: #FFFFFF;<br /> padding-top: 10px;<br /> width: 270px;<br /> }<br /> .tab li li{<br /> float:none;<br /> background-image:none;<br /> margin:0px;<br /> background-color: #FFFFFF;<br /> }<br /> .tab li li a{<br /> background-image:none;<br /> line-height:22px;<br /> color: #000000;<br /> float: none;<br /> height: 22px;<br /> }<br /> .tab li ul li a:hover{text-decoration:underline;}<br /> .tab li.d li a{color:#000000;} </p> <dl> <dt>神秘花园</dt> <dd></dd> </dl> <dl> <dt>北冥有鱼演示</dt> <dd></dd> </dl> <dl> <dt>人间仙境</dt> <dd></dd> </dl> <ul> <li class="d">WEB前端 <ul> <li>VB封装一个文本文件读写类含示例</li> <li>Csdn网站右下角的滑出弹出提示（带关闭功能）</li> <li>VC++做的精美仿XP开始菜单</li> <li>VB+Access学生综合档案管理系统</li> <li>Delphi随机抽取幸运观众Access数据库版</li> <li>多线程的VC++高速文件搜索代码</li> </ul> </li> <li>源码下载 <ul> <li>15个jQuery学习实例（菜单、滚动、层隐藏等）</li> <li>VB取汉字拼音首码（第一个字母）源码</li> <li>VB 多进制转换源程序</li> <li>杰奇网站管理系统 JIEQI CMS v1.7</li> </ul> </li> <li>短标题 <ul> <li>Delphi版视频监控系统</li> <li>《Java2核心技术卷2:高级特性》第7版中文高清 PDF</li> <li>基于Delphi的HIS自动更新程序 v2.0</li> <li>C#早期开发的摄像头监控系统源码</li> <li>随机密码生成器VC++源程序</li> </ul> </li> <li>更短 <ul> <li>C# 酒店管理（SQL2005）</li> <li>云台C#家庭视频监控系统完整版</li> <li>VS2008开发的C#高校宿舍管理系统</li> <li>C#落雪无痕IP端口扫描器VS2005</li> <li>火狐浏览器 Firefox v3.5</li> </ul> </li> </ul> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
其实这个不只是效果，代码也是非常值得学习的。大家主要是注意页面最下面的代码
<script>
new ImgFlash($("box"));//初始化
new Tab($("tab1"),"mouseover");
</script>

您可能感兴趣的文章:

• 最简单的js图片切换效果实现代码
• 用html+css+js实现的一个简单的图片切换特效
• 纯js实现背景图片切换效果代码
• 简单的实现点击箭头图片切换的js代码
• 纯js无flash仿搜狐女人频道FLASH图片切换效果代码
• javascript实现图片切换的幻灯片效果源代码
• JavaScript 图片切换展示效果alibaba拓展版
• jQuery图片切换插件jquery.cycle.js使用示例
• JS图片切换的具体方法(带缩略图版)
• js鼠标点击图片切换效果代码分享
• js+div实现文字滚动和图片切换效果代码
• js鼠标点击图片切换效果实现代码
• JS实现的简单图片切换功能示例【测试可用】