Eternal Community
Welcome to Eternal Community.
Please LOGIN In or REGISTER.
Thanx.
Eternal Community
Welcome to Eternal Community.
Please LOGIN In or REGISTER.
Thanx.
Eternal Community
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.


 
AcasaAcasa  CăutareCăutare  ÎnregistrareÎnregistrare  ConectareConectare  



• Regula 1.
• Regula 2.
• Regula 3.
• Regula 4.
• Regula 5.






Scroll to top folosind jQuery

Membru-LZ: Baietel[MD]

Baietel[MD]
Membru Level II

Posts Posts : 394
Birthday Birthday : 03/03/1997
Age Age : 25
Location Location : Republic Of Moldova (Chisinau)
Job/hobbies Job/hobbies : Web-Master,School
Humor Humor : Gou Gou Gou !

Scroll to top folosind jQuery Empty



Scroll to top folosind jQuery Empty
MesajSubiect: Scroll to top folosind jQuery Scroll to top folosind jQuery EmptyMar Mar 15, 2011 12:18 am

Acesta foloseste jQuery care face in asa fel incat cand dati click pe o imagine (sageata) pagina sa derula nu imediat, ci va aluneca
cum s-ar zice, pana ajunge la capatul paginii, iar cand ajungeti la
capatul pagini imaginea va disparea in ceata. O demonstratie aveti aici (dati in josul paginii pentru a vedea efectul).

Afisati acest cod:

Cod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Intrati in Start › Run › Si scrieti notepad

Copiati codul de mai jos si adaugati-l in notepad-ul deschis:

Cod:
//** jQuery Scroll to Top Control script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** Available/ usage terms at http://www.dynamicdrive.com (March 30th, 09')
//** v1.1 (April 7th, 09'):
//** 1) Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead.
//** 2) Fixes scroll animation not working in Opera.


var scrolltotop={
  //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
  //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
  setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
  controlHTML: '<img src="imagine.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
  controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
  anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

  state: {isvisible:false, shouldvisible:false},

  scrollup:function(){
      if (!this.cssfixedsupport) //if control is positioned using JavaScript
        this.$control.css({opacity:0}) //hide control immediately after clicking it
      var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
      if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
        dest=jQuery('#'+dest).offset().top
      else
        dest=0
      this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
  },

  keepfixed:function(){
      var $window=jQuery(window)
      var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
      var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
      this.$control.css({left:controlx+'px', top:controly+'px'})
  },

  togglecontrol:function(){
      var scrolltop=jQuery(window).scrollTop()
      if (!this.cssfixedsupport)
        this.keepfixed()
      this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
      if (this.state.shouldvisible && !this.state.isvisible){
        this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
        this.state.isvisible=true
      }
      else if (this.state.shouldvisible==false && this.state.isvisible){
        this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
        this.state.isvisible=false
      }
  },
 
  init:function(){
      jQuery(document).ready(function($){
        var mainobj=scrolltotop
        var iebrws=document.all
 
        mainobj.cssfixedsupport=!iebrws || iebrws &&
document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not
 IE or IE7+ browsers in standards mode
        mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
        mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
 
          .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute',
 bottom:mainobj.controlattrs.offsety,
right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
            .attr({title:'Scroll Back to Top'})
            .click(function(){mainobj.scrollup(); return false})
            .appendTo('body')
 
        if (document.all && !window.XMLHttpRequest &&
mainobj.$control.text()!='') //loose check for IE6 and below, plus
whether control contains any text
         
 mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to
require an explicit width on a DIV containing text
        mainobj.togglecontrol()
        $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
            mainobj.scrollup()
            return false
        })
        $(window).bind('scroll resize', function(e){
            mainobj.togglecontrol()
        })
      })
  }
}

scrolltotop.init()
Inlocuiti din cod imagine.png
cu link-ul imaginii pe care ati ales-o, salvati fisierul ca .js si
uploadati-l. Cei care doresc imaginea cu sageata folosita in exemplu:

Scroll to top folosind jQuery Arrow14

Daca nu stiti sa uploadati un fisier .js, cititi acest tutorial.

Apoi afisati urmatorul cod:
Cod:

<script type="text/javascript" src="scrolltopcontrol.js"></script>
Inlocuiti scrolltopcontrol.js cu link-ul fisierului .js pe care l-ati uploadat si am finalizat.

Sursa: http://www.dynamicdrive.com/ | Tradus de Wisdom
















Admin Panel
Design and coded by eTn Team
creeaza un forum | © phpBB | Forum gratuit de suport | Semnaleaza un abuz | Discuții recente