绝对经典的滑动门特效代码

最新推荐文章于 2021-03-27 15:34:07 发布
最新推荐文章于 2021-03-27 15:34:07 发布
阅读量2k 收藏 1
点赞数
分类专栏： HTML/CSS/JS 文章标签： javascript class tags function html border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mane_yao/article/details/5530388
版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD><TITLE>绝对经典资讯网站滑动门特效</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<style type="text/css">
<!--
*{padding:0; margin:0}
img{border:0; display:block;}
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: black; LINE-HEIGHT: 150%; PADDING-TOP: 10px; BACKGROUND-COLOR: white; TEXT-ALIGN: center
}
.dis {
DISPLAY: block
}
.undis {
DISPLAY: none
}
#cntR {
WIDTH: 302px
}
#NewsTop {
CLEAR: both; MARGIN-BOTTOM: 16px
}
#NewsTop P {
FLOAT: left; LINE-HEIGHT: 21px
}
#NewsTop P.topTit {
FONT-WEIGHT: bold; WIDTH: 117px
}
#NewsTop P.topC0 {
BACKGROUND: #dcdcdc; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; CURSOR: pointer
}
#NewsTop P.topC1 {
BACKGROUND: #c2130e; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; COLOR: #fff
}
#NewsTop #NewsTop_tit {
BORDER-BOTTOM: #c2130e 3px solid; HEIGHT: 21px
}
#NewsTop #NewsTop_cnt {
PADDING-LEFT: 32px; BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200901/li.gif) no-repeat 12px 13px; LINE-HEIGHT: 26px; PADDING-TOP: 7px; HEIGHT: 260px; TEXT-ALIGN: left
}
#NewsTop #NewsTop_cnt A {
COLOR: #666; TEXT-DECORATION: none
}
#NewsTop #NewsTop_cnt A:hover {
COLOR: #c2130e; TEXT-DECORATION: underline
}
-->
</style>
</HEAD>
<BODY>
<DIV id="cntR">
<DIV id="NewsTop">
<DIV id="NewsTop_tit">
<P class="topTit">新闻排行</P>
<P class="topC0">国内</P>
<P class="topC0">国际</P>
<P class="topC0">社会</P>
<P class="topC0">网评</P>
</DIV>
<DIV id="NewsTop_cnt">
<SPAN title="Don't delete me"></SPAN>
<SPAN>
<A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR>
<A href="#" target=_self>可拖动、关闭及最小化的层拖动窗口</A><BR>
<A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR>
<A href="#" target=_self>很实用的对联广告代码（自适应高度）</A><BR>
<A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR>
<A href="#" target=_self>很酷的JavaScript图片放大效果</A><BR>
<A href="#" target=_self>很实用的对联广告代码（自适应高度）</A><BR>
<A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR>
<A href="#" target=_self>很实用的对联广告代码（自适应高度）</A><BR>
<A href="#" target=_self>可拖动、关闭及最小化的层拖动窗口</A><BR>
<div align="right"><A href="#" target=_self>...more</A></div>
</SPAN>
<SPAN>
<A href="#" target=_self>很酷的JavaScript图片放大效果</A><BR>
<A href="#" target=_self>可拖动、关闭及最小化的层拖动窗口</A><BR>
<A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR>
<A href="#" target=_self>很实用的对联广告代码（自适应高度）</A><BR>
<A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR>
<A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR>
<A href="#" target=_self>很酷的JavaScript图片放大效果</A><BR>
<A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR>
<A href="#" target=_self>很实用的对联广告代码（自适应高度）</A><BR>
<A href="#" target=_self>可拖动、关闭及最小化的层拖动窗口</A><BR>
<div align="right"><A href="#" target=_self>...more</A></div>
</SPAN>
<SPAN>
<A href="#" target=_self>仿天极网首页幻灯图片切换特效</A><BR>
<A href="#" target=_self>可拖动、关闭及最小化的层拖动窗口</A><BR>
<A href="#" target=_self>仿天极网首页幻灯图片切换特效</A><BR>
<A href="#" target=_self>很实用的对联广告代码（自适应高度）</A><BR>
<A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR>
<A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR>
<A href="#" target=_self>很实用的对联广告代码（自适应高度）</A><BR>
<A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR>
<A href="#" target=_self>仿天极网首页幻灯图片切换特效</A><BR>
<A href="#" target=_self>可拖动、关闭及最小化的层拖动窗口</A><BR>
<div align="right"><A href="#" target=_self>...more</A></div>
</SPAN>
<SPAN>
<A href="#" target=_self>非常炫的图片特效，响应鼠标变化</A><BR>
<A href="#" target=_self>可拖动、关闭及最小化的层拖动窗口</A><BR>
<A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR>
<A href="#" target=_self>非常炫的图片特效，响应鼠标变化</A><BR>
<A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR>
<A href="#" target=_self>复选框全选、全不选的Javascript代码</A><BR>
<A href="#" target=_self>很实用的对联广告代码（自适应高度）</A><BR>
<A href="#" target=_self>非常炫的图片特效，响应鼠标变化</A><BR>
<A href="#" target=_self>很实用的对联广告代码（自适应高度）</A><BR>
<A href="#" target=_self>可拖动、关闭及最小化的层拖动窗口</A><BR>
<div align="right"><A href="#" target=_self>...more</A></div>
</SPAN>
</DIV>
<SCRIPT>
var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('p');
var TagsCnt=document.getElementById('NewsTop_cnt').getElementsByTagName('span');
var len=Tags.length;
var flag=1;//修改默认值
for(i=1;i<len;i++){
Tags[i].value = i;
Tags[i].οnmοuseοver=function(){changeNav(this.value)};
TagsCnt[i].className='undis';
}
Tags[flag].className='topC1';
TagsCnt[flag].className='dis';
function changeNav(v){
Tags[flag].className='topC0';
TagsCnt[flag].className='undis';
flag=v;
Tags[v].className='topC1';
TagsCnt[v].className='dis';
}
</SCRIPT>
</DIV>
</DIV>
</BODY></HTML>

mane_yao
关注
专栏目录
滑动门特效完整代码实现
07-24
滑动门特效完整代码实现
10款滑动门代码_jquery 滑动门_js滑动门_tab滑动门_jquery 选项卡_js选项卡_tab选项卡效果（一）
墨鱼部落格
03-03 305
tab标签图片切换大图预览特效 开奖选号tab切换页面代码 jquery ajax选项卡使用jQuery选项卡切换异步加载请求数据 jquery滑动门代码鼠标悬停竖直手风琴滑动门切换 jQuery新闻列表阅读器选项卡内容滚动切换 jquery 水平手风琴鼠标滑过标题图片滑动切换 jquery竖直手风琴菜单收缩展示下拉菜单 jquery水平手风琴鼠标滑过图片标题水...
滑动门（Tab选项卡）代码
weixin_30414305的博客
12-08 308
1、一个简单的tab选项效果 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <script type="text/javascript" src="...
简单滑动门js代码
chenshu0的博客
11-28 1741
代码如下学习点 立即调用的函数表达式 //使用立即调用的函数表答式，为了获得不同的i值 for(i=0;i<5;i++){ (function(i){ 用的i的内容 })(i); } 了解更多请点击 2. 逻辑解释 //计算每道门打开时应移动的距离 var translate = imgWidth - exposeWidth; //为每道门绑定事
php滑动门效果,js实现简洁的TAB滑动门效果代码
weixin_30424427的博客
03-27 177
本文实例讲述了js实现简洁的TAB滑动门效果代码。分享给大家供大家参考。具体如下：这是一款滑动门代码，简洁TAB，简单的鼠标导航效果，大家或许经常见到的效果啦，鼠标放在主菜单上，下边框架内的内容会跟着变换，鼠标不需要点击，只需要滑上去就可切换内容，像一扇门，所以有时候别人叫“滑动门”菜单。运行效果如下图所示：在线演示地址如下：具体代码如下：简洁TABfunction nTabs(thisObj, ...
左右可伸缩滑动门效果.rar
07-04
如果标签是"JS特效-其它代码"，那么这个效果可能使用了一些非标准的JS库或自定义函数来增强用户体验，例如使用TweenMax、jQuery或者其他动画库。 在提供的压缩包文件"左右可伸缩滑动门效果"中，我们可以期待找到...
css特效代码滑动门
12-19
在提供的文件中，`滑动门特效代码3.txt`、`css滑动门特效2.txt`和`css滑动门特效.txt`很可能是包含具体CSS代码的文本文件。通过阅读和学习这些代码，你可以更深入地理解如何实现滑动门特效，包括具体的CSS规则和实现...
滑动门特效，鼠标移上自动切换
08-13
滑动门特效是一种常见的网页设计技术，主要用于导航栏或者展示区，通过鼠标移过时自动切换显示的内容，为用户带来动态交互体验。这种效果通常基于JavaScript或者CSS3实现，能够使网页元素在用户操作下展现出平滑、...
JavaScript实现滑动门效果
10-15
滑动门效果是一种常见的网页交互特效，常用于导航栏或者图片展示，使得用户在鼠标悬停时能够看到隐藏的部分内容，提升用户体验。本篇将详细讲解如何使用JavaScript实现这一效果。 首先，我们要理解滑动门的基本概念...
DIV滑动门代码
09-06
body{ color: #000; font-family: "宋体", arial; font-size: 12px; background: #fff; text-align: center; margin: 0; } .nTab{ float: left; width: 240px; margin: 0 auto; border-bottom:1px #C7C7CD solid; background:#d5d5d5; background-position:left; background-repeat:repeat-y; margin-bottom:2px; } .nTab .TabTitle{ clear: both; height: 26px; overflow: hidden; } .nTab .TabTitle ul{ margin:0; padding:0; } .nTab .TabTitle li{ float: left; width: 60px; cursor: pointer; padding-top: 6px; padding-right: 0px; padding-left: 0px; padding-bottom: 7px; list-style-type: none; } .nTab .TabTitle .active{ background:url(images/finance_nc_080124_ws_001.gif) left -25px no-repeat;border-left:1px #C7C7CD solid;border-top:1px #C7C7CD solid;border-bottom:1px #fff solid;} .nTab .TabTitle .normal{ background:url(images/finance_nc_080124_ws_001.gif);border-top:1px #C7C7CD solid;border-bottom:1px #C7C7CD solid;} .nTab .TabContent{ width:auto;background:#fff; margin: 0px auto; padding:10px 0 0 0; border-right:1px #C7C7CD solid;border-left:1px #C7C7CD solid; } .none {display:none;} function nTabs(thisObj,Num){ if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for(i=0; i <tabList.length; i++) { if (i == Num) { thisObj.className = "active"; document.getElementById(tabObj+"_Content"+i).style.display = "block"; }else{ tabList[i].className = "normal"; document.getElementById(tabObj+"_Content"+i).style.display = "none"; } } } 预拔电杆 预等电杆 普拔电杆 部预电杆 欢迎访问：阿里西西WEB开发 计源论坛 计源论坛 计源论坛22 计源论坛33
滑动门代码
12-18
滑动门代码
滑动门特效
10-11
滑动门 内容切换 数据切换
CSS滑动门特效
08-16
比较简单的javscript源码，适合初学者。
jQuery实现的图片滑动门效果（源码，经典）
10-21
1.jQuery实现的图片滑动门效果（源码，经典） 2.方便实用。
一个简单的滑动门效果代码
pasic的专栏
04-23 1623
//滑动门function menu(a,idName,cssName) {    for(i=1;i   {        if(i==a)        {            document.getElementById(idName+a).style.display="";            document.getElementById(cssName+a).classNam
滑动门效果
fatansitic的博客
07-24 1008
滑动门特效和手风琴效果有些相似，来实现一下这个效果吧，先介绍一下这个效果中涉及的需要了解的知识点。 1堆叠 方法：滑动门效果中，有堆叠效果布局，一说到堆叠布局，脑中马上蹦出来的两个方法，一个是z-index,另一个就是定位。 实现：z-indx通过改变数值的大小，进行堆叠布局。     定位主要用到相对定位和绝对定位，所有的子元素相对于父元素进行定位，通过js或者css控制子元素的位置。
滑动门类的特效
weixin_30254435的博客
10-20 81
<!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> <...
基于JQuery的Tab滑动门插件实现代码
Tab 滑动门代码知识点总结 **Tab 滑动门代码概述** Tab 滑动门代码是一个基于 jQuery 的插件，用于实现 tab 切换效果。该插件提供了多个参数可供配置，以满足不同的需求。下面将对该插件的知识点进行详细解释。 *...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值