编程 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 相关文章推荐

return false,对阻止事件默认动作的一些测试代码

Nov 17 Javascript

jquery放大镜效果超漂亮噢

Nov 15 Javascript

js this函数调用无需再次抓获id，name或标签名

Mar 03 Javascript

JQuery中extend的用法实例分析

Feb 08 Javascript

jQuery中next方法用法实例

Apr 24 Javascript

angularjs学习笔记之三大模块（modal，controller，view）

Sep 26 Javascript

JavaScript tab选项卡插件实例代码

Feb 23 Javascript

bootstarp modal框居中显示的实现代码

Feb 18 Javascript

jQuery动态生成的元素绑定事件操作实例分析

May 04 jQuery

layui输入框中只允许输入整数的实现方法

Sep 18 Javascript

vue移动端弹起蒙层滑动禁止底部滑动操作

Jul 22 Javascript

实用的 vue tags 创建缓存导航的过程实现

Dec 03 Vue.js

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