Jquery와 유사한 웹 페이지 WeChat QR 코드 블록 스크롤 효과 특정 구현_jquery

첫 번째는 사용자 정의된 스크립트 메소드 속성 코드입니다.

코드 복사 코드는 다음과 같습니다.

/*
* 도크 광고 이미지 생성
*
* USAGE:
* $(selector).higo_plugins_ad({
* src:null, // 광고 이미지 경로
* closeSrc:null, // 이미지 경로 닫기
* href:"#", // 광고 이미지 링크 주소
* autoHide:true, // 자동 숨기기 여부
* hideSecond :10 ,              // 延迟隐藏秒数
 *      상단:20,                   // 距离顶부偏移고도
 *      레이아웃:"왼쪽",               // 默认图文位置：왼쪽 居左, 오른쪽 居右, 가운데 居中,
* 너비:100,                                                                                                   | =50)(IE)
* setPosition:function(left, top){ // 사용자 정의 디스플레이 위치를 예약하는 방법(아직 구현되지 않음)
* * return
* * } }
* })
*/


두 번째는 자세한 효과 구현입니다.

코드 복사 코드는 다음과 같습니다.

(function($){ 
    $.fn.ad = function(options){ 
        var lastScrollY= 0; 
        var czd = $(this); 
        var 설정 = $.extend({ 
            src:null,                   
            closeSrc:null,              
            href:"#",             autoHide:true,               
            hideSecond:10, 
            위치: "top ",             
            위쪽:20,     
            아래쪽: 20,                
            레이아웃:"왼쪽",               
           너비:100,                   
            높이: 100,                 
            불투명도: 0.5, 
            setPosition :function(왼쪽, 상단){ 
               return; 
           } 
       },options || {}); 

        if(settings.src && settings.closeSrc){      
            var imgEl = "
"; 
            var closeImgEl = ""; 

            $( this).append(imgEl closeImgEl); 

            $(this).css("position","absolute"); 
           if(settings.position=='top'){ 
               $ (this).css("top",settings.top "px"); 
            } else { 
              $(this).css("bottom",settings.bottom "px"); 
           } 
            $(this).css("opacity",settings.opacity); 
            $(this).css("filter","alpha(opacity="parseInt(settings.opacity * 100)  ")"); 

            스위치(settings.layout) { 
                케이스 "왼쪽": 
                  $(this).css("left","-100px"); 
                    휴식; 
               사례 '오른쪽': 
                   $(this).css("right","-100px"); 
                    휴식; 
               사례 "center": 
                   var left = (parseInt(window.screen.availWidth) -parseInt(settings.width))/2 "px"; 
                   $(this).css("left",left); 
                    휴식; 
               기본값: 
                   $(this).css("left","-100px"); 
                    휴식; 
            } 
        } else { 
            반환; 
        } 

        if(settings.autoHide) { 
            setTimeout("(function(){$('" $(this).selector   "').hide();})() ; ", parseint (settings.hidesecond) * 1000; // 别名不同导致事件驱动不一样 ： Scroll 与 与 onscroll $ (창) .bind ("scroll ", function () {
            var diffY; 
           if (document.documentElement && document.documentElement.scrollTop) 
              diffY = document.documentElement.scrollTop; 
          else if (document.body) 
                diffY = document.body .scrollTop 
                else { 
                   /*Netscape 항목*/ 
               }
                                                                                                             ~                                                 percent=Math.floor(percent);

if(settings.position=='top'){
var top = czd.css("top"); css("top", parsInt(top) 퍼센트 " px");
lastScrollY = 퍼센트;
czd.css("bottom", parseInt(top) - 퍼센트 "px"); 페이지 작성:


1. 자신이 정의한 JQuery를 가져와서 헤드 구성




코드 복사


코드는 다음과 같습니다.

<장식자:head /> 
         
       


이、写上主体body代码

复主代码 代码如下:

 
         

 

      <%@include file="/page/public/sideBar.jsp"%> 
     

 

       

 
           

 
                <%@include file="/page/public/top.jsp"%> 
           

 
           

 

                      

 

                    <장식자:몸 /> 

                      

 
                      

 

           

 
           

 
                <%@include file="/page/public/bottom.jsp"%>