特效演示地址:http://itxiaoming.sinaapp.com/demo03/demo.html
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>demo</title> <link rel="stylesheet" type="text/css" href="demo.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="demo.js"></script> </head> <body> <div id="main"> <div id="menu"> <div id="slider"></div> <ul id="menu_ul"> <li>首页</li> <li>新闻中心</li> <li>业务</li> <li>案例</li> <li>关于我们</li> </ul> </div> </div> </body> </html>
$(document).ready(function(){ var width = $("#menu_ul li:first").outerWidth(true); $("#slider").width(width); $("#menu_ul li").mouseover(function(){ var div = $("#slider"); //获取当前栏目块的宽度 var _width = $(this).outerWidth(true); //计算当前栏目块所在的位置 var _left = 0; for( var i = 0 ; i < $(this).index() ; i++ ){ _left += $("#menu_ul li:eq("+i+")").outerWidth(true); } var _divLeft = div.css("left"); var n1 = 20; var n2 = -30; var n3 = 10; /** * 如果计算出来的位置大于当前滑块的位置,则是加法,否则是减法 * 加法就是向右弹,减法就是向左弹 */ if( parseInt(_divLeft) > parseInt(_left) ){ n1 = parseInt(0 - n1); n2 = parseInt(0 - n2); n3 = parseInt(0 - n3); } //移动滑块到当前栏目块下并修改滑块的宽度为当前栏目块的宽度,然后开启一个反弹的动画效果 _left += n1; div.stop(true,false).animate({left:_left,width:_width},500); _left += n2; div.animate({left:_left},500); _left += n3; div.animate({left:_left},500); }); // $(".menu_li").mouseout(function(){ // var div = $(this); // div.toggleClass('menu_li_b'); // }); });
初始化的时候先初始化滑块的位置在首页上,然后给栏目块绑定鼠标放上去事件。
1.放上去后,计算鼠标所在块的位置
2.获取滑块的位置,然后比较判断滑块是往左还是往右滑动的
3.计算出滑块的弹性位置值,然后设置滑块弹性动画
/* demo01 css */ body{ padding: 0px; border: 0px; margin: 0px; } #main{ margin: auto; display: block; width: 1000px; height: 100%; text-align: center; position:relative; } #menu{ position: relative; background: #333; height: 44px; width: 100%; margin-top: 10px; text-align: center; overflow: hidden; } #slider{ background: red; height: 44px; position: absolute; left: 0px; } #menu_ul{ position: absolute; padding: 0px; margin: 0px; border: 0px; height: 44px; width: 980px; padding-left: 0px; } li{ padding: 15px 30px; float: left; color: #FFF; font-family: "Microsoft Yahei"; font-weight: 600; font-size: 14px; line-height: 14px; cursor: pointer; }
相关推荐
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
jquery-ui特效是经过自己细心整理后的,比jquery-easyui要少些,但对于逐个特效来说比它要选择性多很多,希望可以帮助到大家。
jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】
jQuery-Waterwheel-Carousel-图片左右滚动切换特效
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css,我费了好长时间找到的,此东西可以配合jQuery UI开发指南一书使用。
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...
jquery-3.0.0.js 、jquery-3.0.0.min.js 【官方jquery包 js】
jquery-1.9.1.js 、jquery-1.9.1.min.js 【jquery包 js】
jquery-1.11.0 + jquery-UI-1.10.4
jquery-1.3.2-vsdoc.js jquery-1.8.3.min.js jquery-1.3.2.min.js jquery-1.4.1-vsdoc.js jquery-1.4.1.min.js jquery-1.4.2-vsdoc.js jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js ...
jquery-ui-1.9.2.custom.min.js
jquery-2.1.1.js 、jquery-2.1.1.min.js 【jquery包 js】
1、将jquery-1.6.2-vsdoc.js与jquery-1.6.2.js放在同一目录,然后在vs中添加对jquery-1.6.2.js的引用即可; 2、切记:两个文件的文件名不能修改,并且只要引用jquery-1.6.2.js而不要引用jquery-1.6.2-vsdoc.js。
JQuery-花瓣飘落背景特效
jqueryUi-181107亲测可用,对应jquery-ui.min.js文件。
jquery-ui-1.10.3.min.js
jquery-migrate-1.2.1.min.js 可以更好的帮助 jqury-jqprint 兼容性问题
最新JQuery版本,3.2版本删减jQuery.holdReady(hold),jQuery.isArray(obj)等方法
jquery-1.8.3.js jquery-1.8.3.js jquery-1.8.3.js jquery-1.8.3.js jquery-1.8.3.js jquery-1.8.3.js jquery-1.8.3.js jquery-1.8.3.js jquery-1.8.3.js