jQuery特效之“无缝”轮播图效果，发现真的很简单！

轮播图，也是一个网站开发中最最常用的功能，很大程度上提高了网站的用户体验，那这么高大上的轮播图是如何用js山西i安的呢？且听我慢慢倒来。

一、HTML结构

HTML与CSS的配置，说实话是很多JS特效的根基，结构理清楚，css设置好，再用JS使其效果富有运动感，这是目前绝大多数前端JS特效的基本做法。

轮播图的HTML结构的关键点：

最外层放置轮播图片的DIV的宽度和高度要和一张图片的宽、高一致，相对定位，并且使用溢出隐藏：overflow:hidden。

轮播图片的父级DIV使用绝对定位控制位置。高度与图片高度一致，宽度是几张图片的总和。由于其上一层的DIV有溢出隐藏，所以多余的图片不会显示出来的。

轮播图片左浮动，这样就会水平排列在一行。

无缝就是将第一张图片在最后再冗余一张。

看出来点眉目了吧，其实轮播轮播切换的就是图片父级DIV的left值，正值为从左往右轮播，负值为从右往左轮播。

想读更多 ->

jQuery ajaxSetup() 方法

用了这么久的jquery Ajax，今天才了解到jquery中还有一个非常好用的功能。就是ajaxSetup方法，这个方法可以为全局的ajax操作设置共同的一些属性，比如说统一ajax请求失败的方法等等。

它的语法是：$.ajaxSetup({name:value, name:value, ... })

所支持的属性是上面这些，下面我就演示一下如何使用这个方法。

我为了让所有的ajax都起作用，就把这个方法添加到了jquery-1.8.3.min.js这个公用的js里面：

想读更多 ->

介绍一款功能最全的响应式幻灯片 jQuery 插件-slick

随着移动端的普及，为了能让访客方便查看网页内容，网页幻灯片效果（又称：灯箱，轮换图）也需要支持移动端，即响应式，当然再加上拖拽支持就更多好了，今天为大家分享一个实用的幻灯片 jQuery 插件「Slick」，几乎能满足大部分网页的需求。

Slick 这个插件功能多且实用，下面我们一起来看看介绍。

jQuery 名称：Slick

下载&演示：http://kenwheeler.github.io/slick/

1.多组切换

多组同时切换，如下图，第一屏是1，2，3图，点击下一屏按钮后，就直接切的到4，5，6屏了。

2.

想读更多 ->

SSM项目实战、jquery、Spring、数据结构、C语言系列视频资料分享

总览

本次分享内容涉及 Java、C语言、数据结构、jquery 这几个方面，其中 java 部分除了 Spring，其他内容以项目实战为主。

Java

这次分享的内容并不是基础讲解，而是直接上升到项目实战，所以比较适合有一定的基础。

想读更多 ->

JQ中不是很正经的this

jquery中的this

javascript中this是指向调用他的那个对象，谁调用就指向谁。

jquery中的this大致也是这种模式，谁调用指向谁，但是由于jquery的机制，不是能明显的能看出谁在调用，初期会对this有些不解，用多了也就好了。

考虑下面的返回值

$(document).ready(function(){

alert($(this));

alert(this);

})

alert($(this));返回[object object]

上面返回的是一个对象，是一个jquery对象。

alert(this);返回[object HTMLDocument]

上面返回的是一个DOM对象。

怎么会这样呢？其实返回来看jquery的语法格式虽能理解了，jquery选取一个对象或者元素的语法$("li"),被$()包裹起来

想读更多 ->

使用jQuery轻松判断网页是否已经滚动到浏览器底部了

有时候要求用户滚动到浏览器的底部，再重新加载新内容。我在这里说一下，如何使用jQuery来确定用户是否浏览了页面的底部。

在了解以下知识之前，先介绍几个概念。

$(window).height(); //用于获取浏览器显示区域的高度

$(window).width(); //用于获取浏览器显示区域的宽度

$(document.body).height(); //获取页面文档的高度

$(document.body).width(); //获取页面文档的宽度

$(document).scrollTop(); //获取垂直滚动条到顶部的垂直距离

$(document).scrollLeft(); //获取水平滚动条到左边的水平距离

通过上面的知识点，可以知道：网页的高度>=浏览器显示区域的高度+垂直滚动条距离顶部距离。

有了这个结论，它就很容易实现了。下面的代码已经实现，判断用户是否浏

想读更多 ->

听说过后端架构师，但是你知道还有前端架构师这一说吗？

可能很多人和我一样, 首次听到"前端架构"这个词, 第一反应是: "前端还有架构这一说呢?" 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备受重视, 早在开发工作启动之前, 他们就被邀请加入到项目中, 而且他们会跟客户讨论即将建成的平台的架构要求, 使用还什么技术栈? 内容类型是什么? 这些内容如何被创建?软件架构师的职责就是要保证项目中每一步都在总体架构的指导下进行, 而不会随机决定.

现在的前端领域, 随着JS框架, UI框架和各种库的丰富, 前端架构也变得十分的重要. 如果一个大型项目没有合理的前端架构设计, 那么前端代码可能因为不同的开发人员随意的引入各种库和UI框架, 导致代码量变得异常臃肿, 最终结果可能是代码变得无法维护, 页面性能低下,不得已只能推翻重构. 所以我们需要在项目开始前, 同样的需要对前端代码进行架构, 一旦前端架构师设计出所有前端开发人员都要遵循的检验机制, 建立起系统设计的规范, 那么项目就拥有了可以衡量代码质量的标准, 前端开

想读更多 ->

Jquery实现火车票买票切换城市功能

今天宁徽前端给大家带来一个新功能：Jquery实现火车票买票切换城市功能！大家刚敢看到这个功能心里有没有思路呢！

加群获取源代码

1、点击中间切换获取：出发城市名以及到达城市名；

var cfcs = $().val();

var ddcs = $().val();

2、将对应的出发城市和到达城市对调；

$(cfcs).val(ddcs);

$(ddcs).val(cfcs);

思路很简单的，实现也很简单；所以在写一个新功能的时候不要急着敲代码，先理清了思路再来敲代码会事半功倍的；

想读更多 ->

jQuery生成验证码插件

ClientSideCaptcha是一款前端jquery生成验证码插件。该验证码插件完全由js生成。通过该插件，可以不依赖于后台，在前端完成验证码的测试工作。

在页面中引入jquery和client_captcha.js文件。

<script src="js/jquery.min.js"></script>

<script src="js/client_captcha.js"></script>

一个完整的图片验证码的HTML结构如下：

<div class="captcha-chat">

<div class="captcha-container media">

<div class="media-body">

<p class="security">请输入验证码：</p>

想读更多 ->

web前端需要掌握的jQuery参考手册主要API

jQuery API中文手册，包括jQuery 核心函数和方法、jQuery属性参考手册、jQuery CSS操作、jQuery选择器、jQuery文档操作、jQuery筛选操作、jQuery事件方法、jQuery效果、jQuery Ajax操作、jQuery工具函数、jQuery事件对象、jQuery延迟对象、jQuery回调函数。

想读更多 ->