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 相关文章推荐
syntaxhighlighter 使用方法
Jul 02 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
JS数组去重详情
Nov 07 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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
phpfpm的作用和用法
2019/10/10 PHP
javascript下string.format函数补充
2010/08/24 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
python中实现指定时间调用函数示例代码
2017/09/08 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
工程师岗位职责规定
2014/02/26 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
平安家庭事迹材料
2014/12/20 职场文书
先进班集体事迹材料
2014/12/25 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
Python基础之数据结构详解
2021/04/28 Python
Java移除无效括号的方法实现
2021/08/07 Java/Android
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python