原生js和jquery分别实现横向导航菜单效果

本文实例为大家分享了原生js和jquery横向导航菜单的制作方法,供大家参考,具体内容如下

原生javascript实现:
这一次要实现的是鼠标放上去以后,菜单栏被选中的那一栏水平拉伸,鼠标离开后水平收缩。并带有一定的时间性,使肉眼能够看出其拉伸收缩的动画效果。
开始用javascript进行编写:
首先在之前水平方向的导航栏上进行操作,将第一栏和选中栏的样式只改变为背景变黑色,文字变白色
.on,a:hover{background:#000000;color:#FFFFFF;}

之后开始写javascript脚本:

<script>
 window.onload=function(){
 var A=document.getElementsByTagName("a"); 

 for(var i=0;i<A.length;i++)
 {
  A[i].onmouseover=function(){
  clearInterval(this.time);
   var This=this;
   This.time=setInterval(function(){ 

   if(This.offsetWidth>=200)
    {
    clearInterval(This.time);
    }
   This.style.width=This.offsetWidth+8+"px"; 

   },50)
  } 

   A[i].onmouseout=function(){
   clearInterval(this.time);
   var This=this;
   This.time=setInterval(function(){
   if(This.offsetWidth<=120)
    {
    This.style.width="120px";
    clearInterval(This.time);
    }
   This.style.width=This.offsetWidth-8+"px"; 

   },50)
  } 

  } 

 } 

 </script>

剖析一下这段代码:
第一层,window.onload,页面加载的时候调用这个函数。
第二层,for循环,用document.getElementsByTagName("a")获得导航栏数组,遍历为其添加第三层的效果。
第三层,一个onmouseover,一个onmouseout,分别实现鼠标覆盖和鼠标离开的效果。
第四层,setInterval和clearInterval方法,参数50ms.
第五层,核心部分,修改this.style.width,每次50ms加减8px,增加判断语句到达边界。
细节部分:采用先加减8px再进行判断,我认为应该倒过来,不必要先处理再判断,会浪费资源。还有就是在第三层开始后必须先清除时间机制,否则会容易出现重叠动画的紊乱状况。
最后实现的动画就是:鼠标放上去某一栏后,120px的菜单栏将每50ms伸长8px,直至到达200px停下;当鼠标离开后,该栏又将以50ms收缩8px的速度恢复到120px.
看一下总代码和效果图:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航栏</title>
<style>
*{margin:0;padding:0;font-size:20px}
ul{list-style:none;height:50px;border-bottom:#000000 solid;padding-left:30px}
li{float:left;margin-top:20px;}
a{text-decoration:none;display:block;height:30px;line-height:30px;width:120px;margin-bottom:1px;background:#FFFFFF;color:#000000;text-align:center}
.on,a:hover{background:#000000;color:#FFFFFF;}
</style>
<script>
 window.onload=function(){
 var A=document.getElementsByTagName("a"); 

 for(var i=0;i<A.length;i++)
 {
  A[i].onmouseover=function(){
  clearInterval(this.time);
   var This=this;
   This.time=setInterval(function(){ 

   if(This.offsetWidth>=200)
    {
    clearInterval(This.time);
    }
   This.style.width=This.offsetWidth+8+"px"; 

   },50)
  } 

   A[i].onmouseout=function(){
   clearInterval(this.time);
   var This=this;
   This.time=setInterval(function(){
   if(This.offsetWidth<=120)
    {
    This.style.width="120px";
    clearInterval(This.time);
    }
   This.style.width=This.offsetWidth-8+"px"; 

   },50)
  } 

  } 

 } 

 </script>
</head>
<ul>
<li>
<a class="on" href="#">首 页</a>
</li>
<li> <a href="#">今日新闻</a></li>
<li><a href="#">周边故事</a></li>
<li><a href="#">天气预报</a></li>
<li><a href="#">好书推荐</a></li>
</ul>
</html>

原生js和jquery分别实现横向导航菜单效果

下面用jquery实现同样的效果:
先下载一个jQurey1.2.6,引用到html中去

<script type="text/javascript" src="jquery-1.2.6.js"></script>
下载地址:Jquery1.2.6下载
[html] view plain copy print?
<script>
$(function(){ 

 $('a').hover( 

  function(){
   $(this).stop().animate({"width":"200px"},200  );},
  function(){
   $(this).stop().animate({"width":"120px"},200
   );}
 )
 }) 

</script> 

同样,这段代码是包含在$(function(){})中,相当于window.onload的作用。
之后$('a')获取a标签,其提供一个hover方法,这个方法里面要提供两个函数,一个移入一个移出,我们将其设定为移入时200ms增加到200px,移出时200ms收缩到120px.
animate即自定义动画的方法,在这里是设置宽度动态变化。
要在处理前用stop(),把上个动画清理掉。
效果是一样的,但代码量少。

以上就是本文的全部内容,希望对大家的学习有所帮助。

时间: 2016-05-11

原生js仿jquery实现对Ajax的封装

前言 与js相比,jquery为我们省去了冗长的获取元素的代码,不用考虑一些麻烦的兼容问题,更加方便的动画实现,以及更加方便的方法调用让我们觉得jquery真是越用越舒服.但是jquery说到底还是对js的封装,我们不光要用的舒服还要深入理解其中的原理,这样才能更好的使用它. 首先我们封装的函数为了能实现可传入无限多个参数,在使用我们即将封装的函数时,需要使用对象进行传参,形式如下: //data作为参数传入我们下面封装的函数 var data = { //数据 user:"yonghu1&qu

原生JS和jQuery版实现文件上传功能

本文实例分享了原生JS版和jQuery 版实现文件上传功能的例子,供大家参考,具体内容如下 <!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <title>HTML5 Ajax Uploader</title> <script src="jquery-2.1.1.min.js"></

jQuery实现隔行变色的方法分析(对比原生JS)

本文实例分析了jQuery实现隔行变色的方法.分享给大家供大家参考,具体如下: 原生js: var tab = document.getElementByTagName('table')[0]; var tr = tab.getElementByTagName('tr'); for(var i=0;i<tr.length;i++){ if(i%2==0){ tr[i].style.background="orange"; }else{ tr[i].style.background

原生js仿jquery animate动画效果

jquery animate动画效果: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> *{margin:0;padding:0;} .box{width: 400px;height: 300px;background: #000;margin:40

详解用原生JavaScript实现jQuery的某些简单功能

大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery $()选择器的实现 jQuery是面向对象的,所以自己编写的也要是面向对象的,看看基本的结构 // 定义lQuery对象 function lQuery(lArg){ } function lQ(lArg){ return new lQuery(lArg); } // css()方法 lQuery.prototype.css = function(){}; // html()方法 l

原生js实现jquery函数animate()动画效果的简单实例

通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参

原生js仿jquery一些常用方法(必看篇)

最近迷上了原生js,能不用jquery等框架的情况都会手写一些js方法,记得刚接触前端的时候为了选择器而使用jquery...现在利用扩展原型的方法实现一些jquery函数: 1.显示/隐藏 //hide() Object.prototype.hide = function(){ this.style.display="none"; return this; } //show() Object.prototype.show = function(){ this.style.displa

原生JS取代一些JQuery方法的简单实现

1.选取元素 // jQuery var els = $('.el'); // Native var els = document.querySelectorAll('.el'); // Shorthand var $ = function (el) { return document.querySelectorAll(el); } querySelectorAll方法返回的是NodeList对象,需要转换为数组. myList = Array.prototype.slice.call(myNo

原生js与jQuery实现简单的tab切换特效对比

tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动.而页签内容部分使用div承载即可.另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构: <div id="main"> <ul id="tabbar" class=&

原生js封装的一些jquery方法(详解)

用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } } addCl

原生js和jQuery实现淡入淡出轮播效果

本文实例为大家介绍了基于jQuery实现淡入淡出轮播效果的关键代码,分享给大家供大家参考,具体内容如下: 基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果. html代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一个轮播&l

使用jQuery或者原生js实现鼠标滚动加载页面新数据

相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多,用鼠标操作的时候相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 ,今天我们就来看看他们的实现思路和js控制动态加载的代码. 下面的代码主要是控制滚动条下拉时的加载事件的,无论是加载图片还是加载记录数据  都可以. 加载jQuery库后我们可以这样使用: $(window).scroll(function () { var scrollTop = $(t

原生JS实现图片懒加载(lazyload)实例

前言 图片懒加载也是比较常见的一种性能优化的方法,最近在用vue做一个新闻列表的客户端时也用到了,这里就简单介绍下实现原理和部分代码. 实现原理 加载页面的时候,图片一直都是流量大头,针对图片的性能方法也挺多的比如base64.雪碧图等:懒加载也是其中一种,主要原理是将非首屏的图片src设为一个默认值,然后监听窗口滚动,当图片出现在视窗中时再给他赋予真实的图片地址,这样可以保证首屏的加载速度然后按需加载图片. 具体代码 首先在渲染时,图片引用默认图片,然后把真实地址放在data-*属性上面. <

原生JS实现首页进度加载动画

js进度加载动画程序是本人的个人作品,写的不好,可以参考,但未经本人允许,请不要用于其它用途! 早上写了个首页进度加载动画,本想在我的博客里用上,测试发现博客园加载太快,根本看不到动画效果,直接就加载'Complete'了,算了,还是不要把博客搞得太臃肿了! 于是我就写了个演示页面,在body里加了个iframe来加载大一点的网站,这样就看出效果了! 用Safari打开貌似CSS动画的播放时间变成同步了,不知道什么原因,本地测试又没问题(请大神指点!),用Chrome.Firefox倒是没问题,

使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根据不同菜单定位到不同页面,而整体布局不会变化 这种布局结构对于单纯的HTML不具备这种嵌入各部分内容的能力,所以就需要我们自己来寻找或者解决这种问题,由于jquery的兼容性和使用广度比较不错,这里 使用jquery的load方法来处理这种页面布局框架. 二.load方法详解 1.定义 $(sele

原生javaScript实现图片延时加载的方法

本文实例讲述了原生javaScript实现图片延时加载的方法.图片延时加载其实是有jquery插件了并且加载方法非常的简单并且合理了,但有朋友觉得加载jquery插件包太大了,于时自己写了一个,给各位分享一下. 首先,图片延时加载可以节省我们带宽,获取到更好的用户体验,尤其对于图片多的站点,这一点显得至关重要,下面就跟大家探讨一下图片延时加载原理和实现代码. 图片延时加载原理 图片延时加载原理是在html里面的图片src填的并不是真正的图片地址,而是以一种自定义属性把图片地址赋给img标签,如:

jquery加载页面的方法(页面加载完成就执行)

1.$(function(){ $("#a").click(function(){ //adding your code here }); }); 2.$(document).ready(function(){ $("#a").click(function(){ //adding your code here }); }); 3.window.onload = function(){ $("#a").click(function(){ //add

基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示. 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性 从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" class="open" value=&quo

jQuery滚动加载图片实现原理

本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载? 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来.这就是图片懒加载. 二.为什要使用这个技术? 比如一个页面中有很多图片,如淘宝.京东首页等等,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底部,恰巧页面的

jquery滚动加载数据的方法

本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览.这种技术我暂且称它为滚屏加载技术,我们发现很多网站用到这种技术,例如新浪微博.QQ空间等. 代码如下: 复制代码 代码如下: <!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="text

Vue.js上下滚动加载组件的实例代码

由于工作的需要并鉴于网上的vue.js滚动加载方案不合适,自己写了一个简单实用的.就短短的150行代码. 组件代码 // scrollLoader.vue // 滚动加载组件 <style scoped> .container-main {margin: 0 auto; overflow: auto; overflow-x: hidden; padding: 0;} .loading{ width: 100%; height: 40px; position: relative; overflo