jquery特效 | 易学教程

JQeury优缺点

阅读更多关于 JQeury优缺点

优点 : jQuery实现脚本与页面的分离，是操作DOM的首选js库。最少的代码做最多的事情最少的代码做最多的事情，这是jQuery的口号，而且名副其实。使用它的高级selector，开发者只需编写几行代码就能实现令人惊奇的效果。开发者无需过于担忧浏览器差异，它除了还完全支持Ajax，而且拥有许多提高开发者编程效率的其它抽象概念。jQuery把JavaScript带到了一个更高的层次。以下是一个非常简单的示例：代码如下 : $( "p.neat" ).addClass( "ohmy" ).show( "slow" ); 通过以上简短的代码，开发者可以遍历“neat”类中所有的<p>元素，然后向其增加“ohmy”类，同时以动画效果缓缓显示每一个段落。开发者无需检查客户端浏览器类型，无需编写循环代码，无需编写复杂的动画函数，仅仅通过一行代码就能实现上述效果。性能在大型JavaScript框架中，jQuery对性能的理解最好。尽管不同版本拥有众多新功能，其最精简版本只有18KB大小，这个数字已经很难再减少。jQuery的每一个版本都有重大性能提高。插件基于jQuery开发的插件目前已经有大约数千个。开发者可使用插件来进行表单确认、图表种类、字段提示、动画、进度条等任务。节省开发者学习时间当然要想真正学习jQuery，开发者还是需要投入一点时间

jquery特效：无缝向上循环滚动列表

阅读更多关于 jquery特效：无缝向上循环滚动列表

效果呈现整个列表间隔设定的时间向上移动一个item的高度 html结构： <div class="slide-title"> <span>title1</span> <span>title2</span> <span>title3</span> </div> <div class="slide-container"> <ul class="slide-list js-slide-list"> <li class="odd"><span>item1</span><span>item1</span><span>item1</span></li> <li class="even"><span>item2</span><span>item2</span><span>item2</span></li> <li class="even"><span>item2</span><span>item2</span><span>item2</span></li> </ul> </div> 实现思路：获得js-slide-list下第一个li元素的高度，对它的height或marginTop进行一个从有到无的动画变化，代码如下： var doscroll =

【转】jquery特效：无缝向上循环滚动列表

阅读更多关于【转】jquery特效：无缝向上循环滚动列表

原文链接： https://segmentfault.com/a/1190000000701184 预期效果：整个列表间隔设定的时间向上移动一个item的高度实现思路：获得js-slide-list下第一个li元素的高度，对它的height或marginTop进行一个从有到无的动画变化，代码如下： html: <div class="slide-title"> <span>title1</span> <span>title2</span> <span>title3</span> </div> <div class="slide-container"> <ul class="slide-list js-slide-list"> <li class="odd"><span>item1</span><span>item1</span><span>item1</span></li> <li class="even"><span>item2</span><span>item2</span><span>item2</span></li> <li class="odd"><span>item3</span><span>item3</span><span>item3</span></li> <li class="even"><span>item4</span><span>item4<

jquery插件之文字无缝向上滚动

阅读更多关于 jquery插件之文字无缝向上滚动

该插件乃本博客作者所写，目的在于提升作者的js能力，也给一些js菜鸟在使用插件时提供一些便利，老鸟就悠然地飞过吧。此插件旨在实现目前较为流行的无缝向上滚动特效，当鼠标移动到文字上时，向上滚动会停止，当鼠标离开时，向上滚动继续。整体代码如下： <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /> < title > 无缝向上滚动 </ title > < style > * { margin : 0 ; padding : 0 ; font-size : 12px ; } li { list-style : none ; } .box { margin : 20px ; width : 320px ; height : 195px ; border : 1px solid #ddd ; padding : 10px ; overflow

文字上下无缝滚动(Jquery)

阅读更多关于文字上下无缝滚动(Jquery)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>无缝向上滚动</title> <style> *{margin:0;padding:0;font-size:12px;} li{list-style:none;} .box{margin:20px;width:320px;height:195px;border:1px solid #ddd;padding:10px;overflow:hidden;} .box ul li{line-height:25px;} </style> <script src="jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="box"> <ul> <li>01这是一个无缝向上滚动的特效，是我第一次写这样的插件</li> <li>02这是一个无缝向上滚动的特效，是我第一次写这样的插件</li> <li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li> <li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li> <li>这是一个无缝向上滚动的特效，是我第一次写这样的插件</li> <li>这是一个无缝向上滚动的特效

JQuery实现手风琴特效

阅读更多关于 JQuery实现手风琴特效

HTML <!DOCTYPE html> <html lang = "en" > <head> <meta charset = "UTF-8" > <title> 手风琴特效 </title> <link rel = "stylesheet" href = "../css/index.css" > </head> <body> <div class = "container" >  <div class = "title" > 我的酒店 <img src = "../img/down.png" class = "icon rt" /></div> <ul class = "content fade" > <li><a href = "" > 酒店订单 </a></li> <li><a href = "" > 酒店点评 </a></li> <li><a href = "" > 酒店问答 </a></li> <li><a href = "" > 酒店收藏 </a></li> </ul>  <div class = "title" > 我的景点 <img src = "../img/down.png" class = "rt" /></div> <ul class = "content fade" > <li><a href = "" >

使用jQuery快速高效制作网页交互特效――05 第五章 05 初识 jQuery

阅读更多关于使用jQuery快速高效制作网页交互特效――05 第五章 05 初识 jQuery

1、 jQuery 简介： ● jQuery 由美国人John Resig于2006年创建 ● jQuery 是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装 ● 它的设计思想是write less,do more（以更少的代码，实现更多的功能）； ● jQuery 是javaScript的程序库之一，它是javaScript对象和实用函数的封装。 ● jQuery 是继Prototype之后又一个优秀的javaScript库，是由美国人 Johh Resig于2006年创建的开源项目。 ● jQuery 只是javaScript的程序库，只相当于它的一个子集，并不能完全取代javaScript。 ●为什么要使用jQuery：与javaScript相比，使用jQuery制作交互特效的语法更为简单，代码量大大减少，不存在浏览器兼容性的问题。 ● jQuery 与其他javascript库：按照使用占比，几大javaScript库占比如下： jQuery (62%) Bootstrap (22%) Zepto (6%) Ext (5%) YUI (5%) 比例图： 2、 jQuery 的用途： 1 ）访问和操作DOM元素：使用jQuery可以很方便的获取和修改页面中的制定元素，无论是删除、移动还是复制元素，jQuery都提供了一套方便快捷的方法。

jQuery快速入门

阅读更多关于 jQuery快速入门

一、JQuery介绍 1、jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 2、JQuery使用户能够更方便处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能极大地简化JavaScript编程。二、JQuery的优势 1、一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 2、丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要讲一个表格的隔行变色，jQuery也是一行代码搞定。 3.链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 4、事件、样式、动画支持。jQuery还建华了js操作css的代码，并且代码的可读性也比js要强。 5、Ajax操作支持。jQuery简化了AJax操作，后端只需要返回一个JSON格式的字符串就能完成与前端的通信。 6、跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容性问题而伤透脑筋。 7、插件扩展开发。jQuery有着丰富的第三方插件，例如：树形菜单、日志控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。三

jQuery动画与特效

阅读更多关于 jQuery动画与特效

一、显示与隐藏动画效果 1.显示hide()和隐藏show() 语法： 1 jQuery对象.show（duration,[fn]); 2 jQuery对象.hide（duration,[fn]); 3 /*其中duration是动画效果运行时间，可选填slow、normal、fast，对应的速度分别为600ms、400ms、200ms。 4 也可以直接填毫秒数，fn函数为回调函数，动作完成后调用此函数*/ 2.toggle()函数语法： jQuery对象.toggle(); /*无参格式，在显示和隐藏之间切换*/ jQuery对象.toggle(true or false) ; /*带布尔值形式，为true时显示元素，否则，隐藏元素*/ jQuery对象.toggle(duration,[fn]); /*与show()函数用法类似*/ 二、淡入与淡出动画效果 1.淡入fadeIn（）淡出fadeOut（）语法： jQuery对象.fadeIn(duration,[fn]); jQuery对象.fadeOut(duration,[fn]); /*本质上是改变元素的透明度*/ /*其中duration是动画效果运行时间，可选填slow、normal、fast，对应的速度分别为600ms、400ms、200ms。也可以直接填毫秒数，fn函数为回调函数，动作完成后调用此函数*/ 2

jQuery基础

阅读更多关于 jQuery基础

目录 jQuery基础 1. 了解jQuery 1.1 什么是jQuery 1.2 什么事JS类库 1.3 常见JS类库 1.4 jQuery的优势 1.5 jQuery的版本 1.6 jQuery 相关网站 2 jQuery 基本使用 2.1 安装 2.2 jQuery对象 2.3 文档就绪事件 2.4 连贯操作 2.5 jQueryDOM和jsDOM jQuery基础 1. 了解jQuery 1.1 什么是jQuery jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库 jQuery极大的简化了JavaScript 编程 1.2 什么事JS类库它就是一些函数的集合，就是把特定效果的代码写好，你只需要在用的时候要用很少的代码去调用。起主导作用的是你的代码，由你来决定何时使用类库。 1.3 常见JS类库 jQuery ExtJS prototype.js zepto.js 1.4 jQuery的优势开源免费便捷的选择器方便的DOM操作方便的动画特效易用的ajax操作丰富的插件扩展解决浏览器兼容性效果 1.5 jQuery的版本 1.x.x的版本是可以支持 IE6~IE8的 2.x.x到3.x.x 的版本，不在兼容IE8以及以下浏览器 1.6 jQuery 相关网站官网 https://jquery.com/ 文档API： http:/

订阅 jquery特效