首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    演示效果 自带引用bug.png 把Dn()函数注释掉即可.png 安装 npm install vue-fullpage.js 引用 // 引用fullpage 插件 import 'fullpage.js...loopBottom: true, // //横向slide幻灯片是否循环滚动 // loopHorizontal: false, // //是否循环滚动,不会出现跳动...如果设置为true,则页面会循环滚动,而不像loopTop或loopBottom那样出现跳动,注意这个属性和loopTop、loopBottom不兼容和,不要同时设置 menu: '...loopBottom: true, // //横向slide幻灯片是否循环滚动 // loopHorizontal: false, // //是否循环滚动,不会出现跳动...如果设置为true,则页面会循环滚动,而不像loopTop或loopBottom那样出现跳动,注意这个属性和loopTop、loopBottom不兼容和,不要同时设置 menu: '

    12.8K30

    网站开发常用jQuery插件总结(十)菜单插件superfish

    jQuery 插件:Superfish 菜单插件简介Superfish 是一个基于 jQuery 的强大、灵活、易于使用的多级下拉菜单插件,常用于网页开发中创建响应式、富有互动性的导航菜单。...动态显示隐藏:子菜单在鼠标悬停时动态显示,移开时隐藏。自定义动画效果:可以自定义子菜单显示与隐藏时的动画效果,比如滑动、渐变等。响应式设计:支持移动端或触屏设备的交互方式,自动适配不同设备。...易于集成和使用:只需简单的 HTML 和 jQuery 集成即可实现。使用 Superfish 插件的步骤1. ...初始化 Superfish 插件在页面加载完成后,通过 jQuery 初始化 Superfish 插件。...它支持鼠标悬停显示/隐藏菜单、动画效果、响应式设计等功能,广泛应用于导航栏和菜单设计中。通过简单的配置和初始化,可以为网站添加丰富的菜单交互效果,提升用户体验。

    8400

    Jquer学习之jQuery(function(){})与(function(){})(jQuery)之间的区别

    Jquery是优秀的Javascrīpt框架。我们现在来讨论下在 Jquery 中两个页面载入后执行的函数。...(function(){ })(jQuery); 其实际上是执行()(para)匿名方法,只不过是传递了jQuery对象。...不过这个东西,有的时候会使页面跳动,很多JQUERY插件都是在加载完成后,才改变样式的,页面会有跳动或闪动的感觉.比如ui.tab这个插件,页面元素一多,全部显示出来了,它才形成TAB,很晕的说 (funtion...不可用于存放开发插件的代码,因为jQuery对象没有得到传递,外部通过jQuery.method也调用不了其中的方法(函数)。...(function(){ })(jQuery);用于存放开发插件的代码,执行其中代码时DOM不一定存在,所以直接自动执行DOM操作的代码请小心使用。

    1.8K50

    前端-10款web动画插件

    今天给大家带来了十款web前端动画插件,大家收藏了记得给个小心心哦 1.基于jQuery的瀑布流图片筛选插件 瀑布流的展现方式在目前的网页中用得越来越广泛,特别是图片和首页文章的动态加载。...今天分享的这款就是基于jQuery的瀑布流图片筛选插件,我们可以点击图片分类名称,即可将对应分类下的图片以瀑布流的方式展示出来,这款插件在筛选图片上使用还是比较方便的。 ?...2.基于Layui的可自定义添加删除数据的表格处理插件 如何在网页上编辑表格数据,这通过自己编写JS和CSS实现都是比较麻烦的,jQuery有很多插件可以完成这种功能,比如这款jQuery简易版的Excel...7.HTML5/CSS3超链接图片弹出动画 今天给大家分享一个基于HTML5和CSS3的超链接动画,这个HTML5应用还是比较实用的,它可以让你在鼠标滑过超链接时弹出图片,就像弹出tooltip那样的动画效果...这次我们同样再分享一款基于HTML5 Canvas的爱心表白动画特效,从视觉上看,它也是一个爱心轮廓,但是不同的是这个爱心轮廓由许多跳动的小爱心组成,更加有一种3D立体的效果,程序员的你就拿去用吧。

    6.7K50

    硬核解析,巧用案例学习jQuery框架三种事件绑定方式

    一、 jquery标准的绑定方式 Jquery框架的标准绑定的语法是: jq对象.事件方法(回调函数); 如: Jquery对象.cilck();点击事件 Jquery对象.mouseover();鼠标移入时触发...Jquery对象.mouseout();鼠标移出时触发 表单对象.submit();//让表单提交*** 在这里需要注意:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。...~"); });*/ // 利用jQuery对象获取鼠标移入和移出响应事件 // 鼠标移入 $("#name...在这里要提醒一下大家:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。在中添加以下代码即可添加插件: script src="...../javascript"> $(function () { // toggle函数只能用于1.xx版本,使用时需要引入插件 $("#btn

    2.4K10

    FlexSlider图片轮播插件的使用

    Flexslider是一款基于的jQuery内容滚动插件,不用自己写轮播图的代码,现在可以直接使用这个插件。...首先在页面head部位载入jquery库文件和Flexslider插件,以及Flexslider所需的基本css样式文件。...flexslider来包括所有需要滚动的内容元素,然后使用这个class非常关键,内部的滚动内容都是针对.slides的,然后在内部加入任意html元素,包括图片和文字...效果图如下: Flexslider选项设置 参数 描述 默认值 animation 动画效果类型,有"fade":淡入淡出,"slide":滑动 "fade" easing 内容切换时缓动效果,需要jquery...true slideshowSpeed 滑动内容展示时间(ms) 7000 animationSpeed 内容切换时间(ms) 600 initDelay 初始化时延时时间 0 pauseOnHover 鼠标滑向滚动内容时

    4.3K70

    Typecho主题Handsome修改记录---(持续更新)

    本博文持续更新~ 有问题请在本博留言~ 美化记录 本博一键美化插件 展开 看本博客效果~只要安装后就不需要手动修改了 目前实现的功能 iframe视频文章嵌入优化 iframe视频短代码插入...响应耗时和访客总数(全站字数放弃,减少服务器压力) 右侧边栏时光流逝模块 顶部导航显示心知天气 左侧目录彩色图标 右侧彩色标签和彩色标签云 鼠标经过头像旋转放大 鼠标点击特效 文章标题居中 LOGO扫光...复制成功提示 H1/H2标题背景颜色设置 打赏按钮跳动效果 移动端隐藏标签云和博客信息 首页文章鼠标经过上浮 网站运行时间 文章end标识 (new) 文章二维码 (new) 文章底部增加百度手动推送按钮...jm.zh996.com", "target":"_self" }] } 顶部导航栏 展开 {"name":"talk","status":"hide"} // 隐藏闲言碎语 取消时光机文字首字放大效果...开发者设置->自定义尾部html中添加代码 点击展开 /* 鼠标特效 */ var a_idx = 0; jQuery(document

    1.4K20

    听说前端大佬都在用这些 CDN

    前言 前端开发时,为了让网站的资源快速响应,提高网站的响应速度,我们通常会使用到 CDN。...字节跳动 官网:http://cdn.bytedance.com/ 由国内字节跳动公司所出品的公共库,同步 cdnjs.com,但有时候可能针对部分库未及时更新到最新版本,需要注意这一点,否则在使用时可能会导致一些莫名的错误...包含 JavaScript 库、jQuery 插件、CSS 框架、字体等等 Web 上常用的静态资源。想必这个 CDN 大家都不会陌生吧,没准儿在看博客的各位就一直在用着它。...BootCDN 官网:https://www.bootcdn.cn/ BootCDN 是极兔云联合 Bootstrap 中文网共同支持并维护的前端开源项目免费 CDN 服务,致力于为 Bootstrap、jQuery...总结 以上就是今天分享的所有内容了,如果你正好在开发你的个人网站,但是又苦于响应速度太慢,不妨去试试使用这些 CDN,看看会不会加速网站响应速度呢? - END -

    3.9K10

    SVGEdit:老牌开源 SVG 编辑器是如何架构的?

    有丰富的工具:选择工具、铅笔工具、钢笔工具(三阶贝塞尔)、直线、各种图形、图片、文字等; 画布缩放、图形缩放旋转、编组、复制粘贴、层级排布修改、对齐; 网格线、标尺、图层管理、导入导出 SVG; 历史记录...有插件机制,插件对象通过 addExtension 方法注入到 SvgCanvas.extensions 对象。 可以看到注册了 grid(网格)、markers(标尺)之类的插件。...顺带一提,有个叫做 jPicker 的基于 jQuery 的拾色器插件,也做了魔改,去掉对 jQuery 的依赖。...不同工具都有各自实现的事件响应函数,当用户进行鼠标操作时,会执行 mouseDownEvent、mouseMoveEvent、mouseUpEvent,会根据 mode 执行不同的工具的方法。...监听鼠标事件应该放到 document 下。

    95330

    JavaScript学习笔记(五)——Ajax

    Ajax由四部分组成: JavaScript DOM CSS XMLHTTPRequest:负责将客户端信息以异步通信的方式发送到服务器端,并接收服务器端返回的响应信息和数据。...插件的应用于开发 jQuery插件就是开发爱好者自己利用jQuery制作的特效,然后打包成js文件,发布到网上供大家使用的脚本集合。...好用的jQuery插件: 1. jQuery Form插件 jQuery Form是一个优秀的表单插件,它可以非常容易地使HTML表单支持Ajax。...文档及下载地址 2. jQuery UI插件 jQueryUI 插件是一个基于 jQuery 的用户界面开发,该库提供了UI控件。...鼠标拖拽页面板块 只需要分别在拖拽源和目标上调用 draggable() 函数即可。 实现拖入购物车功能 droppable()方法实现接收容器。

    2.4K10

    JQuery 入门学习(二)

    所以整段代码意思就是为document对象的ready事件添加响应函数function(){},这个函数里面添加我们希望Jquery做的事情。...我列举一些Jquery中常用的事件及其绑定函数:         click 鼠标点击事件 (最常用,当鼠标点击某对象时触发此函数)         change 对象被改变(如input框中写入...、修改、删除文字时触发此事件)         focus 对象获得焦点(如光标进入textarea框触发此事件)         blur 对象失去焦点(与focus事件相对)        ...(当然这个参数可以省略),e.pageX和e.pageY就是指鼠标以后后鼠标所在的位置。 html操作详解     选择器的作用我说了,就是完成为了后面的操作。...除了为选择到的对象添加一个事件响应函数外,还能直接操作此对象,这就是我们的html操作。

    1.5K10
    领券