这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了基于 JavaScript 实现熔岩灯效果导航菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
熔岩灯效果 就是鼠标移入的时候,背景跟着滑过去~
两方法如下:
方法一:两个文件,一个 html,一个 JS。
HTML 源码,
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <!--
- <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
- <link href="favicon.ico" rel="Bookmark" type="image/x-icon" />
- -->
- <meta name="Generator" content="EditPlus®">
- <meta name="Author" content="">
- <meta name="Keywords" content="">
- <meta name="Description" content="">
- <title>Document</title>
- <link href="" rel="stylesheet" />
- <style type="text/CSS">
- #nav {
- position: relative;
- background: #292929;
- float: left;
- }
- #nav li {
- float: left;
- list-style: none;
- border-right: 1px solid #4a4a4a;
- border-left: 1px solid black;
- }
- #nav li a {
- color: #e3e3e3;
- position: relative;
- z-index: 2;
- float: left;
- font-size: 30px;
- font-family: helvetica, arial, sans-serif;
- text-decoration: none;
- padding: 30px 45px;
- }
- ul, li {
- margin: 0; padding: 0;
- }
- #blob {
- border-right: 1px solid #0059ec;
- border-left: 1px solid #0059ec;
- position: absolute;
- top: 0;
- z-index : 1;
- background: #0b2b61;
- background: -moz-linear-gradient(top, #0b2b61, #1153c0);
- background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
- -moz-border-radius: 4px;
- -webkit-border-radius: 4px;
- -moz-box-shadow: 2px 3px 10px #011331;
- -webkit-box-shadow: 2px 3px 10px #011331;
- }
- </style>
- <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
- <script type="text/javascript" src="http://apps.bdimg.com/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
- <script type="text/javascript" src="jquery.spasticNav.js"></script>
- </head>
- <body>
- <ul id="nav">
- <li><a href="#">Home</a></li>
- <li id="selected"><a href="#">About</a></li>
- <li><a href="#">Blog</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
- <script type="text/javascript">
- $('#nav').spasticNav();
- </script>
- </body>
- </html>
JS 源码,
- (function($) {
- $.fn.spasticNav = function(options) {
- options = $.extend({
- overlap : 15,
- speed : 500,
- reset : 1500,
- color : '#9f1f31',
- easing : 'easeOutExpo'
- }, options);
- return this.each(function() {
- var nav = $(this),
- currentPageItem = $('#selected', nav),
- blob,
- reset;
- $('<li id="blob"></li>').css({
- width : currentPageItem.outerWidth(),
- height : currentPageItem.outerHeight() + options.overlap,
- left : currentPageItem.position().left,
- top : currentPageItem.position().top - options.overlap / 2,
- backgroundColor : options.color
- }).appendTo(this);
- blob = $('#blob', nav);
- $('li:not(#blob)', nav).hover(function() {
- // mouse over
- clearTimeout(reset);
- blob.animate(
- {
- left : $(this).position().left,
- width : $(this).width()
- },
- {
- duration : options.speed,
- easing : options.easing,
- queue : false
- }
- );
- }, function() {
- // mouse out
- reset = setTimeout(function() {
- blob.animate({
- width : currentPageItem.outerWidth(),
- left : currentPageItem.position().left
- }, options.speed)
- }, options.reset);
- });
- }); // end each
- };
- })(jQuery);
方法二,使用 jquery 插件 jquery.lavalamp.min.js 实现。
需要调用的文件有:jQuery 库,jQuery 缓动插件(jquery.easing.min.js),火焰灯效果插件(jquery.lavalamp.min.js)以及一个 ul li 列表的样式文件。
详情参看:/article/17/0427/328891.html
插件官网介绍:http://lavalamp.magicmediamuse.com
来源: http://www.phperz.com/article/17/0518/328888.html