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图片卷帘门导航菜单特效代码代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
JavaScript实现图片轮播的方法
Jul 31 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
js轮播图代码分享
Jul 14 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
利用H5api实现时钟的绘制(javascript)
Sep 13 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
You might like
239军机修复记
2021/03/02 无线电
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
php object转数组示例
2014/01/15 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
js multiple全选与取消全选实现代码
2012/12/04 Javascript
子页向父页传值示例
2013/11/27 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
vue学习教程之带你一步步详细解析vue-cli
2017/12/26 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
python实现SMTP邮件发送功能
2020/06/16 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
python实现字典嵌套列表取值
2019/12/16 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
大学生职业生涯规划范文
2014/01/22 职场文书
团代会主持词
2014/04/02 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记
Redis基本数据类型Set常用操作命令
2022/06/01 Redis
httpclient调用远程接口的方法
2022/08/14 Java/Android