你的位置:首页 > Java教程

[Java教程]初用jquery


---恢复内容开始---

这两天在顶顶大人的指导下,利用jquery框架做了一个动态切换的小页面。最终效果图:

 

 

这么萌萌哒的图片让我觉得一直在测试也没那么累。实现功能如下:

1.打开页面时,自动切换,切换顺序为123212...这样

2.当用户鼠标放在三个按钮中的某一个时,会停留,不再切换;当鼠标移开后,继续执行自动切换。

码代码的过程:

关键是设置一个父元素,使其高度小于子元素。这样才会出现滚动条啦。要记住把父元素的overflow属性设置为hidden哦,不然又滚动条什么的影响美观。我之前就是设置为auto,顶顶大人指导+1。在子元素中的图片都设置float:left,当然别忘了清除浮动。

这些设置完就要设置左侧按钮了,如何让那三个按钮垂直居中,头疼了半天。最后还是百度了下,给父元素设置display属性,属性值为table;对子元素设置:

display:table-cell;
vertical-align:middle;

然后是把方方丑丑的按钮变为圆圆的,设置border-radius;我把值取它width的一半,就圆了。

简单的静态页面写完了,然后开始写js文件。说到这个,上一次让小顶大人查错,他非常认真地查了大半天,就是查不出错。然后原来我把script标签里的type属性写成type=“javascript/text” 小顶兄怒了...然后我记住了,以后不确定就不要写了。顶大人指导+2

为了实现它每隔一定时间自动切换,用到了window的方法,window.setInterval(参数1,参数2),好吧这里又有个小错误,又把window写成windows,又是查错半天无果的节奏。

顶大人指导+3。先是在ready事件设置了一个数组 array[0,1,2,1]切换循环执行的顺序,设置了一个变量j=0。然后设置了一个interval函数令i=++j/4;(先加j是因为最开始是设置了第一个按钮是红的,所以执行开始是从第二个按钮开始的。即触发第二个btn。)顶顶大人让我去问问看后台的那个大神,也许他有更优雅的写法,他常说后台大神写的代码超优雅~最后调用了参数为i的scroll方法。scroll方法中1.首先是一个链式写法,被改写了。我写得太繁琐了。   

$(".totbtn input").eq(array[i]).addClass('red').siblings().removeClass("red");

这几天看了些jquery的方法, 还是可以看懂这个链式结构的。这个链式结构实现的功能是将索引等于array[i]的按钮添加red类,而他的同辈元素将red类移除。

2.stop(1,1) 当不加上这行代码时,就出现了这样一个bug,鼠标放在按钮上时,不会停止动画。

3.用到了srollTop()函数设置动画效果。它的参数为array[i]*200 (图片高度是200)当i=0,array[i]也为0,此时显示前三分之一内容,即第一个按钮触发时显示的内容。当i=3时,array[i]=1,此时高度为200显示第二部分内容。原先直接设置i*200,所以当i=3时,就会出现错误。

在reay事件下直接设置int= window.setInterval(interval,1000);

对三个按钮设置mouseover()分别调用scroll函数,并将其中参数分别设置为0,1,2。并设置clearInterval()实现当鼠标停留时,自动切换停止,并停留在当前内容。

 在另外对这个三个按钮分别设置mouseout()函数。重置j值为当前class为red的索引值。然后重置int=window.setInterval(interval,1000);调用interval函数,写入新获得的j值。(j值不再从0开始)

基本的jquery就在这里了。第一次发博,感觉写得不清不楚的,再接再厉吧。

 

 

 

---恢复内容结束---