JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 7款很酷的JQuery动画和实用的JQuery应用

7款很酷的JQuery动画和实用的JQuery应用

1.JQuery缓冲加载图片插件lazyload.js的使用方法
       azyload.js是一个基于JQuery的插件,可以用来缓冲加载图片。如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来。通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度。

在线演示   源码下载
2.原生Javascript图片轮播器,可以自动切换
       用原生Javascript写的一个图片轮播器,可以自动切换,但还没有加任何过渡效果,切换比较生硬,下面就来详细的看一下吧。首先是布局,布局不是很难,主要是用position:absolute把n张图片叠加在一起,然后让第一张显示,让其它的隐藏,可用display:none;或z-index实现;另外就是那几个按钮了,让它们始终在所有图片之上。当鼠标点击按钮时使相应的图片出现,这里使用的是改变z-index的方法。当大家看到zIndex++时可能会有疑问,不过大家查下z-index的范围然后算一下就会明白了。z-index的范围就是int整形的范围。

在线演示    源码下载
3.用grumble.js插件制作的一款带气泡提示的导航条
       grumble.js 是一个很特别的气泡形状提示控件,今天我用它做了一个导航条,鼠标移入菜单选项时会出现气泡提示,鼠标移出时气泡提示会消失。首先遍历所有的li元素,鼠标移入某一li元素时,为该li添加移入事件,加上“气泡”,此时创建了新的dom节点;当鼠标移出时,删除所有动态创建的dom节点(清空“气泡”)。

在线演示   源码下载
4.原生Javascript实现图片无缝滚动
       用原生Javascript写的一个图片无缝滚动,可以自动滚动,下面就来详细的看一下吧。首先是布局,主要是用ul列表把n张图片排列放在一起,另外还要设置超出父容器时隐藏;另外就是两个按钮了,用来改变滚动的方向,让它们始终在所有图片之上。控制滚动,首先要把ul内的所有li复制一份,连接在原来的li列表之后,这样不至于原来的li滚动完后出现空白,然后通过动态地改变**.style.left使图片滚动,当所有图片滚动到一半时,在这一瞬间再把所有图片拉回到起始位置,然后再通过改变style.left使其运动,这样反复的执行,所有图片看起来就像是连续向一个方向滚动一样。

在线演示   源码下载
5.网页换肤效果的实现
       在我们平时上网时,会看到很多具有换肤功能的网页,如一些导航网站、qq邮箱的切换主题、qq空间切换主题等,甚至到一些客户端软件,操作系统,为了提高用户体验,都具备了切换主题功能,那么作为一名前端开发人员,我们应该怎样实现这些功能呢?那么我们今天就针对网页的换肤做一下简单的了解。
       我们一开始可能会想为什么会出现不同的主题呢?首先我们应该意识到这些主题也都是由一个个的CSS样式实现的,之所以会出现不同的主题其实就是由于CSS对不同的主题实现了不同的样式,简单的说就是,主题1由样式1控制,主题2由样式2控制,那么我们是不是可以对一个页面写几个不同的样式表,控制不同的样式,当我们需要切换主题时,我们就让这个网页载入不同的样式表,这样行吗?下面我们就来试一下吧。

在线演示    源码下载
6.Javascript超酷数码时钟的实现方法
       我们有时根据实际情况可能会需要一个更炫的时钟,这时我们可能会想到用字体控制,但字库是有限的,它们所呈现出的效果依然是很单一的,那么该怎么办呢?其实这时,我们就需要用到图片了。每张图片都是独立的,然后就是通过时间的变化调用不同的图片,使其显示在页面上模拟时钟的效果。

在线演示   源码下载
7.用CSS偏移背景图片法实现带小三角形的div框
       现在看到了很多带小三角形的方框,如微信、Mac版的QQ、QQ空间的时间轴等等,在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着,感觉看着很不错,这次用的是偏移背景图片法。

在线演示   源码下载

【7款很酷的JQuery动画和实用的JQuery应用】相关文章

1. 7款很酷的JQuery动画和实用的JQuery应用

2. 7款很实用的jQuery/CSS3插件及源码下载

3. 华丽的HTML5/jQuery动画和应用 前端必备

4. 华丽的HTML5/jQuery动画和应用 前端必备

5. 7个炫酷的jQuery动画插件及源码

6. 很酷的 CSS3 导航按钮

7. 7款值得你心动的HTML5动画和游戏

8. 7款非常实用的jQuery/CSS3插件演示和源码

9. 7款非常实用的jQuery/CSS3插件演示和源码

10. 7款炫酷实用 jQuery/HTML5图片应用

本文来源:https://www.51html5.com/a1354.html

点击展开全部

﹝7款很酷的JQuery动画和实用的JQuery应用﹞相关内容

「7款很酷的JQuery动画和实用的JQuery应用」相关专题

其它栏目

也许您还喜欢