`
花花人
  • 浏览: 67859 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS滑动门效果

阅读更多

一个JS滑动门

1、滑动门,通用型,理论上不限制滑动门个数,不用超级链接,跳转页面也用JS控制

function gameRankContent(cid,n,cname,conName){
/**
*cid:当前滑动门编号
*n:滑动门个数
*cname:滑动门ID号前缀
*conid:滑动门内容前缀
*/
for(var i = 1;i<=n;i++){
   if(cid == i){
    //alert('#'+conName+i);
    $('#'+conName+i).show();//传统JS中,样式display="block"
    $('#'+cname+i).css("background","url(images/nBg.gif)");//传统JS中,样式背景为空
    $('#'+cname+i).css("color","#FFF");//传统JS中,样式文字色彩
   }else{
    $('#'+conName+i).hide();//传统JS中,样式display="none"
    $('#'+cname+i).css("background","");//传统JS中,样式背景为空
    $('#'+cname+i).css("color","#000");//传统JS中,样式文字色彩
   }
}
}

function urlonclick(href){
location.href = href;
}

2、用超链接,外部写样式控制,JS内改变样className实现样式改变(通用型)

function swap_tab(cid,n,cname,conName){
   /**
   *cid:当前滑动门编号
   *n:滑动门个数
   *cname:滑动门ID号前缀
*conid:滑动门内容前缀
*/
for(var i=1;i<=n;i++){
       obj = document.getElementById(cname+i);
      cObj = document.getElementById(conName+i);
       if(cid == i){
          obj.className='active';
         cObj.style.display = "block";
        }else{
          obj.className='normal';
           cObj.style.display="none";
        }
}

}

转载自:http://hi.baidu.com/nbcc/blog/item/a80db4ecbf7867342797916a.html

分享到:
评论

相关推荐

    js滑动门代码制作js滑动门导航鼠标滑过滑动门效果

    js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果

    CSS加JS滑动门效果

    最后,JavaScript的加入可以为滑动门效果提供更高级的功能,比如触摸设备的支持或者自定义动画行为。虽然在本案例中没有具体提及JavaScript,但我们可以利用它来监听用户的点击事件,或者根据需要调整动画的性能。 ...

    jquery 滑动门效果

    **jQuery滑动门效果**是一种常见的前端交互设计,主要用于创建导航菜单或图片轮播效果。在网页设计中,滑动门效果能为用户提供流畅、直观的界面体验,增强网站的吸引力和可操作性。这个效果通常由jQuery库来实现,...

    几个经典的滑动门效果

    滑动门效果的基本原理是利用CSS(层叠样式表)或JavaScript来改变元素的尺寸、位置和透明度,模拟出门的开启和关闭。在视觉上,这通常表现为一个矩形区域的一侧或两侧逐渐滑动露出或隐藏内部的内容。这种效果可以...

    滑动门效果

    在Web开发中,滑动门效果通常通过JavaScript、jQuery或者其他JavaScript库来实现,有时候也会结合CSS(层叠样式表)来完成样式控制。 首先,我们要理解滑动门效果的基本原理。它通常涉及到两个或多个元素,这些元素...

    实用 JS滑动门

    JavaScript是实现滑动门效果的核心部分,主要功能包括监听用户的点击事件并相应地展示或隐藏子菜单。 ```javascript function $_class(name) { var elements = document.getElementsByTagName("*"); for (var s =...

    滑动门效果、html、css

    虽然仅用CSS可以实现基本的滑动门效果,但JavaScript可以提供更复杂的功能,比如动画效果的控制、触摸设备的支持等。使用JavaScript库如jQuery,可以更方便地实现这些功能。例如,以下jQuery代码可以实现平滑的滑动...

    滑动门技术效果

    为了实现滑动门效果,我们需要设置元素的相对定位,并利用伪类`:hover`来定义鼠标悬停时的状态。例如,可以将顶部隐藏,底部显示,然后在`:hover`状态下改变这两个状态: ```css .sliding-door { position: ...

    简单的Js漂亮滑动门效果

    滑动门效果是一种常见的网页交互设计,主要利用JavaScript或者CSS3来实现页面元素的动态展示,通常用于导航菜单、广告轮播等场景。本案例中,我们探讨的是使用JavaScript实现的简单滑动门效果,其特点是操作简便且...

    JS+CSS滑动门代码

    - `onmouseover` 和 `onmouseout`:这两个事件分别在鼠标进入和离开元素时触发,是实现滑动门效果的关键。通过JavaScript函数,我们可以更改元素的CSS属性,如`background-position`,来模拟滑动效果。 - `CSS类...

    伸缩滑动门效果 特效

    4. 框架和库:现代前端框架,如React、Vue.js或Angular,提供了丰富的组件库,其中包括预设的滑动门效果。开发者可以通过引入这些组件,快速便捷地在项目中实现伸缩滑动门效果,减少重复工作。 5. 动画库:例如GSAP...

    HTML调用JS实现多项滑动门选项卡特效

    HTML调用JS实现多项滑动门选项卡特效是一种常见的前端技术,用于创建交互式和动态的网页内容。这种效果常用于导航菜单、内容切换、图片展示等场景,为用户提供更直观的操作体验。以下是对这个技术的详细解释: 一、...

    原生js鼠标悬停图标菜单滑动门显示效果

    通过这样的方法,我们可以创建出具有专业滑动门效果的原生JavaScript鼠标悬停图标菜单。这种技术不仅适用于网站导航,也可以应用于其他需要动态展示内容的场景,如下拉选项、工具提示等。在实际开发中,还可以结合...

    图片幻灯片效果 滑动门 html js代码

    这些元素的布局和样式会根据滑动门效果的需求进行设置,例如,它们可能需要设置为绝对定位,以便在页面上正确地重叠和滑动。 接下来是CSS的部分。CSS用来定义元素的样式,包括位置、尺寸、颜色等。在滑动门效果中,...

    css+js滑动门小实用小实例

    "css+js滑动门小实用小实例"是一个集合,包含三个利用CSS和JavaScript技术构建的实用小示例,旨在展示如何创建美观且功能性的滑动门效果。滑动门效果通常用于导航菜单或者图像展示,它允许用户通过鼠标悬停或点击来...

    jQuery图片自动滑动门效果

    接着,编写JavaScript代码来实现自动滑动门效果。这里通常会涉及到定时器(setInterval)来定期改变显示的图片,CSS样式操作来实现平滑过渡,以及可能的触发动画函数(animate)。 ```javascript $(document).ready...

    Js 滑动门 英文字母切换 仿淘宝购物索引效果

    JavaScript(Js)滑动门效果是一种常见的网页交互设计,它通常用于导航菜单或者索引列表,使得用户可以方便地浏览和选择内容。在本案例中,我们关注的是一个仿淘宝购物索引的效果,这种效果常见于电商网站的商品分类...

    左右可伸缩滑动门效果.rar

    滑动门效果通常通过CSS(层叠样式表)和JavaScript(JS)实现。在CSS中,我们可以定义两个图像切片,一个用于元素的左侧部分,另一个用于右侧部分。当元素被鼠标悬停或触发其他交互时,这两个切片会根据需要进行平移...

    javascript控制页面滑动门

    通过以上知识点的应用,我们可以创建一个功能完善的JavaScript滑动门效果。在实际项目中,可能还需要结合其他前端框架或库,如jQuery、Vue.js或React.js等,以简化代码和提高开发效率。同时,对于复杂的滑动门需求,...

Global site tag (gtag.js) - Google Analytics