分类目录归档:jQuery

无论窗口如何变化,图片的中间部分一直位于浏览器中

由于开发需要,为了能够在各个设备中都能保持一个不错的效果,而设计师给的slider图片大部分仅中间有图片,而图片的长度都是2500px,二两边基本都是纯色。在手机设备上浏览时你就会发现,如果我们将图片的宽度设置为100%,那么图片就是缩放得非常小,以致于无法看清中间部分的图片。因此,就需要在窗口变化的过程中,让图片的中间部分一直处于浏览器可见范围内。
刚开始我使用了@media来进行实现,也就是说直接设置图片的宽度为固定的,而图片外面有一个容器,此容器宽度为100%,并且将图片超出部分所隐藏。这样一来,那么我就可以通过margin-left属性设置为负值,即可移动图片中心部位到相应的地方。但是这个方法确实不行,因为你得写很多不同px的设备。很麻烦,而且经常有各种bug,难以解决。最终我选择了jQuery。

1、需求分析

首先监听窗口的宽度,当宽度小于多少的时候,我们再去设置margin-left的值。
而margin-left的值又要该如何计算?
因为我们需要当窗口宽度小于我们所设置的图片宽度时才进行执行margin-left,因此,假如你设置了image的宽度为1200px,那么我们需要使用下面的计算方式:
1200-当前窗口的宽度=被窗口隐藏的图片宽度
这个仅仅是得到了呗窗口隐藏的右边部分图片的宽度,我们再将其除以2之后也就是,被窗口隐藏的图片宽度的一半,这就得到了我们该向左边margin多少。最终得到的计算方式应该如下:
margin-left:-(image_width – window_width)/2
image_width图片的宽度,window_width即当前窗口的宽度
由于需要向左边移动,所以margin-left的值应该是负值。
继续阅读无论窗口如何变化,图片的中间部分一直位于浏览器中

jQuery插件之ScrollToAnyWhere

闲着无聊,自己写了一款jQuery插件,名字就叫ScrollToAnyWhere,下面来介绍下。
github项目地址:https://github.com/king2088/jquery.ScrollToAnyWhere
jquery.ScrollToAnyWhere.js是一个jQuery滚动插件,基本上,只要给出元素id或class,即可实现滚动。其中包含了,滚动到顶部(Scroll to Top)、滚动到底部(Scroll to Bottom)、滚动到任意位置(Scroll to AnyWhere)。
一、兼容性 Browser Compatibility
什么,你还在用IE6?一个插件,大家都很在乎兼容性,本人鄙视IE,因此仅支持jQuery 2.0版本以上的jQuery版本,2.0版本以下未进行过测试,IE10以下浏览器未进行测试。不支持IE9及以下版本浏览器。
IE9- NO WAY.
jquery library 2.0+ 继续阅读jQuery插件之ScrollToAnyWhere

jQuery插件之25个Tooltip工具提示

1. Tipso

25个最好的Tooltip工具提示jQuery插件
Tipso is a simple jQuery tooltip plugin that displays a responsive, animated, fully customizable tooltip when the visitor hovers over (or clicks on) the matched element.

2. awTooltip

25个最好的Tooltip工具提示jQuery插件
awTooltip is a tooltip plugin created with css and jQuery. It’s possible to show tooltips right, left, top or bottom of the elements. Also you can use colorful tooltip styles.

3. Tooltipster

25个最好的Tooltip工具提示jQuery插件
Tooltipster is a jQuery plugin for quickly creating HTML5-validated and flexible tooltips. The plugin is small-in-size (4.8kb minified), works fast and can be customized with ease. Its look can be changed with CSS (theme support) and the position of the arrow, following the mouse, delay/period of the appearance can all be defined. 继续阅读jQuery插件之25个Tooltip工具提示

JQuery判断浏览器可视区域

在CSS中我们经常使用@media screen来查询设备宽度,其实JQuery也可以实现这个功能,但是我不建议大家使用JQuery来实现,不过有的时候做前端又必须要使用这个方法来判断可视区域,下面我们一起来复习下JQuery的相关知识。我们可以使用.width()以及.height()方法来获取相关元素或者窗口的宽高。 继续阅读JQuery判断浏览器可视区域

JQuery判断某个ID是否存在

使用过JQ的朋友都知道,jQuery有一个专门的遍历class方法hasClass(),但是没有hasId()方法,那么要如何才能获得某个id是否存在呢?在JavaScript中我们可以直接使用document.getElementById(“id”),即可判断。
对于jQurey来说,看到原生JavaScript的方法,我们肯定会想到$(‘#id’),但是在输出的时候,不论页面上有没有这个id都显示object object,因此这种方法是不可取的,但是可以使用以下方法 继续阅读JQuery判断某个ID是否存在

使用JQuery制作关闭打开侧边栏

在WEB前端开发中,经常都要使用JavaScript或者JQuery对前端进行相关处理,让页面更加人性化,让页面体验更好。而JQuery又是使用最多的JavaScript开源库,在web前端开发中被web设计师广泛使用,而我们在2栏、3栏布局的网页,为了方便用户浏览与体验,时常会使用到关闭侧边栏来将侧边栏关闭,让用户能够大屏幕浏览相关内容。
1、使用JQuery的hide(),show()以及animate方法来实现隐藏\显示,在隐藏\显示的过程中使用animate动画
2、效果图: 继续阅读使用JQuery制作关闭打开侧边栏

使用JQcookie插件实现用户自动登录

JQ是个很好的JavaScript库,做前端的必备库之一,其开源的各种插件都非常多,今天要来说一下JQ的cookie插件,并且使用cookie实现自动登录的功能(不是记住密码功能)。
首先下载jq:http://jquery.com/
jq的cookie插件下载地址http://plugins.jquery.com/cookie/
获得了插件后,我们要先分析下要如何实现这个功能
分析:
1、用户填写用户名和密码,点击登录则创建一个相应的用户名及密码的cookie
2、用户在点击登录的时候,通过JQ获得表单中的用户名和密码
3、cookie创建好了以后,让表单自动记住用户名和密码(就是将cookie中的用户名和密码赋值给相应的表单)
4、模拟用户自动点击登录功能
有了以上的分析,我们就可以直接来写代码了 继续阅读使用JQcookie插件实现用户自动登录

jQuery.scrollTo平滑插件使用方法

jQuery.scrollTo是一个轻量级,跨浏览器和随高度可定制的动画滚动,jQuery,使用起来非常方便,平滑效果实在。在使用之前必须先引入jQurey,jQurey版本必须在1.8以上,这样插件才会成功。
1、使用方法
$(element).scrollTo(target[,duration][,settings]);
a、其中element代表的是网页元素,也可以是窗口,比如一个css中的名为.css的class,可以写为$(.css)
b、target 继续阅读jQuery.scrollTo平滑插件使用方法

利用Cordova,jqurey与wp-rest-api制作一个属于自己博客的移动APP

你有一个自己的WordPress博客?想要制作一个个人博客的APP吗?这样一个APP要怎么才能实现?其实可以直接通过HTML+css的方法直接实现,大家应该听说过PhoneGap这个东东了吧,PhoneGap简单的说就是让一些专门做前端开发的开发者通过简单的HTML与CSS及javascript代码来实现一个手机端的APP,目前PhoneGap已将相应的核心技术贡献给了Apache,Apache利用PhoneGap的核心技术,又重新塑造了一个名为cordova的APP开发工具,下面重点介绍下Cordova。

1、开发工具

1.1、Cordova

继续阅读利用Cordova,jqurey与wp-rest-api制作一个属于自己博客的移动APP