前言

小编又来做分享了，小编给你们带来了一个科技感十足的好东西！绝对是看上都是直呼牛B的好东西，下面我们废话不多说，来吧！展示！！！！

1、成品展示

立可得

2、制作分享

小编我看到这个项目的第一眼就觉得这是一个科技感十足的项目，在制作的过程中还是遇到过很多的问题，但是都被小编一一解决了！在做最后一个模块的时候才是小编认为伟大的一个问题。

2.1、问题分享

在编写最后一个模块的js效果中小编发现他的定时器里面的事件会和前面给小li添加的事件进行冲突。这也是小编很不解的问题。原来现编的方法是这样的：

$(".province .sup").on("mouseenter", "li", function() {index = $(this).index();$(this).addClass("active").siblings().removeClass("active");//开始遍历当前对应索引号的品牌的数组var subhtml = "";$.each(hotData[$(this).index()].brands, function(index, item) {subhtml += `<li><span>${item.name}</span><span>${item.num} <s class=${item.flag ? "icon-arrow-up2":"icon-arrow-down2"}></s></span></li>`});//渲染各省热销 sub 模块$(".sub").html(subhtml);});
//4.把第一个小li处于选中状态var lis = $(".province .sup li");lis.eq(0).mouseenter();//5.开启定时器var index = 0;var timer = setInterval(function() {index++;if (index >= 5) index = 0;lis.eq(index).mouseenter();}, 2000);$(".province .sup").hover(function() {clearInterval(timer);}, function() {clearInterval(timer);timer = setInterval(function() {index++;if (index >= 5) index = 0;lis.eq(index).mouseenter();}, 2000);})

但是在这个方法下，定时器里面的鼠标放上去的事件会与前面的触摸事件进行冲突，但是他不会进行报错，但是执行的效果却是只有鼠标触摸上去立马离开就会立马清除定时器。小编经过多次的努力最后还是解决了这个问题。

2.2、解决方法

其实解决办法就是在定时器里我们不使用mouseenter这个事件，把上面小li需要做的事件在定时器里面再做一次。小编先把小li需要做的事件封装成一个函数。然后在定时器里面调用这个函数就可以解决这个定时器事件冲突的问题。这样定时器里面就不会再存在mouseenter事件了。

$(".province .sup").on("mouseenter", "li", function() {index = $(this).index();render($(this));});// 封装一个函数用来包括小li高亮显示和渲染数据function render(that) {that.addClass("active").siblings().removeClass("active");//开始遍历当前对应索引号的品牌的数组var subhtml = "";$.each(hotData[that.index()].brands, function(index, item) {subhtml += `<li><span>${item.name}</span><span>${item.num} <s class=${item.flag ? "icon-arrow-up2":"icon-arrow-down2"}></s></span></li>`});//渲染各省热销 sub 模块$(".sub").html(subhtml);}//4.把第一个小li处于选中状态var lis = $(".province .sup li");lis.eq(0).mouseenter();//5.开启定时器var index = 0;var timer = setInterval(function() {index++;if (index >= 5) index = 0;// lis.eq(index).mouseenter();render(lis.eq(index));}, 2000);$(".province .sup").hover(function() {clearInterval(timer);}, function() {clearInterval(timer);timer = setInterval(function() {index++;if (index >= 5) index = 0;//lis.eq(index).mouseenter();render(lis.eq(index));}, 2000);})

总结

好了，愉快的分享就到这里了！希望大家一起进步！

jQuery——立可得项目心得相关推荐

『飞秋』小项目心得交流
『飞秋』小项目心得交流  最近网站首页改版,我负责前台页面的编写,一个很小的任务,从中我却学习到了很多东西,现总结一下和大家分享一下,希望对大家有用,也希望能 ...
使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享
使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个员工管理源代码分享在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...
使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之三角色管理源码分享在上两篇文章 <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> & ...
使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之二用户管理源码分享在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享了 ...
使用Jquery+EasyUI 进行框架项目开发案例讲解之二用户管理源码分享
在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享了使用Jquery EasyUI来进行开发的相关方法,同时对入群的用户提供了使用J ...
jquery实现动态表格项目（表格增加删除/全选/表格变色特效等功能）（附源码+javaWEB开发如果需要可以直接使用）
jquery实现动态表格项目(表格增加删除/全选/表格变色特效)
团队项目心得 [ 感想 ]
团队项目心得体悟 2018.8.2 娄雨禛 PB16060356 一.总结学校只是个温馨的花园像电设.软工这类课程,总少不了一大堆人的牢骚.我们总去抱怨课程设置不合理,这确实是我们作为学生的权力, ...
jquery表单验证学习心得
jquery validate的官方演示和文档地址: 引用块内容官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/ ...
带有Spring，Hibernate，Akka，Twitter Bootstrap，Apache Tiles和jQuery的Maven Web项目Kickstarter代码库...
我很高兴将第二个项目上传到GitHub,以帮助人们尽快开始Java Web App开发. 我正在与Apache License 2.0共享此代码. 这是相同的网址: https://github.co ...

jQuery——立可得项目心得

前言

1、成品展示

2、制作分享

2.1、问题分享

2.2、解决方法

总结

jQuery——立可得项目心得相关推荐

最新文章

热门文章