首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

jQuery特效 | 导航底部横线跟随鼠标缓动

HTML5学堂(码匠):jQuery来实现如下特效 - 在导航底部存在一条横线,跟随着鼠标缓动到相应导航项底部。...今天就针对该特效来说说如何开发(本次内容使用jQuery进行讲解,原生JavaScript代码下周一奉上) 功能效果图 ?...功能需求明确 横向导航条; 当鼠标移入导航区域的时候,在当前导航底部淡入一个横线; 当鼠标在导航区域当中左右移动时,横线跟随鼠标移动; 当鼠标移出导航区域的时候,横线淡出。...hover事件 hover事件是jQuery中的事件,不存在于原生JavaScript当中,是mouseover(鼠标移入)与mouseout(鼠标移出)的功能综合体; hover事件的基本语法为:...offsetLeft是JavaScript原生方法,ele.offsetLeft中,ele表示具体元素,元素的offsetLeft属性,表示该元素左侧与父级元素的距离; position()方法是jQuery

8.7K50

TwentyTwenty:一个图片特效Jquery 插件

这个Jquery 插件值得推荐——虽然我不清楚在什么情况下适用,但你知道有这个东西,在需要的时候就能用上了——收集多点资源总不是坏事。插件的效果具体我也不会说,直接看官网demo吧。...简介 官方网站& demo:http://zurb.com/playground/twentytwenty 运行必备:jqueryjquery.event.move(一个用于在移动设备上支持触摸事件的类...我们正在使用的自定义运动事件jquery.event.move库,以支持在移动设备上1:1滑块运动。 image.png 保用方法 TwentyTwenty非常容易上手,只是包装容器内的两个图像。...twentytwenty()这个容器加载图像: $(window).load(function() { $("#container1").twentytwenty(); }); WordPress 插件...这里有个在TwentyTwenty 基础上开发的WordPress 插件,通过短代码 [TwentyTwenty][/TwentyTwenty] 就可以直接在后台的编辑器中使用。

4.8K80

前端-10款web动画插件

今天给大家带来了十款web前端动画插件,大家收藏了记得给个小心心哦 1.基于jQuery的瀑布流图片筛选插件 瀑布流的展现方式在目前的网页中用得越来越广泛,特别是图片和首页文章的动态加载。...今天分享的这款就是基于jQuery的瀑布流图片筛选插件,我们可以点击图片分类名称,即可将对应分类下的图片以瀑布流的方式展示出来,这款插件在筛选图片上使用还是比较方便的。 ?...2.基于Layui的可自定义添加删除数据的表格处理插件 如何在网页上编辑表格数据,这通过自己编写JS和CSS实现都是比较麻烦的,jQuery有很多插件可以完成这种功能,比如这款jQuery简易版的Excel...5.jQuery左侧边栏多级菜单 适合后台管理页面使用 这是一款基于jQuery的侧边栏多级下拉菜单插件,这个菜单的特点是可以固定在左侧边栏,当页面滚动时整个菜单可以保持一直可见,方便操作。...6.CSS3弧形曲线循环菜单导航 菜单项图标高亮 今天给大家带来一个非常富有创意的CSS3菜单导航插件,它与我们平常看到的横向菜单或者纵向菜单都不同,它的菜单项是沿着一段弧形曲线分布的,同时有两个上下切换的按钮

5.9K50

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

导航、元素等时使用 // paddingTop: "100px", // //设置每个section底部的padding,当我们要设置一个固定在底部的菜单导航、元素等时使用 //...paddingBottom: "100px", // //固定的元素,为jquery选择器;可用于顶部导航等 // fixedElements: ".nav",...// //横向幻灯片导航的位置,可以为top或者bottom // slidesNavPosition: bottom, // //内容超过满屏时是否显示滚动条,需要jquery.slimscroll...、导航、元素等时使用 // paddingTop: "100px", // //设置每个section底部的padding,当我们要设置一个固定在底部的菜单导航、元素等时使用 //...// //横向幻灯片导航的位置,可以为top或者bottom // slidesNavPosition: bottom, // //内容超过满屏时是否显示滚动条,需要jquery.slimscroll

11.8K30

实现单页浮动导航效果的 jQuery 插件:Smint

Sminti 介绍 现在的网页设计中,浮动导航菜单被广泛应用了,通过它,可以可以快速移动到菜单,Smint 就是这样一个简单的 jQuery 插件,可以将导航菜单浮动在页面的顶部,点击菜单快速滚动到达页面的位置...在页脚加载 jQuery 库 和 jQuery.smint.js。...<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/<em>jquery</em>/1.7.1/<em>jquery</em>.min.js"...通过下面代码调用: $(document).ready( function() { $('.subMenu').smint(); }); 为了控制更加方便和灵活,Smint 在导航菜单变成浮动在顶部的时候...另外,这个插件只有一个选项,就是设置页面滚动的速度: $('.subMenu').smint({ 'scrollSpeed' : 1000 }); 默认是 500(半秒),你可以设置成任意你希望的时间

3.8K30

WordPress导航菜单图标字体插件font awesome 4 menus纯代码版

换成 Begin 主题之后,大伙都不约而同的给菜单用上了图标字体,确实给博客带来了一定的美化效果。 与之配套的是 font awesome 4 menus 这个图标字体插件,其实还是挺小巧的。...不过,在强迫症的眼里,能代码化就尽量不用插件吧!于是将这个插件改造成代码版,顺便精简了基本用不到的 shortcode 图标调用功能。 ?...那如何使用到 WordPress 导航菜单呢?...很简单,依次打开 WordPress 后台==>外观==>菜单,然后点开已有菜单,将得到的 class 填入到 CSS 类即可,比如我在官方图标库查到“家”图标的 class 是 fa fa-home,...保存之后,WordPress 导航菜单上的【首页】前面就会出现一个“家”的图标了。 如果发现点开菜单没有 CSS 类栏位怎么办? 很明显,你没把这个功能开出来。

2.9K50

家乡主题网页设计代码 旅游主题网页设计 html静态网页设计制作 dw静态网页成品模板素材网页 web前端网页设计与制作 div静态网页设计

3.知识应用:技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了Logo(源文件)所需的知识点...-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) --> <script src="https://cdn.jsdelivr.net...-- 加载 Bootstrap 的所有 JavaScript <em>插件</em>。你也可以根据需要只加载单个<em>插件</em>。...text-align: right; } .item img{ margin:0 auto; } --- 三、个人总结 一套合格的网页应该包含(具体可根据个人要求而定) 页面分为页头、<em>菜单</em><em>导航</em>栏...二级<em>菜单</em>可正常弹出与跳转; 要有JS<em>特效</em>,如定时切换和手动切换图片新闻; 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用; 页面清爽、美观、大方,不雷同。

5.4K20
领券