[Hỏi đáp] Làm quảng cáo trượt

  • nimate9
    mình đang tính làm quảng cáo kiểu trượt thay đổi giữa absolute và fixed nhưng ko biết làm như thế nào
    mong mọi người giúp đỡ

  • Giựt
    2. Re: [Hỏi đáp] Làm quảng cáo trượt
    avatar MOD
    Bạn dùng sticky nhé :)

    Tạo js :

    ACP >> Modules >> HTML & JAVASCRIPT >> Javascript Codes >> Create a new javascript:
    Title: Sticky Plugin
    Placement: In all the pages
    Javascript Code * :

    Code:
    // Sticky Plugin v1.0.0 for jQuery
    // =============
    // Author: Anthony Garand
    // Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
    // Improvements by Leonardo C. Daronco (daronco)
    // Created: 2/14/2011
    // Date: 2/12/2012
    // Website: http://labs.anthonygarand.com/sticky
    // Description: Makes an element on the page stick on the screen as you scroll
    // It will only set the 'top' and 'position' of your element, you
    // might need to adjust the width in some cases.

    (function($) {
      var defaults = {
          topSpacing: 0,
          bottomSpacing: 0,
          className: 'is-sticky',
          wrapperClassName: 'sticky-wrapper',
          center: false,
          getWidthFrom: ''
        },
        $window = $(window),
        $document = $(document),
        sticked = [],
        windowHeight = $window.height(),
        scroller = function() {
          var scrollTop = $window.scrollTop(),
            documentHeight = $document.height(),
            dwh = documentHeight - windowHeight,
            extra = (scrollTop > dwh) ? dwh - scrollTop : 0;

          for (var i = 0; i < sticked.length; i++) {
            var s = sticked[i],
              elementTop = s.stickyWrapper.offset().top,
              etse = elementTop - s.topSpacing - extra;

            if (scrollTop <= etse) {
              if (s.currentTop !== null) {
                s.stickyElement
                  .css('position', '')
                  .css('top', '');
                s.stickyElement.parent().removeClass(s.className);
                s.currentTop = null;
              }
            }
            else {
              var newTop = documentHeight - s.stickyElement.outerHeight()
                - s.topSpacing - s.bottomSpacing - scrollTop - extra;
              if (newTop < 0) {
                newTop = newTop + s.topSpacing;
              } else {
                newTop = s.topSpacing;
              }
              if (s.currentTop != newTop) {
                s.stickyElement
                  .css('position', 'fixed')
                  .css('top', newTop);

                if (typeof s.getWidthFrom !== 'undefined') {
                  s.stickyElement.css('width', $(s.getWidthFrom).width());
                }

                s.stickyElement.parent().addClass(s.className);
                s.currentTop = newTop;
              }
            }
          }
        },
        resizer = function() {
          windowHeight = $window.height();
        },
        methods = {
          init: function(options) {
            var o = $.extend(defaults, options);
            return this.each(function() {
              var stickyElement = $(this);

              var stickyId = stickyElement.attr('id');
              var wrapper = $('<div></div>')
                .attr('id', stickyId + '-sticky-wrapper')
                .addClass(o.wrapperClassName);
              stickyElement.wrapAll(wrapper);

              if (o.center) {
                stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
              }

              if (stickyElement.css("float") == "right") {
                stickyElement.css({"float":"none"}).parent().css({"float":"right"});
              }

              var stickyWrapper = stickyElement.parent();
              stickyWrapper.css('height', stickyElement.outerHeight());
              sticked.push({
                topSpacing: o.topSpacing,
                bottomSpacing: o.bottomSpacing,
                stickyElement: stickyElement,
                currentTop: null,
                stickyWrapper: stickyWrapper,
                className: o.className,
                getWidthFrom: o.getWidthFrom
              });
            });
          },
          update: scroller,
          unstick: function(options) {
            return this.each(function() {
              var unstickyElement = $(this);

              removeIdx = -1;
              for (var i = 0; i < sticked.length; i++)
              {
                if (sticked[i].stickyElement.get(0) == unstickyElement.get(0))
                {
                    removeIdx = i;
                }
              }
              if(removeIdx != -1)
              {
                sticked.splice(removeIdx,1);
                unstickyElement.unwrap();
                unstickyElement.removeAttr('style');
              }
            });
          }
        };

      // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
      if (window.addEventListener) {
        window.addEventListener('scroll', scroller, false);
        window.addEventListener('resize', resizer, false);
      } else if (window.attachEvent) {
        window.attachEvent('onscroll', scroller);
        window.attachEvent('onresize', resizer);
      }

      $.fn.sticky = function(method) {
        if (methods[method]) {
          return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method ) {
          return methods.init.apply( this, arguments );
        } else {
          $.error('Method ' + method + ' does not exist on jQuery.sticky');
        }
      };

      $.fn.unstick = function(method) {
        if (methods[method]) {
          return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method ) {
          return methods.unstick.apply( this, arguments );
        } else {
          $.error('Method ' + method + ' does not exist on jQuery.sticky');
        }

      };
      $(function() {
        setTimeout(scroller, 0);
      });
    })(jQuery);

    Tạo 1 js nữa :

    Javascript code :
    Code:
    $(document).ready(function(){
        $("#abcxyzvcl").sticky({topSpacing:0}); // Id, Class của phần tử sẽ cuộn theo.
    });


    --Chữ ký--
    Diễn đàn Kênh Game 360>> Smile
  • nimate9
    Tạo 1 js nữa :

    Javascript code :
    Code:
    $(document).ready(function(){
        $("#abcxyzvcl").sticky({topSpacing:0}); // Id, Class của phần tử sẽ cuộn theo.
    });
    Mình ko hiểu lắm về phần này. Bạn có thể giải thích rõ được ko

  • Giựt
    4. Re: [Hỏi đáp] Làm quảng cáo trượt
    avatar MOD
    @nimate9 đã viết:
    Tạo 1 js nữa :

    Javascript code :
    Code:
    $(document).ready(function(){
        $("#abcxyzvcl").sticky({topSpacing:0}); // Id, Class của phần tử sẽ cuộn theo.
    });
    Mình ko hiểu lắm về phần này. Bạn có thể giải thích rõ được ko

    Ví dụ nhé bạn Very Happy
    Code:
    https://jsfiddle.net/pacc420y/

    Còn bạn vẫn chưa hiểu thì đưa demo mình sửa hộ Very Happy


    --Chữ ký--
    Diễn đàn Kênh Game 360>> Smile
  • nimate9
    Mình làm được rồi nhưng mà có cách nào cho nó chạy đến chỗ nhất định ko
    nó chạy xuống hết trang luôn @@

  • Giựt
    6. Re: [Hỏi đáp] Làm quảng cáo trượt
    avatar MOD
    Bạn tự mày mò nhé :
    Code:
    https://jsfiddle.net/fdwxrcd8/


    --Chữ ký--
    Diễn đàn Kênh Game 360>> Smile
  • nimate9
    mình làm được rồi, cảm ơn bạn nhiều ^^

  • Sponsored content

Thông tin tác giả
avatar
MEM
Bài viết :
5
Points :
10
Like :
1
Punbb
Xem lý lịch thành viên
Thông tin tác giả
avatar
MOD
Bài viết :
265
Points :
429
Like :
88
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM
Bài viết :
5
Points :
10
Like :
1
Punbb
Xem lý lịch thành viên
Thông tin tác giả
avatar
MOD
Bài viết :
265
Points :
429
Like :
88
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM
Bài viết :
5
Points :
10
Like :
1
Punbb
Xem lý lịch thành viên
Thông tin tác giả
avatar
MOD
Bài viết :
265
Points :
429
Like :
88
Punbb
Cẩn thận
Status :
Giựt đẹp trai
Xem lý lịch thành viên
Thông tin tác giả
avatar
MEM
Bài viết :
5
Points :
10
Like :
1
Punbb
Xem lý lịch thành viên
Thông tin tác giả
Sponsored content
Bài viết liên quan
    Đang tải dữ liệu

Permissions in this forum:
Bạn không có quyền trả lời bài viết