>

本文章给大家介绍一款不错的jQuery多级手风琴菜

- 编辑:澳门博发娱乐官网 -

本文章给大家介绍一款不错的jQuery多级手风琴菜

前面三个重构方案领悟一下

2018/06/09 · 基本功技巧 · 重构

原来的作品出处: 吃草龙珠不吐洋茄皮   

那边只列了比较重大的后生可畏有的,安利一下自己从前写的属性优化总计传送门

.nav {width: 213px; padding: 40px 28px 25px 0;}  
ul.nav {padding: 0; margin: 0; font-size: 1em; line-height: 0.5em; list-style: none;}  
ul.nav li {}  
ul.nav li a {line-height: 10px; font-size: 14px; padding: 10px 5px; color: #000; display: block; 
text-decoration: none; font-weight: bolder;} 
ul.nav li a:hover {background-color:#675C7C;    color:white;} 
ul.nav ul { margin: 0; padding: 0;display: none;}  
ul.nav ul li { margin: 0; padding: 0; clear: both;}  
ul.nav ul li a { padding-left: 20px; font-size: 12px; font-weight: normal;} 
ul.nav ul li a:hover {background-color:#D3C99C; color:#675C7C;}  
ul.nav ul ul li a {color:silver; padding-left: 40px;}  
ul.nav ul ul li a:hover { background-color:#D3CEB8; color:#675C7C;}  
ul.nav span{float:right;} 

帮客讨论

复制代码

2.6模块化组件化

模块化:早先由CommonJs、英特尔、CMD等落实,未来ES6的Module(原生模块化卡塔尔完全能够代替,灵活、高效是模块化开垦的受益,对于某些模块小编想出口就输出,想引进就引进,输出引进也只需二个最首要词(export/import卡塔尔国,何况ES6模块语法扶助拆穿常量、单黄金年代接口、全数接口、混合揭发、取别称等等灵活神速是无须置疑的
相称webpack在营造的时候把财富整合打包压缩自动管理了生机勃勃部分原先供给手动进行的品质优化难点了
组件化:消亡复杂专门的学问的痛点,把复杂的政工分为很四个零件分开开辟关押以裁减开采难度和保养资金财产。二个5000行的页面和十二个500行命名规范的零器件哪个开拓、维护轻松?
组件灵活随加随用,可复用幸免再度支付,可组成使用

sbf282.com 1

当然,大家要为那个冬辰列表加上样式,让它可怜简单的表今后荧屏上。

贰个css与js结合的下拉菜单协助主流浏览器

 首先注明:

自身即使在web前端岗位干了众多年,但万般无奈岗位对技术要求不高。html,css用的比比较多,JavaScript自身原创的比少之甚少,基本都以copy改进,所以自身确实出手写时,开掘根底非常不牢固,边学习边实行,收获比比较大。

效果图:

sbf282.com 2

不赘述了,贴码了

1、css代码

 

代码如下:

a:link{color:white;text-decoration:none;}
a:visited{color:white;text-decorative:none;}
a:hover{color:white;text-decorative:none;}
a:active{color:white;text-decorative:none;}
li{float:left;display:inline;background-color:#003366;width:120px;text-align:center;margin:2px;padding:10px 0 5px 0;position:relative;}
.limouseover{background-color:#0033ff;color:red;}
.limouseout{background-color:#003366;color:black;}
li ul{display:none;width:120px;position:absolute;left:0;top:30px;}
li ul li{margin:0px auto;border-top:1px solid #006699;}

 

2、JavaScript代码

代码如下:

<script language=javascript>
function menu(menu1){
//鼠标移入移出classname切换和子菜单隐蔽、呈现切换。
if (document.getElementById(menu1)){
var menu_ul=document.getElementById(menu1);
if (menu_ul.getElementsByTagName("li").length){
var menu_li=menu_ul.getElementsByTagName("li");
for (i in menu_li){
menu_li[i].onmouseover=function(){this.className="limouseover";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display="block";}}
menu_li[i].onmouseout=function(){this.className="limouseout";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display="none";}}
}
}
}
}

</script>

 

3、html代码

 

代码如下:

<ul id=menu1>
<li><a href="">首页</a></li>
<li><a href="">菜单1菜单1</a>
<ul>
<li><a href="">子菜单1子菜单1子菜单1子菜单1</a></li>
<li><a href="">子菜单2</a></li>
</ul>
</li>
<li><a href="">菜单2</a>
<ul>
<li><a href="">子菜单1子菜单1子菜单1子菜单1</a></li>
<li><a href="">子菜单2</a></li>
</ul>
</li>
</ul>

<script>var menu1=new menu("menu1");</script>

 

说明:

1、考虑到ul和li页面用的比超级多,能够在css前参与#menu1,以对菜单样式进行节制节制。

2、js首若是对鼠标移入和移除事件实行了侦听,对应切换来limouseover和limouseout样式;同期对子菜单的display属性进行更改,到达展现隐瞒的成效。

3、同三个页面能够重复调用,不冲突,html代码中的JavaScript代码是调用实例,前边的menu1为专擅变量名,括号内的menu1为html页面中的id。

本例的瑕玷:

1、菜单li的mouseover、mouseout和子菜单li的体制相像,即同三个颜料和字体,未有完结独立设置。

2、由于要包容Ie6和ie7,所以里面使用position:absolute的还要,扩展了left和top属性,top要依照菜单li的完好中度设定。

首先注脚: 自己纵然在web前端岗位干了非常多年,但无语岗位对技术供给不高。html,css用的可比多...

 代码如下

2.8客户体验

☆ 优化加载速度,减弱客户等待时间
☆ 收缩不供给的无谓的操作
☆ 动漫交互作用合理,短平快的互相或许动漫片更合乎知学宝,大家是效能型网址不是赏识型网址,没有需求太花里胡哨的动漫片,那样反而高居不下等待时间,适得其反
☆ 更舒适的UI(字体、图片、logo,按键、列表等卡塔 尔(英语:State of Qatar)
☆ 管理好广大小的底细的位置,举个例子… 针对项目标地方就略了

至于顾客体验那块近期没找到比较高贵的书,假如我们有认为不错的招待留言推荐~

构件灵活随加随用,可复用幸免双重成本,可整合使用

A4ion提供以下选项设置:

有关作品

连带寻觅:

明天看什么

找出本领库

归来首页

  • [ C# ] 决断一个类是或不是落到实处了某些接口的有余
  • ASP.NET MVC 4 的JS/CSS打包压缩功用-------过滤文件
  • asp.net使用httphandler打包多CSS或JS文件以加速页
  • [.net 面向对象编制程序基本功] (17) 数组与聚焦,.
  • [ C# ] 判断叁个类是不是完结了有些接口的三种
  • 堆分配与栈分配---SAP C++电面(6卡塔 尔(英语:State of Qatar),---sap

相关频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前面三个代码  正则表明式  Flex教程  WEB前端教程  

  }
})(jQuery);
  
   $(function(){
     $("div.demo").myScroll({
          speed:40,
          rowHeight:24
          });
     });
</script> 

意气风发、原项目梳理

率先对原来项目做多少个差十分少的梳理,既然是重构,当然比相当多东西是足以世襲拿来使用的。

.aa {

<div id="main">
      <div class="demo">
      <ul class="nav">
         <li><a href="" target="_blank">首页</a></li>
         <li><a href="#">服务</a>
              <ul>
                  <li><a href="#">JAVASCRIPT</a></li>
                  <li><a href="#">PHP</a></li>
                  <li><a href="#">MYSQL</a></li>
                  <li><a href="#">LINUX</a></li>
              </ul>
         </li>
         <li><a href="#">案例</a></li>
         <li><a href="#">文章</a></a>
              <ul>
                   <li class="active"><a href="4.html" target="_blank">XHTML/CSS</a></li>
                   <li><a href="#">Javascript/Ajax/jQuery</a>
                        <ul>
                            <li><a href="#">Cookies</a></li>
                            <li><a href="#">Event</a></li>
                            <li><a href="#">Games</a></li>
                            <li><a href="#">Images</a></li>
                        </ul>
                   </li>
                   <li><a href="6.html" target="_blank">PHP/MYSQL</a></li>
                   <li><a href="7.html" target="_blank">前端观看</a></li>
                   <li><a href="9.html" target="_blank">HTML5/移动WEB应用</a></li>
              </ul>
         </li>
         <li><a href="about.html" target="_blank">关于</a></li>
      </ul>
   </div>
  
</div>

  }
})(jQuery);

2.4支出成效

  • PS生机勃勃键切图成效
  • emmet快捷编写HTML

#page>div.logo+ul#navigation>li*5>a{Item $}

1
#page>div.logo+ul#navigation>li*5>a{Item $}

按下tab键,上述代码 等于

<div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> <li><a href="">Item 5</a></li> </ul> </div>

1
2
3
4
5
6
7
8
9
10
<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

背景:原项目写的纯css

  • less/sass/scss 火速编写css

比如

@base-size: 40px; @theme-color: #ccc; @my-selector: title; .aa { font-weight: bold; } .@{my-selector} { font-size: @base-size; color: @theme-color; margin: 100/2px 200/10px; &-ok { color: green; } &-no { color: yellow; } > li{ &:extend(.aa); &:hover { color: #fff; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@base-size: 40px;
@theme-color: #ccc;
@my-selector: title;
 
.aa {
  font-weight: bold;
}
 
.@{my-selector} {
  font-size: @base-size;
  color: @theme-color;
  margin: 100/2px 200/10px;
  &-ok {
    color: green;
  }
  &-no {
    color: yellow;
  }
  > li{
    &:extend(.aa);
    &:hover {
      color: #fff;
    }
  }
}

编写翻译后为:

.aa, .title > li { font-weight: bold; } .title { font-size: 40px; color: #ccc; margin: 50px 20px; } .title-ok { color: green; } .title-no { color: yellow; } .title > li:hover { color: #fff; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.aa,
.title > li {
  font-weight: bold;
}
.title {
  font-size: 40px;
  color: #ccc;
  margin: 50px 20px;
}
.title-ok {
  color: green;
}
.title-no {
  color: yellow;
}
.title > li:hover {
  color: #fff;
}

此间只写了一丝丝,功用还大概有不菲的
less官网选自个儿选本人
sass官网:选本人选本身

  • webpack:压缩代码、图片,合併JS,检查实验文件更新等活动进行
  • webstorm自带取色器(其余IDE应该都有,自行找下卡塔尔

写颜色色值之处能够点击调出取色板(不遏抑css卡塔 尔(阿拉伯语:قطر‎,可以选颜色也足以运用吸管取色(显示器大肆处 不限于IDE内部卡塔 尔(阿拉伯语:قطر‎,也可以有取色的网址能够收藏到书签工具文件夹里sbf282.com 3

  • Mockjs:下面有介绍mockjs,这里不再赘言,由于自家有过手写假数据的惨烈经验,故把mockjs列入能够巩固支付功能行列,因为前后端抽离后左右端同期开支,假数据已成必得

比如:

let template = { 'anchorList|3-6':[{ 'id|1-100': 1, 'name': '@cname', 'date': '@date(yyyy-MM-dd)', biubiubiu: () => Mock.Random.string('abcdefghijklmnopqrstuvwxyz', 5), 'arr|2-5': [{ 'age|10-20': 0 }] }] } console.log(Mock.mock(template))

1
2
3
4
5
6
7
8
9
10
11
12
let template = {
    'anchorList|3-6':[{
      'id|1-100': 1,
      'name': '@cname',
      'date': '@date(yyyy-MM-dd)',
      biubiubiu: () => Mock.Random.string('abcdefghijklmnopqrstuvwxyz', 5),
      'arr|2-5': [{
        'age|10-20': 0
      }]
    }]
  }
  console.log(Mock.mock(template))

输出:sbf282.com 4

 

  • 模块化、组件化开辟:前后端解耦后,前端之间合营也得以解耦,各自负责区别的模块开拓,写本人的零部件,最后通讯部分再同台

let template = {

复制代码

(function($) {
  $.fn.myScroll = function(options) {

二、重构方案

采纳css预编写翻译语言来写css会进步编制css作用(具体进步多少百分比效能可机关测量检验,作者以为找风华正茂段写好的css,先用css写一次,再用less只怕别的写一次总结耗费时间比例,这里忽视写样式时候思索的大运开展测验卡塔 尔(阿拉伯语:قطر‎

speed:数字纳秒,设置菜单进行和关闭的时日。

<div class="demo">
<ul>
  <li><a title="仿webqq做的八个webos桌面效果" href="#">仿webqq做的叁个webos桌面效果</a></li>
  <li><a title="图片滚动插件myScroll" href="#">图片滚动插件myScroll</a></li>
  <li><a title="使用jquery完成鼠标中键滚轮效果" href="#">使用jquery完毕鼠标中键滚轮效果</a></li>
  <li><a title="怎么着变成网页设计大方" href="#">怎样成为网页设计大方</a></li>
  <li><a title="javascript--求数组的最大最小值" href="#">javascript--求数组的最大非常的小值</a></li>
  <li><a title="jquery插件---图片自适应容器大小插件" href="#">jquery插件---图片自适应容器大小插件</a></li>
  <li><a title="使用css3-PIE让ie也得以协理css3" href="#">使用css3-PIE让ie也得以扶持css3</a></li>
</ul>
</div>

2.7前端安全

  • 2.7.1 XSS

XSS是指浏览器错误的将攻击者提供的客户输入数据作为JavaScript脚本给施行了
解决办法:校验客户输入,特殊字符举行转义
Vue 双花括号自带过滤效果

  • 2.7.2 当地存储数据走漏

本土存款和储蓄的持有数据就都大概被攻击者的JS脚本读取到,所以敏感、机密音信都不建议在前者存款和储蓄
const常量 let 块级功能域制止代码习贯不佳招致的效率域混乱问题

1.3前端框架、模板

效果如下

复制代码

1.2类型布局

花色布局是指向性代码组织结构的,梳理了连串各关键的文件夹及文件并证明相应的剧情依然功效。雷同的,使用xmind画出布局图,xmind图略。

}

 代码如下

复制代码

前言

前面二个技艺发展急忙,相当多门类面前境遇前端部分重构,很欢快能够让自家实行此次项目前端的重构方案编写制定,在考虑的同期参照他事他说加以考查了网络海人民广播电视台湾大学资料,希望本篇重构方案有必然的完整性,能够带给大家有些在面对重构时有用的东西,同一时候愿意经过的大牌小牛不领赐教,能给自个儿略微辅导下重构相关的点,在下感恩图报~


Vue是叁个渐进式框架,轻易入手、轻松协作,能够高效灵活的开垦迭代。同不常候也是近年来主流三大框架里学习花销最低的,近些日子,公司也在首选vue作为首选框架,进行相关技能的培育。

调用accordion插件,设置相关属性,三个安然无事的手风琴效果就成功了。

    var opts = $.extend({}, defaults, options),
        intId = [];

2.5属性优化

  • 2.5.1 数据存取

☆ 尽量利用一些变量
☆ 对象成员的嵌套深度与读取时间成正比,嵌套过深要进行优化

  • 2.5.2 DOM

☆ 尽量减少DOM操作(访谈和校勘都算卡塔尔国的次数
☆ 访问成分时使用最快的API
☆ 使用事件委托来压缩事件微型机的数目
☆ 收缩重绘和重排的次数

  • 2.5.3 算法和流程

☆ for循环、while循环、do-whild循环比for in 要快
☆ 优化循环体的复杂度
☆ 最小化属性查找:

for(let i = 0, len = arr.length; i < len; i++){ ... }

1
2
3
4
for(let i = 0, len = arr.length; i < len; i++){
 
...
}

☆ 当条件非常少时 使用if-else更易读,而当准绳超级多时if-else品质担当比switch大,易读性也没switch好。
☆ 对于if else 几率越大的原则越靠前推断 比如:

☆ 当计算量相当的大且再次的时候,用Memoization缓存总括结果

  • 2.5.4 字符串拼接

比较下四中字符串拼接方法的属性:
A:str = str + ‘a’+’b’
B:str += ‘a’ + ‘b’
C: arr.join(”)
D:str.concat(‘b’,’c’)
☆ Chrome65上测量试验的是A优于B优于C优于D
别的浏览器不分明

  • 2.5.5 Ajax

☆ 服务端设置HTTP头消息保管响应会被浏览器缓存
☆ 顾客端讲获取的音讯存到本地制止重复伸手(localstorage sessionstorage cookice卡塔 尔(阿拉伯语:قطر‎
☆ 设置HTTP头消息,expiresgaosu告诉浏览器缓存多长期
☆ 减少HTTP必要,合併css、js、图片财富文件等或利用MXH奇骏
☆ 通过援助文件用Ajax获取可裁减页面加载时间

此间只列了相比根本的风流倜傥局地,安利一下本人此前写的品质优化计算传送门

代码检查工具 eslint

 代码如下

调用方法:

2.1花销规范

  • 取名标准
  • html/css/less/sass/scss/javascript编码规范
  • 代码检查工具 eslint

规范那个事物没有断然的黑白,唯有同公司还是同单位来制定标准我们都保持风度翩翩致,同事之间能相当的慢读懂相互的代码,进步开支成效

2.2技能选型

  • 2.2.1 开采格局:前后端抽离

左右端分离开垦早就成为主旋律,到现行反革命新类型多数接收这种情势实行付出,项目完全重构的话当然首推此情势
好处:从前未有前边多个那壹人置之说,都以往端兼备开拓,数据库、底层服务、接口,页面意气风发把梭,压力大,何况精力有限不能够在每个领域都做的精粹。后来有切图这一职,能够把页面写的更奇妙一些,通过沙盘和号召接口合营举行数量交互作用,前端都以紧密耦合于后端,这种景色下支付,交流花销,开荒进度中进度信任开销都以较高的。前后端抽离后,分工更显著,各自专一做好团结世界的事,同临时间开工,不相互信赖,功用高
规律:(此图来源某博客,地址忘记。 望博主看见能维系自己加上转发出处,在这里抱歉~)

sbf282.com 5
敞开一个本土的服务器来运维本身的前端代码,以此来模拟真实的线上遭逢;
行使nodejs的express框架来开启一个地点的服务器,然后使用nodejs的二个http-proxy-middleware插件将客商端发往nodejs的伸手转载给真正的服务器,让nodejs作为壹在那之中间层。
然后正是多少难点了,后端接口在支付中,前端供给多少咋做吧?mockjs了然一下,
API地址https://github.com/nuysoft/Mo… ,当后端设计出AP接口文书档案后,我们就能够选用mockjs模拟出对应格式的假数据开展付出,等到接口完全做到现在,再举办接口联调

  • 2.2.2 MVVM框架:vue

Vue是多个渐进式框架,轻巧动手、轻巧协同,能够超级快灵活的开垦迭代。同有时候也是当前主流三大框架里学习花销低于的,前段时间,公司也在主要推荐vue作为首推框架,进行连锁技能的作育。
Vue社区绝对热度高,组件、库、轮子多,财富整合链接:https://segmentfault.com/p/12…
体量小、自由度高、脚手架创建的门类自带webpack打包营造筑工程具
即使vue是单页应用,可是足以经过安插webpack进行多页开拓

  • 2.2.3 css预编写翻译语言

使用css预编写翻译语言来写css会升高编写制定css功用(具体升高多少百分比成效可机关测量检验,小编感觉找风流倜傥段写好的css,先用css写二回,再用less只怕此外写三遍总结耗费时间比例,这里忽视写样式时候动脑筋的时刻张开测验卡塔 尔(英语:State of Qatar)
预编写翻译语言能够定义变量(比方常用的水彩、字体、字号等卡塔 尔(英语:State of Qatar)、嵌套写法、可以三回九转其余类的个性、总计、内置函数等

  • 2.2.4 常用类库

图表工具—echarts (对应场景 – xxx卡塔尔
适配插件—flexible taobaoH5极限适配方案 (对应场景—xxx卡塔尔
Lodash – JS函数库 (对应场景—xxx卡塔 尔(英语:State of Qatar)
ElementUI – UI库 (对应场景—xxx卡塔 尔(英语:State of Qatar)
One-Page-Nav – 导航插件 (对应场景—xxx卡塔尔
切实情况小编就不写了,依据你们不一样的职业需求去看清须求什么样类库插件之类的,预先决定好,避防半途做什么样都要去花时间动脑


就算vue是单页应用,可是足以因而陈设webpack进行多页开荒

<body>

$(function(){
   $("div.demo").myScroll({
   speed:40,
   rowHeight:24 //行高,即li的莫斯中国科学技术大学学,假设有margin/padding,也在思索之中
  });
});

1.3前端框架、模板

利用公司内部职员自创框架C.F.F,自定义build文件,内嵌Smarty模板获取后台数据,利用{$xxx}获取后台数据,可是定义了好些个全局变量存款和储蓄模板数据,造成占用更加多内部存储器、污染命名空间等主题材料。
概念公共组件供各模块或特定情景调用,复花费高

2.6模块化组件化

CSS

    this.each(function(i) {
      var sh = opts["rowHeight"],
          speed = opts["speed"],
          _this = $(this);

1.4第三方库、组件、插件

jquery: JavaScript库
html5shiv:用于减轻IE9以下版本浏 览器对HTML5新添标签不识别,并导致CSS不起功效的主题材料。
Dialog : jquery弹窗插件
jCarousel : jquery 轮播插件 (重构版废弃,原因不复杂的风貌能原生达成尽量原生达成卡塔 尔(阿拉伯语:قطر‎
respond:为 IE6-8 以致别的不援助 CSS3 Media Queries 的浏览器提供媒体询问的 min-width 和 max-width 性情,达成响应式网页设计
sideToolbar:导航工具
echarts: 图形工具


XSS是指浏览器错误的将攻击者提供的客户输入数据作为JavaScript脚本给实践了

在乎,假若您想菜单初叶载入时就开展以来,可以在对应要开展的li上加class="active"。

      intId[i] = setInterval(function() {
        marquee(_this, sh);
      }, speed);

1.1页面结构

本身那边肩负的PC端的重构,所以先把页面结构及中间的涉嫌梳理了二回,并用xmind画好社团图,重视成效做上标志,因为vue是渐进式框架,所以作者会优先重构重要的生龙活虎对
xmind结构图作者就不上了,专门的学业操守照旧要的

jquery: JavaScript库

$(function(){ 
   $(".nav").accordion({ 
        speed: 500, 
        closedSign: '[+]', 
        openedSign: '[-]' 
    }); 
});  

    //暗许配置
    var defaults = {
      speed: 40,
      //滚动速度,值越大速度越慢
      rowHeight: 24 //每行的万丈
    };

end

写的不是超级细,但愿非常多地点都遮盖到了,迎接留言补充~
注:内容有不当也许不当处请指正~转发请表明出处~多谢同盟!

1 赞 4 收藏 评论

sbf282.com 6

背景:原项目写的纯css

closedSign:当下级菜单关闭时,呈现于菜单旁边的内容,能够是大肆html或许text。

<div class="demo">
<ul>
  <li><a title="仿webqq做的二个webos桌面效果" href="">仿webqq做的一个webos桌面效果</a></li>
  <li><a title="图片滚动插件myScroll" href="">图片滚动插件myScroll</a></li>
  <li><a title="使用jquery达成鼠标中键滚轮效果" href="">使用jquery达成鼠标中键滚轮效果</a></li>
  <li><a title="怎样形成网页设计大方" href="">怎么样成为网页设计行家</a></li>
  <li><a title="javascript--求数组的最大最小值" href="">javascript--求数组的最大相当的小值</a></li>
  <li><a title="jquery插件---图片自适应容器大小插件" href="">jquery插件---图片自适应容器大小插件</a></li>
  <li><a title="使用css3-PIE让ie也足以帮衬css3" href="">使用css3-PIE让ie也能够支撑css3</a></li>
</ul>
</div>
</body>
</html>

2.3创设筑工程具

既是选取了vue框架,创设筑工程具当然选择vue自带的webpack了,对于webpack有一些人讲会配置项目就行,有一些人说要深远钻研,这些看个人须求本人认为

2.5.3 算法和流程

复制代码

复制代码

率先对原来项目做二个大概的梳理,既然是重构,当然相当多东西是足以三番两次拿来使用的。

</body>
</html>

...

前端技艺进步快速,比超级多品种直面前端部分重构,很欢跃可以让本身进行本次项目前端的重构方案编制,在寻思的还要参考了英特网海人民广播电视台湾大学质地,希望本篇重构方案有料定的完整性,能够端来大家有个别在直面重构时有用的事物,同一时候希望经过的大牌小牛不领赐教,能给自身略微指导下重构相关的点,在下感恩图报~

复制代码

  

☆ 访问成分时采纳最快的API

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/accordion.js"></script> 

-->
</style>
<script type=text/javascript src=";
<script type="text/javascript">
   (function($) {
  $.fn.myScroll = function(options) {

font-size: @base-size;

首先在head间引用jQuery和插件。

const常量 let 块级功效域制止代码习贯糟糕引致的效用域混乱难点

实例代码

    });

体量小、自由度高、脚手架成立的品类自带webpack打包塑造筑工程具

 代码如下

源代码如下:

☆ 尽量选拔一些变量

 

    this.each(function(i) {
      var sh = opts["rowHeight"],
          speed = opts["speed"],
          _this = $(this);

}

jQuery

    function marquee(obj, step) {
      obj.find("ul").animate({
        marginTop: '-=1'
      }, 0, function() {
        var s = Math.abs(parseInt($(this).css("margin-top")));
        if (s >= step) {
          $(this).find("li").slice(0, 1).appendTo($(this));
          $(this).css("margin-top", 0);
        }
      });
    }

html/css/less/sass/scss/javascript编码规范

jQuery多级手风琴菜单下载:

 代码如下

.title > li:hover {

openedSign:当下级菜单张开时,呈现于菜单旁边的原委,能够是放肆html或许text。

      _this.hover(function() {
        clearInterval(intId[i]);
      }, function() {
        intId[i] = setInterval(function() {
          marquee(_this, sh);
        }, speed);
      });

font-size: 40px;

sbf282.com 7

      _this.hover(function() {
        clearInterval(intId[i]);
      }, function() {
        intId[i] = setInterval(function() {
          marquee(_this, sh);
        }, speed);
      });

respond:为 IE6-8 以至别的不援救 CSS3 Media Queries 的浏览器提供媒体询问的 min-width 和 max-width 天性,达成响应式网页设计

...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文书档案</title>
<style type="text/css">
<!--
body,td,th {
 font-size: 12px;
}
a {
 font-size: 12px;
 color: #09C;
}
a:link {
 text-decoration: none;
}
a:visited {
 text-decoration: none;
 color: #09C;
}
a:hover {
 text-decoration: underline;
 color: #930;
}
a:active {
 text-decoration: none;
 color: #09C;
}
*{ margin:0; padding:0;}
.header{
 height:60px;
 background-color:#666;
 color:#FFF;
 }
.header h1{
 padding:6px 0;
 } 
.demo{
 width:300px;
 height:100px;
 overflow:hidden;
 float:left;
 margin:100px 0 0 100px;
 border:1px solid #09F;
 padding:10px;
 }
.demo ul{
   list-style:none;
   height:auto;
}
.demo ul li{
 height:24px;
 line-height:24px;
 }

☆ 设置HTTP头新闻,expiresgaosu告诉浏览器缓存多长时间

复制代码

html结构如下:

...

复制代码

      intId[i] = setInterval(function() {
        marquee(_this, sh);
      }, speed);

任何浏览器不鲜明

HTML

文字滚动大家只要的追寻能够有相对个那么些的实例,可是同后生可畏页面能够再三调用而且无缝滚动的意义不多,下边作者引入后生可畏款不错的同生龙活虎页面可次调用的jquery文字无缝滚动插件应用实例,各位朋友可参谋。

'id|1-100': 1,

 代码如下

jquery文字无缝滚动插件,仅适合于文字,因为此意义是用持续的将率先行插入到结尾来落实的,假设是极大的从头到尾的经过块,会比较卡。

☆ 更手舞足蹈的UI(字体、图片、logo,开关、列表等卡塔尔国

<ul class="nav"> 
   <li><a href="; 
   <li><a href="#">服务</a></li> 
   <li><a href="#">案例</a></li> 
   <li><a href="#">文章</a></a> 
        <ul> 
           <li><a href="#" target="_blank">XHTML/CSS</a></li> 
           <li><a href="#">Javascript/Ajax/jQuery</a> 
                <ul> 
                    <li><a href="#">Cookies</a></li> 
                    <li><a href="#">Event</a></li> 
                    <li><a href="#">Games</a></li> 
                    <li><a href="#">Images</a></li> 
                </ul> 
            </li> 
            <li><a href="#" target="_blank">PHP/MYSQL</a></li> 
            <li><a href="#" target="_blank">前端观看</a></li> 
            <li><a href="#" target="_blank">HTML5/移动WEB应用</a></li> 
        </ul> 
    </li> 
    <li><a href="#">关于</a></li> 
</ul> 

 
</head>
<body>
<div class="header">
<h1>jquery文字无缝滚动插件</h1>
</div>
<div class="demo">
<ul>
  <li><a title="仿webqq做的二个webos桌面效果" href="">仿webqq做的一个webos桌面效果</a></li>
  <li><a title="图片滚动插件myScroll" href="">图片滚动插件myScroll</a></li>
  <li><a title="使用jquery完成鼠标中键滚轮效果" href="">使用jquery完结鼠标中键滚轮效果</a></li>
  <li><a title="怎么着成为网页设计大方" href="">怎么样产生网页设计行家</a></li>
  <li><a title="javascript--求数组的最大最小值" href="">javascript--求数组的最大非常小值</a></li>
  <li><a title="jquery插件---图片自适应容器大小插件" href="">jquery插件---图片自适应容器大小插件</a></li>
  <li><a title="使用css3-PIE让ie也足以辅助css3" href="">使用css3-PIE让ie也得以支撑css3</a></li>
</ul>
</div>

sbf282.com 8

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

    var opts = $.extend({}, defaults, options),
        intId = [];

行业内部这几个东西未有断然的是非,独有同公司依旧同单位来制定规范我们都保持风姿洒脱致,同事之间能不慢读懂相互的代码,提升支付功效

紧接着,在body间写上菜单主体代码,HTML代码将由生机勃勃二种冬天列表组成。

 代码如下

webstorm自带取色器(别的IDE应该都有,自行找下卡塔 尔(英语:State of Qatar)

 代码如下

    //私下认可配置
    var defaults = {
      speed: 40,//滚动速度,值越大速度越慢
      rowHeight: 24 //每行的冲天
    };

比如

本小说给大家介绍风流浪漫款不错的jQuery多级手风琴菜单实今世码,有供给通晓的相恋的人可参谋,手风琴菜单常常用来下拉领航,由于外观非常简短,使用起来跟手风琴同样能够拉伸和减弱而得名,项目中格外使用手风琴效果会给顾客带给十二分好的心得

    function marquee(obj, step) {
      obj.find("ul").animate({
        marginTop: '-=1'
      }, 0, function() {
        var s = Math.abs(parseInt($(this).css("margin-top")));
        if (s >= step) {
          $(this).find("li").slice(0, 1).appendTo($(this));
          $(this).css("margin-top", 0);
        }
      });
    }

本文由胜博发-前端发布,转载请注明来源:本文章给大家介绍一款不错的jQuery多级手风琴菜