javascript-通过JQuery在点击时显示一堆图像-有任何简便的动画方法吗?

前端之家收集整理的这篇文章主要介绍了javascript-通过JQuery在点击时显示一堆图像-有任何简便的动画方法吗? 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这是我正在使用的(非常简单的)JS代码

  1. $(document).ready(function() {
  2. $(".button-list .next").click(function() {
  3. project = $(this).parents().filter(".projektweb").eq(0);
  4. currentimg = project.find(".images-list li.current");
  5. nextimg = currentimg.next();
  6. firstimg = project.find(".images-list li:first");
  7. currentimg.removeClass("current");
  8. if (nextimg.is("li")) nextimg.addClass("current");
  9. else firstimg.addClass("current");
  10. return false;
  11. });
  12. $(".button-list .prev").click(function() {
  13. project = $(this).parents().filter(".projektweb").eq(0);
  14. currentimg = project.find(".images-list li.current");
  15. previmg = currentimg.prev();
  16. lastimg = project.find(".images-list li:last");
  17. currentimg.removeClass("current");
  18. if (previmg.is("li")) previmg.addClass("current");
  19. else lastimg.addClass("current");
  20. return false;
  21. });
  22. });

这是图像列表的HTML代码如下所示:

  1. <ul class="images-list">
  2. <li class="current"><img src="img/1.jpg" alt="" /></li>
  3. <li><img src="img/1b.jpg" alt="" /></li>
  4. </ul>
  5. <ul class="button-list"> <li><a class="button prev" href="#"></a></li>
  6. <li><a class="button next" href="#"></a></li></ul>

CSS:

  1. .images-list {
  2. height: 460px;
  3. list-style-type:none;
  4. float:left;
  5. width: 460px;
  6. overflow:hidden;
  7. position:relative;
  8. }
  9. .images-list img {
  10. height: 460px;
  11. width: 460px;
  12. display:block;
  13. }
  14. .images-list li {
  15. display:none;
  16. }
  17. .images-list li.current {
  18. display:block;
  19. }

我想做的是在图像来回移动时对其进行动画处理-现在它们才刚刚出现,这很好,但是再加上一些糖果就可以了.

有人可以帮我从这里出去吗?甚至有可能这样做吗?谢谢!!

最佳答案
我为你赚了a demo基本上,我使用jQuery animate()添加了一些左右滚动动画

您可以沿任何方向对图像进行动画处理,但是如果您想获得更多效果,可以按照Matt的建议使用Cycle插件.

额外的CSS

  1. .images-list li.animating {
  2. position: absolute;
  3. top: 0;
  4. left: 0;
  5. display: block;
  6. }

脚本

  1. $(document).ready(function() {
  2. // *** Constants ***
  3. var project = $('.projektweb');
  4. animationTime = 500,// scroll time in milliseconds
  5. animationWidth = 480; // image width = 460 + 20px padding between images
  6. leftPadding = parseInt( project.find('ul').css('padding-left'),10); // padding due to UL
  7. // *** Next image ***
  8. $('.button-list .next').click(function() {
  9. currentimg = project.find('li.current');
  10. nextimg = (currentimg.next().is('li')) ? currentimg.next() : project.find('.images-list li:first');
  11. currentimg
  12. .removeClass('current')
  13. .addClass('animating')
  14. .css('left',leftPadding)
  15. .animate({
  16. left: '-=' + animationWidth
  17. },animationTime,function(){
  18. $(this).removeClass('animating');
  19. });
  20. nextimg
  21. .addClass('animating')
  22. .css('left',(animationWidth + leftPadding) + 'px')
  23. .animate({
  24. left: 0 + leftPadding
  25. },function(){
  26. $(this).removeClass('animating').addClass('current');
  27. })
  28. return false;
  29. });
  30. // *** Prev image ***
  31. $('.button-list .prev').click(function() {
  32. currentimg = project.find('.images-list li.current');
  33. previmg = (currentimg.prev().is("li")) ? currentimg.prev() : project.find('.images-list li:last');
  34. currentimg
  35. .addClass('animating')
  36. .css('left',leftPadding)
  37. .removeClass("current")
  38. .animate({
  39. left: '+=' + animationWidth
  40. },function(){
  41. $(this).removeClass('animating');
  42. });
  43. previmg
  44. .addClass('animating')
  45. .css('left','-' + (animationWidth) + 'px')
  46. .animate({
  47. left: '+=' + (animationWidth + leftPadding)
  48. },function(){
  49. $(this).removeClass('animating').addClass('current');
  50. })
  51. return false;
  52. });
  53. });

猜你在找的HTML相关文章