" jQuery"标签下的所有文章

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

2017/04/26jQuery 标签:0

由于开发需要,为了能够在各个设备中都能保持一个不错的效果,而设计师给的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+ 阅读更多

使用JavaScript实现ajax获取文本及html内容

2016/10/17JavaScript 标签:0

ajax使用jQuery的话很容易就可以实现了,但是使用原生JavaScript要如何实现呢,原生JavaScript提供了XMLHttpRequest,通过它即可实现ajax了。获取文本可以直接输出结果即可,获取html文本,必须使用innerHTML才能正常显示html相关标签及内容、样式。当然,我们要是直接使用jQurey的$ajax()方法,很容易就能实现原生JavaScript要写很长代码的ajax功能。当然jQurey库都是使用原生JavaScript编写并封装的,因此他们是完全分不开的。下面我们来看看JavaScript原生是如何实现ajax功能!
1、JavaScript通过ajax获取内容 阅读更多

JQuery判断浏览器可视区域

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

JQuery判断某个ID是否存在

2016/09/18jQuery 标签:0

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

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

2016/09/17jQuery 标签:0

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

jQuery.scrollTo平滑插件使用方法

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

jQuery顶部线条loading条LoadingBar.js

目前很多网站都可以看到这样的效果,在加载页面时,加载进度都是在浏览器的顶部,以下介绍下一个jQuery的插件LoadingBar.js,此插件显示的效果如下图: 阅读更多

share

AD