编程 Javascript

js图片卷帘门导航菜单特效代码分享

Posted in Javascript onSeptember 10, 2015

本文实例讲述了jQuery超精致图片轮播幻灯片特效。分享给大家供大家参考。具体如下：
这是一款基于js实现图片卷帘门导航菜单特效代码，与以往的导航菜单相比，更具有创新性，不止是简单的向用户展示信息，而是更加丰富网站的整体内容。
运行效果图：-------------------查看效果下载源码-------------------

js图片卷帘门导航菜单特效代码分享

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
在head区域引入CSS样式：

<link href="css/style.css" rel="stylesheet" type="text/css" />

为大家分享的js图片卷帘门效果代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS图片卷帘门效果</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />

 <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
 <script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>

 <script type="text/javascript">
 $(document).ready(function() {

  //Set css in Firefox (Required to use the backgroundPosition js)
  $('#shutter1').css({backgroundPosition: '0px 0px'});
  $('#shutter2').css({backgroundPosition: '0px 0px'});
  $('#shutter3').css({backgroundPosition: '0px 0px'});
  $('#shutter4').css({backgroundPosition: '0px 0px'});

  //Animate the shutter 
  $(".link").hover(function(){
     $(this).parent().animate({backgroundPosition: '(0px -100px)'}, 500 );
    }, function() {
     $(this).parent().animate({backgroundPosition: '(0px 0px)'}, 500 );
  }); 
  });
 </script>
</head>

<body>
<DIV align="center" ><br /><br />

<ul id="menuback">
 <li class="shutter" id="shutter1"><a class="link" href="https://3water.com/" target="_blank">Link 1</a></li>
 <li class="shutter" id="shutter2"><a class="link" href="https://3water.com/" target="_blank">Link 2</a></li>
 <li class="shutter" id="shutter3"><a class="link" href="https://3water.com/" target="_blank">Link 3</a></li>
 <li class="shutter" id="shutter4"><a class="link" href="https://3water.com/" target="_blank">Link 4</a></li>
 </ul>


</div>
</body>
</html>

以上就是为大家分享的js图片卷帘门导航菜单特效代码代码，希望大家可以喜欢，并应用到实践中。

js图片卷帘门导航菜单特效代码分享

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Jquery插件之打造自定义的select标签

Nov 30 Javascript

jQuery中innerWidth()方法用法实例

Jan 19 Javascript

JavaScript jQuery 中定义数组与操作及jquery数组操作

Dec 18 Javascript

JS组件Bootstrap实现下拉菜单效果代码

Apr 26 Javascript

Bootstrap模仿起筷首页效果

May 09 Javascript

jQuery表单验证简单示例

Oct 17 Javascript

Bootstrap选项卡动态切换效果

Nov 28 Javascript

jQuery 获取select选中值及清除选中状态

Dec 13 Javascript

[js高手之路]原型式继承与寄生式继承详解

Aug 28 Javascript

vue.js2.0 实现better-scroll的滚动效果实例详解

Aug 13 Javascript

基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)

Oct 23 Javascript

JavaScript监听键盘事件代码实现

Jun 03 Javascript

jQuery超精致图片轮播幻灯片特效代码分享

Sep 10 #Javascript

手机端转盘抽奖代码分享

Sep 10 #Javascript

JS+CSS实现大气的黑色首页导航菜单效果代码

Sep 10 #Javascript

原生JS实现仿淘宝网左侧商品分类菜单效果代码

Sep 10 #Javascript

JS+CSS实现电子商务网站导航模板效果代码

Sep 10 #Javascript

如何解决谷歌浏览器下jquery无法获取图片的尺寸

Sep 10 #Javascript

js实现的动画导航菜单效果代码

Sep 10 #Javascript