jquery配合seajs框架实现返回顶部特效 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

jQuery实现返回顶部功能

整理两个实现功能，一个是右下角的返回顶部，一个是右侧的返回顶部，分别如图第一种实现一、JSP或HTML(主体结构) 在body中添加 <p id="back-to-top...{ background: #979797 url(/img/back_to_top.png) no-repeat center center; } 图片自己网上找资源三、jQuery...document).ready(function() { //首先将#back-to-top隐藏 $("#back-to-top").hide(); //当滚动条的位置处于距顶部...0 }, 500); return false; }); }); }); 第二种实现...opacity: .6; filter: Alpha(opacity = 60); } (function() { var $backToTopTxt = "返回顶部

2.8K3 0

Jquery实现一键返回顶部

一、需求分析当用户浏览的网页过于长的时候，用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部，不仅麻烦，而且用户体验也会很差。...现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮，点击它可以使页面返回顶部，用户再也不用滚动滚轮了。下面本站的返回顶部的效果，分享给大家： ?...pointer; display: none; } #Back-to-the-top .layui-icon { font-size: 50px; color: #333; } Jquery...代码： // 返回顶部 window.onscroll = function() { scrollTop = document.documentElement.scrollTop || window.pageYOffset

2.2K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

前端进阶攻略|最全的前端开源JS框架和库

7.jQuery 代码托管地址:https://github.com/jquery/jquery jQuery是继Prototype之后又一优秀JavaScript框架。...11.SeaJS 官方文档：http://www.zhangxinxu.com/sp/seajs/docs/zh-cn/module-definition.html SeaJS是一个遵循CMD规范的JavaScript...模块加载框架，可以实现JavaScript的模块化开发及加载机制。...许多组件实现了对数据源的支持 20.YUI 地址：http://yuilibrary.com YUI作为开源前端框架的鼻祖，在框架上的功力非常之深。...Kissy 框架模仿 jQuery 编写了自己的内核 Kissy Core，用于对 DOM 的解析，Ajax 处理等。同时，有着丰富的控件，并实现了一些动画效果和特效。

4.9K7 0

进阶攻略|最全的前端开源JS框架和库

7.jQuery 代码托管地址:https://github.com/jquery/jquery jQuery是继Prototype之后又一优秀JavaScript框架。...11.SeaJS 官方文档：http://www.zhangxinxu.com/sp/seajs/docs/zh-cn/module-definition.html SeaJS是一个遵循CMD规范的JavaScript...模块加载框架，可以实现JavaScript的模块化开发及加载机制。...许多组件实现了对数据源的支持 20.YUI 地址：http://yuilibrary.com YUI作为开源前端框架的鼻祖，在框架上的功力非常之深。...Kissy 框架模仿 jQuery 编写了自己的内核 Kissy Core，用于对 DOM 的解析，Ajax 处理等。同时，有着丰富的控件，并实现了一些动画效果和特效。

4.7K7 1

史上最全的web前端学习教程汇总！

JS基本特效：常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。...JS高级特征：正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、 JQuery：基础使用悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用...AJAX下篇：JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、jQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。...框架封装高级和补充：jquery框架雏形、可扩展性、模块化、封装属于传智自己的框架。...面向模块编程：AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。

10.8K5 0

有史以来最详细的web前端学习攻略，还在等什么，直接收藏吧

JS基本特效：常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。...JS高级特征：正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、 JQuery：基础使用悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用...AJAX下篇： JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。...框架封装高级和补充： JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。...面向模块编程： AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。

3.5K0 0

前端插件以及部分细分网址梳理

lazy.js: 类似于 underscore, 但是会延迟执行，某些场景下，性能会有很大的提升 seajs: 前端模块加载器，解决模块化、依赖等问题 jQuery-One-Page-Nav: 单页应用中一个用于处理导航栏的库...MVC 库，鼻祖级前端库，最初为了配合 Rails 来模块化前端应用，兼容性良好 (兼容到 IE6)，插件丰富，性能良好 jquery.smartbanner: smartbanner 是从 IOS6...: jQuery 插件，用来生成二维码 Wookmark-jQuery: jQuery 的一个插件，可以用来实现瀑布流的效果 isotope: 可以用来过滤、排列布局，实现美观的动态布局切换效果，Demo...的主流前端响应式框架 mui 最接近原生APP体验的高性能前端框架 http://dev.dcloud.net.cn/mui/ AntDesign 和react配合的UI框架https://ant.design...seajs文档http://seajs.org/docs/ SeaJS从入门到原理 http://www.tuicool.com/articles/FfEJv2u Browserify 官网http:

6.8K9 0

AMD、CMD、RequireJS

有哪些应用 1、CMD规范 CMD 即Common Module Definition通用模块定义，CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS，SeaJS...// 定义模块 myModule.js define(function(require, exports, module) { var $ = require('jquery.js') $('div')...除非定义为global对象的属性模块输出：模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象加载模块：加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的.../myModel.js'); nameModule.printName(); 4、代码实战实现功能如下：首屏大图为全屏轮播有回到顶部功能图片区使用瀑布流布局（图片高度不一），下部有加载更多按钮...image.png 使用AMD规范实现模块加载，使用RequireJS打包代码效果展示

1.5K3 0

深入seajs源码系列一

由于规范的多样性，模块化的实现也是各有各的不同。...nodejs遵从的就是commonJS规范，它有着一些形式上的约定：　　 require为函数，该函数接受一个字符串作为模块标示符 require函数返回值为该模块API require函数出错，则抛出异常...这也就是Module/Wrappings规范，而seajs基本实现了该规范。...剖析阅读seajs官网的入门demo，首先在主页面引入seajs文件，并设置入口 // seajs 的简单配置 seajs.config({ base: "...../sea-modules/", alias: { "jquery": "jquery/jquery/1.10.1/jquery.js" } }) // 加载入口模块 seajs.use

9089 0

框架是什么

随便举几个例子 JavaScript：jquery 、angular、seajs、vue …… Java：spring、struts、 hibernate、 junit …… C#：asp.net、...hibernate 第二个条件满足，它Java中用来实现数据库操纵和对象关系映射的一系列类，而且可以复用。那它是用来开发某一类特定的软件的吗？是hibernate应用程序？...因此，个人认为hibernate不能算是一个框架，它只是一组方便解决问题的类。 jQuery 它是一组可复用的类库吗？...JavaScript特效？用JavaScript自己就可以了。 jquery程序？jquery特效？好像没有这个说法呀！那jquery倒底是不是框架呢？...网上普遍认为是，但我却是持否定的态度的，至少我找不到在哪一个层面可将之视为框架理由。给我的感觉，jquery就是用来增加开发效率的一组用JavaScript编写的功能而以，并不是框架。

2.6K6 0

30分钟学会前端模块化开发

SeaJS 通过插件，可以实现 Fiddler 中自动映射的功能，还可以实现自动 combo 等功能，非常方便便捷。RequireJS 无这方面的支持。 6. 两者的插件机制有差异。...SeaJS是一个遵循CMD规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。 ?...与jQuery等JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。...SeaJS可以与jQuery这类框架完美集成。...有时候我们写一个简单的单页并不想为它单独写一个js文件，选择在直接把js代码写在页面上，seajs通过seajs.use()实现了这个。

4.5K5 0

前端大牛们都学过哪些东西？

基础教程前端工程师必备的PS技能——切图篇结合个人经历总结的前端入门方法效果类弹出层焦点图轮播特效工具类 css sprite 雪碧图制作版本控制入门 – 搬进 Github Grunt-beginner...Seajs seajs seajs 中文手册 13. Less,sass sass sass教程-sass中国 Sass 中文文档 less 14....经典排序常见排序算法-js版本 JavaScript 算法与数据结构精华集面试常考算法题精讲移动端 fastclick no-click-delay JSON 模拟生成JSON数据返回跨域...Other MUI-最接近原生APP体验的高性能前端框架 Amaze UI | 中国首个开源 HTML5 跨屏前端框架淘宝 HTML5 前端框架 KISSY - 阿里前端JavaScript库网易...Gulp安装及配合组件构建前端开发一体化 Gulp 入门指南 Gulp 入门指南 - nimojs Gulp入门教程 Gulp in Action Gulp开发教程（翻译）前端构建工具gulpjs的使用介绍及技巧

6.3K3 0

最新HTML5学习路线整合

运算符与优先级流程控制-if..else 流程控制-switch…case 流程控制-while、do..while、for循环 break、continue语法函数定义与调用全局变量与局部变量函数传参与返回值...的基本操作定时器使用 this指向与修改指向数组、字符串等方法操作时间对象与正则对象掌握常见BOM操作常见事件与事件细节 JSON与AJAX JSONP跨域操作前端cookie的使用实战：JS配合...HTML与CSS完成电商项目 jquery框架 jquery框架介绍及优势介绍 jquery核心思想 jquery常见方法 jquery动画操作 jqueryAJAX操作 jquery工具方法利用jquery...对象中实现继承方式设计模式及实际运用 JavaScript高级 JS算法与排序算法 promise异步处理运动与tween算法闭包与模块化 JS组件开发打造小型jquery框架 JS性能优化...ES6新增功能前端工程化 gulp基本使用 less、sass、babel等预编译框架理解模块概念，AMD与CMD规范前端模块框架seaJS、requireJS webpack基本使用多人协作

2.5K4 0

javascript规范（js）

EMCAScript规范 javascript语言实现,ES6规范（使用babel编译器将es6转换为es5，webpack只支持部分es6）： import "jquery"; /.../返回function export function doStuff() {} module "localModule" {} es5: var o = require('s.js'); export...default只有一个，export可以有多个 commonjs规范 nodejs语言实现 require("module"); require("...../file.js"); //require返回对象 object exports.doStuff = function() {}; module.exports = someValue; 浏览器不兼容...global AMD（异步加载模块，npm中requirejs模块） require同步==》异步require([module], callback); //由require.js和curl.js实现

1.6K3 0

PC端、移动端的页面适配及兼容处理

技术选型：jquery（或原生js等）+ 响应式 + 前端模块加载器（seajs或RequireJS等）+ css预处理器（sass 或less等）。...jquery较好的兼容性配合响应式可相对代价较小地实现跨终端。...技术选型：zepto（或xui等移动端轻量级框架）+ 响应式 + 前端模块加载器 + css预处理器 + 终端适配。...zepto作为jquery的移动端版本，依然延续其自身优势，大幅优化了移动端API且摒弃了兼容”非现代浏览器”的冗余代码，成为移动端轻便可用的js框架代表，对于习惯了jquery的同学来说简直是不二之选...640 //target-densitydpi=device-dpi 标示使用设备本身物理屏幕的像素,不会发生默认缩放 miniual-ui ios的safari为meta表天新增的属性，在网页加载是隐藏顶部的地址栏和底部的导航栏

3.7K2 0

JavaScript中的三种模块化规范AMD CMD CommonJS

/blog/2012/10/asynchronous_module_definition.html 阮一峰博客实际上，这三种第三方框架，目前已经很少用了，seajs最近一次更新是在2014年了。...： SeaJS SeaJS路径配置 //seajs所在的路径为默认根目录 seajs.config({ //配置根目录 base： “...../sea-modules/”, //别名 alias : { “jquery”: “jquery/jquery/1.10.1/jquery.js(路径)” //方便调用...node.js的模块系统，就是参照CommonJS规范实现的。...了解SeaJS，以及Seajs与requirejs之间的区别？

6330 0

2017 最受欢迎的语言，第一不是 Java！

很多人学完HTML、CSS、JavaScript、bootstrap以及jQuery的时候觉得前端不过如此嘛，切切页面写写特效，so easy。然而毕竟是too young。 ?...而那些说不管外面技术如何革新我自坚守jQuery阵营的，终究会被淘汰。 Ajax交互现在应用广泛。...，然后还有equireJS（AMD）/seaJS（CMD）/webpack(commomjs）等等一系列乱七八糟的，让你疲于奔命。...前端之路漫漫，框架多如毛，其实也并不都需要学。只要掌握了前端最核心的JS，那就可以非常气定神闲了。只要你JS基础够牢固，最后再有些后台思维，那无论什么框架学起来都很快。...框架最核心的应该是其架构与设计，当你明白实现的原理，给你时间，你也能照老虎画只猫出来。 ? JavaScript是一个全面的、简单的、面向结果的web开发语言之一。

6855 0

前端20个问题【中篇】

function() { $('#hello').toggle('slow'); }; }); seajs.config({ alias: { 'jquery': 'http...://modules.seajs.org/jquery/1.7.2/jquery.js' } }); seajs.use(['..../hello', 'jquery'], function(hello, $) { $('#beautiful-sea').click(hello.sayHello); }); 原理：顶部引入sea.js...从零自己编写一个React框架我这篇文章附带了源码，从零自己实现了一个React框架前端需要了解的常见的算法和数据结构常见的数据结构：栈，队列，树，图，数组，单链表，双链表，图等......框架的实现原理，是为了让我们学习这种设计思想，在平时业务代码书写时候，考虑时间复杂度和空间度的同时也要考虑框架底层实现。

7371 0

史上最全的前端资源大汇总

SeaJS ---- seajs seajs 中文手册 25. Less & Sass ---- sass sass教程-sass中国 Sass 中文文档 less 26....Ext, EasyUI, J-UI 及其它各种UI方案 ---- extjs ext4英文api ext4中文api jquery easyui 未压缩源代码 J-UI MUI-最接近原生APP体验的高性能前端框架...Gulp安装及配合组件构建前端开发一体化 Gulp 入门指南 Gulp 入门指南 - nimojs Gulp in Action Gulp开发教程（翻译）前端构建工具gulpjs的使用介绍及技巧 42...效果类 ---- 弹出层焦点图轮播特效 HTML5 有哪些让你惊艳的 demo？ 78....优秀JavaScript项目 ---- Angular和Webpack种子文件 Fis3面向前端的工程构建系统 Fis3 DEMO 前端JQuery系列:源码剖析 avalon框架 Microsoft

15K6 1

如果把编程语言比做女人，那JavaScript则是......

很多人学完HTML、CSS、JavaScript、bootstrap以及jQuery的时候觉得前端不过如此嘛，切切页面写写特效，so easy。然而毕竟是too young。前端这坑，竟然如此之深。...而那些说不管外面技术如何革新我自坚守jQuery阵营的，终究会被淘汰。 Ajax交互现在应用广泛。...，然后还有equireJS（AMD）/seaJS（CMD）/webpack(commomjs）等等一系列乱七八糟的，让你疲于奔命。...前端之路漫漫，框架多如毛，其实也并不都需要学。只要掌握了前端最核心的JS，那就可以非常气定神闲了。只要你JS基础够牢固，最后再有些后台思维，那无论什么框架学起来都很快。...框架最核心的应该是其架构与设计，当你明白实现的原理，给你时间，你也能照老虎画只猫出来。 ? JavaScript是一个全面的、简单的、面向结果的web开发语言之一。

7416 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭