来自 澳门威尼斯人平台 2019-12-18 03:16 的文章
当前位置: 澳门威尼斯人平台 > 澳门威尼斯人平台 > 正文

常用的jQuery前端技巧收集-Web前端之家

1.accordion类

调试时巧用console.log方便多了。

动画效果在页面经常会应用到,了解一些常用的方法是必须的,今天想分享平时比较基本的动画实现方法,一起来看下吧!

网页制作web前端之家文章简介:帮助你构建自适应布局的15款优秀 jQuery 插件.

基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal accordion: jQuery 热点图书:www.hotbook.cn jQuery-Horizontal Accordion 具有XBOX360 blade界面风格的水平方向Accordion。 jQuery-Horizontal Accordion jQuery plugin: Accordion 用于创建 折叠菜单的jQuery插件。 jQuery plugin: Accordion 热点图书:www.hotbook.cn Accordion Menu script 基于 jQuery开发的可折叠菜单。 Accordion Menu script 热点图书:www.hotbook.cn jQuery.combobox jQuery.combobox 是一个采用jQuery开发的combobox控件,可以使用CSS控制该combobox的外观,可以设置各种不同风格的下拉动画效果。 jQuery.combobox 热点图书:www.hotbook.cn 2.AutoComplete

jquery易错点:元素拼接的时候,元素还未添加到DOM,就用该预添加元素操作。

下面介绍了几种动画效果的方法,具体如下:

自适应设计是时下网页设计领域最热门的话题之一,自适应设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验。下面是收集的15款优秀的自适应 jQuery 插件,希望这些插件能够帮助到您。

jQuery插件易于集成到现在的表单中。 AutoComplete-JQuery Facebook like Autocomplete 基于jQuery开发,类似于FaceBoox提供的 AutoCompleter。 Facebook like Autocomplete jQuery Autocomplete Mod jQuery Autcomplete插件。能够限制下拉菜单显示的结果数。 jQuery Autocomplete Mod jqac 基于Jquery开发的Autocomplete插件。具有易于使用,配置简单,既可以利用Ajax读取数据也可以直接从本地获取数据。 jqac 热点图书:www.hotbook.cn jQuery Tag Suggestion 类似于del.icio.us提供的tag suggesting功能。 jQuery Tag Suggestion Autocomplete-jQuery ajax 利用 jQuery,PHP和MySQL开发的 AutoCompleter。 Autocomplete-jQuery ajax jQuery.Suggest 跨浏览器支持,基于jQuery开发的Autocomplete library。 jQuery.Suggest Autocomplete- jQuery plugin 一个jQuery Autocompleter,提供缓存选项来限制对服务器的请求。

ajax动态获取的数据,还没有装载html元素,下面就开始用预拼凑的元素操作。

1、show()显示效果

01. Slides

Autocomplete- jQuery plugin

复制代码 代码如下:

语法:show Number/String,Function speend为动画执行时间,单位为毫秒。也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数。

Slides 是一款优秀的幻灯片插件,能够帮助开发者制作出优雅的幻灯片效果。

jQuery plugin: Autocomplete 自动完成输入框值让用户能够快速查找和过滤某些值。 jQuery plugin: Autocomplete jSuggest 模仿 Google Suggest功能的AutoComplete jQuery插件。 jSuggest jQuery Live Ajax Search Plug-in 采用 jQuery开发的AutoComplete控件。搜索结果展示框完全可以利用CSS自定义,内容展示是一个HTML页面。 jQuery Live Ajax Search Plug-in ddcombobox 带 AutoComplete功能的下拉选择框jQuery插件。 ddcombobox 热点图书:www.hotbook.cn

提交澳门威尼斯人平台,)

show(speed,[easing],callback) Number/String easing默认是swing,可选linear;

  1. FlexSlider

jQuery Pagination jQuery分页插件 jQuery Pagination pager jQuery plug-in jQuery 分页插件。 pager jQuery plug-in JQuery Pager 一个利用 jQuery开发的分页UI控件,可用于数据驱动的web应用程序中。 JQuery Pager 热点图书:www.hotbook.cn

这样写,点击“提交”的时候,会报错“Uncaught SyntaxError: Unexpected token ) ”,实际上写成“javascript:void()”也会报这个错,改成“javascript:void”即可

$.show{alert;});

另一款优秀的幻自适应幻灯片插件,支持所有主流的浏览器,提供水平和垂直两种方向并带有丰富的动画效果。

Facebox Facebox 是一个基于jQuery,Facebook-style的lightbox。能够展示示images,divs或者整个远程页面。 Facebox SimpleModal SimpleModal是一个轻量级jQuery插件提供了一个简单的接口来创建模式对话框。 SimpleModal jTip jTip 一个利用jQuery开发的提示工具。jTip通过HttpXMLRequest获取内容。用法简单,只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以。 jTip BetterTip 一个可以自定义Tooltip的jQuery插件。基于jTip,但比它来得更加灵活。 BetterTip clueTip clueTip 这个jQuery插件方便您为链接或其它元素添加Tooltip功能。当链接包括title属性时,它的内容将变成clueTip的标题。clueTip 中显示的内容可以通过Ajax获取,也可以从当前页面中的元素中获取。 clueTip jQuery lightBox plugin 一个简单,强大基于jQuery开发的lightBox控件。 jQuery lightBox plugin jQuery Impromptu 用于创建模式对话框,确认对话框,输入内容对话框的jQuery插件。 jQuery Impromptu jQuery.UI Messenger"Outlook like message notification Widget 这个jQuery.UI控件类似于Messenger"Outlook消息弹出提醒框。 jQuery.UI Messenger"Outlook like message notification Widget FancyBox 基于 jQuery开发的Lightbox插件。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽,该Lightbox除了能够展示图片之外,还可以展示iframed内容, 通过CSS自定义外观。 FancyBox Coda Popup Bubbles 采用 jQuery开发,类似“冒泡”效果的提醒弹出框。 Coda Popup Bubbles jGrowl jGrowl 用于制作消息弹出框的jQuery插件。产生效果的类似于Mac OSX系统中Growl事件通知框架。 jGrowl jqWindowsEngine 这个 jQuery插件能够帮助你轻松创建Ajax Windows。 jqWindowsEngine jQuery Alert Dialogs 这个 jQuery插件能够替换JavaScript提供的alert功能。支持利用CSS自定义对话框外观。 jQuery Alert Dialogs BeautyTips BeautyTips 是一个jQuery Tooltip插件. BeautyTips 热点图书:www.hotbook.cn

复制代码 代码如下:

2、hide()隐藏效果

  1. Fit Text

jwysiwyg WYSIWYG jQuery插件。整个编辑器文件大小只有17Kb。

语法:hide Number/String,Function

FitText 是一款文本大小自动调整插件 ,使用这款插件能够让你的Web项目在屏幕宽度不同的设备上自动调整字体大小。

Damn Small Rich Text Editor 基于jQuery开发,能够从IFRAME元素创建一个Rich Text Editor。提供了所有基本的Rich Text功能,可设置文本编辑区大小,Ajax上传图片等。 Damn Small Rich Text Editor 热点图书:www.hotbook.cn

复制代码 代码如下:"asdafjl".replace, "w"); //在javascript里没有repalce All的函数,所以只能用这个。把全部的a替换为w

hide(speed,easing,callback) Number/String

  1. Responsly

Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。 Flexigrid Ingrid 这个 jQuery DataGrid提供的功能有:可以拖动调整列宽,分页,排序,设置行/列样式等。 Ingrid jQuery Grid jqGrid 是一个Ajaxed jQuery Grid插件。提供分页功能,添加、编辑、删除和搜索表中记录,支持多种数据类型输入:XML,JSON,Array等,多行选择,支持子表格,集成日期选择控件等等。 Demo jQuery Grid tableHover tableHover 一个jQuery插件当鼠标经过时,能够对表格的一整列或行进行着色加亮。支持colspans与rowspans的表格。 tableHover JQuery.Resizer 一个轻量级jQuery插件用于创建可以拖动调整行高与列宽的表格。 JQuery.Resizer tablesorter tablesorter 这个jQuery插件能够将带THEAD与TBODY标签的标准HTMLTable转换成一个可排序的表格。tablesorter能够排序多种数据类型包括Text、URIs、integers、currency、floats、IP地址、日期、时间和自定义的数据类型。支持拥有复杂表头表格的排序,支持二级隐藏排序,支持多种浏览器:IE6.0+、FF2+、Safari2.0+、Opera9.0+。 tablesorter csv2table csv2table 这个插件能够将CVS文件的内容转换成HTML Table。 csv2table tableFormSynch tableFormSynch 是一个表格与表单数据相互更新的jQuery插件。它提供的功能包括:基于表单中的数据,新增行。删除所选择行,并清除表单中的所有数据。 tableFormSynch支持所有表单控件包括:checkboxes、radio、buttons 与。 tableFormSynch 热点图书:www.hotbook.cn

我一直以为字符串就是字符的数组,所以“abc”[0]等于“0”。实际上,IE6、7都不支持这样,解决方法是

$.hide{alert;

一款轻量的响应式组件,目前提供了幻灯片和手风琴功能,可以很容易集成到网站项目中。

Farbtastic Farbtastic是一个color picker插件。它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框。 Farbtastic jQuery Color Picker 一个简单的颜色选择控件。操作方式与Adobe Photoshop中颜色选择操作置。 jQuery Color Picker iColorPicker iColorPicker 是一个只有6KB大小的jQuery Color Picker。只要将输入框的class属性设置为“iColorPicker”就能变一个漂亮的颜色选择器。 iColorPicker 热点图书:www.hotbook.cn

复制代码 代码如下:var data="abc".ToString;//data[0]等于“a”checkbox 居中

3、toggle()隐藏显示自动切换,当目前为显示则隐藏,当目前为隐藏则显示

  1. Elastislide

ContextMenu 用于创建右键弹出菜单的jQuery插件。 ContextMenu

练习

语法:toggle Number/String,Function

Elastislide 是一款非常优秀的响应式 jQuery 幻灯片插件,集成了 Touchwipe 插件以支持触屏设备。

图片新闻Flash展示相关类热点图书:www.hotbook.cn

服务器控件checkbox生成html的时候会在外面加上span。所以不能直接在服务器控件上加样式。

toggle Number/String,String,Function

imgAreaSelect imgAreaSelect 这个jQuery插件能够选取一张图片中一个矩形区域。 imgAreaSelect Easy Slide EasySlide 是以jQuery为基础开发的一个图库展示插件,EasySlide可以将任何一个网页容器内的图形自动将其排列展示,并加上鼠标指向时的暂停效果,可以当作图库展示或是动画及广告Banner使用。 Easy Slide Easy News Easy News是一个可以让您轻松显示网站新闻或图文内容展示的jQuery插件,可设定Fade In-Out ,Slide Up-Down, Left To Right 的效果,调整显示速度,可自行修改CSS改变您为喜欢的风格。 Easy News Easy News Plus Easy News Plus是基于Easy News开发,滚动式新闻或图文内容展示的jQuery插件,但是与Easy News有完全不同的显示方式。 Easy News Plus jQZoom 基于 jQuery开发的图片放大镜插件。 jQZoom jQuery Plugin: Text Highlight 利用 javascript对页面中的关键字进行着色的jQuery插件。 jQuery Plugin: Text Highlight jCarousel Lite 这个 jQuery插件能够帮助你以滚动的方式来组织图片和其它内容。 jCarousel Lite jCarousel jCarousel 是一个jQuery插件用于控制一个列表项目的水平或垂直顺序,列表项目的内容可以是静态HTML内容或通过AJAX加载的内容。可以向前或向后滚动。 jCarousel Spacegallery-Jquery 一个采用 jQuery开发,类似于Flash效果的图库。 Spacegallery-Jquery jQuery Slider Gallery 这是一个基于jQuery开发相册控件,类似于Apple网站上用于展示产品的效果。 jQuery Slider Gallery jQuery Cycle Plugin jQuery Cycle Plugin是一个slideshow插件。支持多种变换效果:shuffle、zoom、fade、turnDown、curtainX、 scrollRight。 jQuery Cycle Plugin Zoomimage 该 jQuery插件能够让以当前流行的方式来展示图片。提供:预加载图片提示,对图片进行分组,自动调整图片显示比例,图片分组浏览控制。 Zoomimage prettyPhoto prettyPhoto 是jQuery lightbox的一个“克隆”。并增加动画效果,图库浏览等特性。 prettyPhoto ThickBox ThickBox 是一个模式对话框UI控件。基于jQuery开发,可以用来展示单张或多张图片,内嵌的内容,iframed的内容,或通过Ajax获取的内容。 ThickBox Galleria Galleria 是一个采用jQuery开发的图片展示插件。它通过缩略图导航一张一张的显示大的图片。支持通过CSS设置整个相册的风格。能够按比例创建缩略图并剪切成适合在缩略图容器中显示的小图片。能够触一些事件,因此可以在图片加载时执行一些动作。 Galleria jQuery Flash Plugin 一个 jQuery插件用于在页面中嵌入Flash影片。 jQuery Flash Plugin jQuery.SerialScroll jQuery.SerialScroll 是一个用于创建滚动效果的jQuery插件,支持水平/垂直方向滚动和混合滚动效果。 jQuery.SerialScroll InnerFade InnerFade 这个jQuery插件能够让任意一组元素实现淡入淡出播放效果。 InnerFade NyroModal 一个基于 jQuery开发,非常灵活和可定制外观/动画效果的模式对话框。可通过Ajax调用目标内容,改变对话框大小等。 NyroModal CrossSlide CrossSlide 这个jQuery插件实现了一些常用Javascript幻灯片放映动画效果如:动态地移动、缩放、渐变、滑入"滑出等。 CrossSlide Magnify Magnify 是一个能够在图片上添加放大镜功能的jQuery插件。 Magnify Img Notes 用于当鼠标移到图片是时,显示一个信息提示框。 Img Notes FancyZoom FancyZoom 采用缩放效果来展示图片或任意HTML页面,不需要另外开启页面来载入图片,其效果在Apple Mac的官方网站中也有。 FancyZoom Jcrop Jcrop 是一个跨浏览器的jQuery图片剪切插件(jQuery image crop plugin)。支持对剪切框加 CSS样式,当选取或拖动时添加回调事件,剪切时能够约束宽度与高度。 Jcrop Galleriffic Galleriffic 是一个用于创建快速展示相册中照片的jQuery插件。图片既可以以幻灯片的方式查看,也可以手动点击缩略图查看。Galleriffic还支持分页,从而使得它能够展示更多的图片。 Galleriffic Image Upload and Auto Crop 采用 PHP+jQuery开发的图片上传和剪切工具。 Image Upload and Auto Crop prettyGallery prettyGallery 是一个图库导航控件Slider。基于jQuery开发,除了可以导航图片之外,还支持其它任何内容。可以配置导航滚动速度和图片标题说明。 prettyGallery jQuery.popeye jQuery.popeye 这个插件能够将一组无序的图片列表转换成一个简单的相册。当点击图片时将以Lightbox风格放大图片。图片展示框提供向前/向后控制并能够为每一张图片添加备注说明信息。jQuery.popeye能够根据图片大小自动调整展示框的高度和宽度。 jQuery.popeye s3Slider s3Slider 是一个jQuery slideshow插件,效果类似于smooth slideshow。 可以在图片上的任意位置,透明显示当前所放映图片的说明信息。 s3Slider Pirobox 采用 jQuery开发的Lightbox控件。能够根据浏览器窗体大小自动调整展示图片大小。提供向前/向后控制链接。动态加载图片效果。易于定制。 Pirobox Simple Controls Gallery 这是一个采用jQuery开发的图片slideshow控件。提供一个暂停/播放/向前/向后展示的控制菜单。这个jQuery slideshow可以设置当页面打开时自动播放图片并能够将最近查看的图片存储在cookie中。 Simple Controls Gallery Agile Carousel Jquery Slideshow插件。易于定制图片切换效果。提供开/关图片标题显示,添加文本水印等功能。 Agile Carousel jQuery Plugin-Page Peel 这是一个用于创建Page Peel特效的jQuery插件。 jQuery Plugin-Page Peel Easy Slider 一个 jQuery插件,当点击导航按纽时可以水平或垂直播放图片或其它任何内容。 Easy Slider imgPreview 图片预览 jQuery插件。当鼠标移到图片链接上时,会在链接的旁边出现一个类似于tooltip效果的图片展示框。 imgPreview Jquery Fade In.Fade Out 这是一个用于让图片产生淡入淡出效果的jQuery插件。 Jquery Fade In.Fade Out Captify 这个 jQuery插件能够在图片上显示标题信息,当鼠标放到图片上时滑动出现。 Captify jParallax 这是一个用于生成视差现象的jQuery插件。mParallax能够产生的效果与 jParallax一样但采用Mootools框架开发。 jParallax

复制代码 代码如下:input[type="checkbox"] { vertical-align:middle;}

$.toggle{alert});

导航类热点图书:www.hotbook.cn

4、slideDown是水平与垂直方向同时展开,而slideDown是仅仅在垂直方向向下展开

本文由澳门威尼斯人平台发布于澳门威尼斯人平台,转载请注明出处:常用的jQuery前端技巧收集-Web前端之家

关键词: