博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery初体验—实现左右切换图片
阅读量:4977 次
发布时间:2019-06-12

本文共 986 字,大约阅读时间需要 3 分钟。

前言

众所周知,是目前使用最广泛的javascript函数库。所以了解并学习是非常重要的,在javascript的学习过程中需要大量代码才能实现的效果,使用jQuery会使得一切简单很多,和CSS结合可以实现很多炫酷的页面效果,写得少,做得多不就是每个程序员所追求的吗?

jQuery相对原生JS是比较简单的,javascript语言的基本知识,就能看懂它,也能够很好的应用。目前,jQuery实现的功能如下:

一、选择网页元素

二、改变结果集

三、链式操作

四、元素的操作:取值和赋值

五、元素的操作:移动

六、元素的操作:复制、删除和创建

七、工具方法

八、事件操作

九、特殊效果


具体实例

由于之前DOM初体验中实现了一个小图和大图的切换,因此想通过jQuery也实现一个和其对比,看看效果如何。

效果展示图如下:

代码如下,CSS部分未给出。

    
jquery之图片左右切换动画

jquery实现左右图片切换

水天一线
水天一线
水天一线
水天一线
水天一线
  • 水天一线
  • 水天一线
  • 水天一线
  • 水天一线
  • 水天一线

其实现过程主要是通过CSS设置指定宽度后,导致大图片溢出,再通过js控制绝对定位层的移动,就可以实现图片左右切换的效果了。


对比与总结

与之前的对比发现,使用jQuery可以更方便地实现特殊效果,同时逻辑特别简单,易于理解。 除此以外,对于CSS的合理使用可以大大简化JS的控制,这是需要特别注意的。

转载于:https://www.cnblogs.com/markniefeng/p/10561860.html

你可能感兴趣的文章