仿筑龙网站首页

最新推荐文章于 2019-11-07 09:21:55 发布

BunnyMelody

最新推荐文章于 2019-11-07 09:21:55 发布

阅读量915

点赞数

文章标签： jQuery web javascrpit

本文链接：https://blog.csdn.net/viciousDear/article/details/45128467

版权

项目效果
这里写图片描述

更详细的项目文件及代码请访问链接:http://download.csdn.net/detail/viciousdear/8609725
项目中实现的动态效果有：
1》内容弹出悬浮显示
2》图片轮播
3》文字垂直翻滚
4》抽屉式折叠显示

项目实现过程中的收获：
①为实现内容弹出悬浮显示置于顶层，设置了弹出图片的z-index为1，即使弹出层图片的display已设为none，其覆盖的相应位置的元素仍然被置于其底层，导致被覆盖元素的动画不能触发执行，后动态设置了弹出图片的z-index为-1后解决该问题。
②实现抽屉式折叠显示时易导致一部分内容下滑，设置整个显示位置的position为absolute,overflow:hidden可限制抽屉式折叠显示的空间固定。
③因IE10以上版本不支持filter:gray(1)的CSS设置，图片灰度在IE10中没有得到验证，本首页通过的浏览器有：Firefox 37.0.1，chrome 41.0.2272.118 m，在IE11中除图片灰度不能正常显示其他没有问题
④抽屉式折叠还存在的问题有：只有当当前图片完成就位，其对应的文字才得以显示，文字不能实现动态滑动显示

使用到的重要文件
【滚动.js】
这里写图片描述

$(document).ready(function(){
    function itemShow(){
            $("#feature li.current a span").stop();
            $("#feature li.current a span").css({top:'0px'});
            $("#feature li.current a span").animate({top: "-55px" }, "fast");
    }
    function itemHide(){
        $("#feature li.current a span").stop();
        $("#feature li.current a span").css({top:'-55px'});
        $("#feature li.current a span").animate({top: "0px" }, "fast");
        $("#feature li.current").removeClass("current");
    }

    $("#feature li").hover(
        function(){
            //$('.textClass').val($(this).find('span').html());
            $(this).addClass("current");
            itemShow();
        }
        ,
        function(){
            itemHide();
        }
    );

});

【筑龙.js】
这里写图片描述



function showSubView(elemFatherId,elemSonId,animationSpeed,topStart,topEnd,type){
    $('#'+elemSonId).stop();
    topStart = getYTop(elemFatherId) + topStart +'px';
    topEnd = getYTop(elemFatherId) - topEnd + 'px';
    var QRCode0X;
    if(type == 0){
        QRCode0X = getXLeft(elemFatherId)+getNumFromStringCarryPX($('#'+elemFatherId).css('width'))+'px';
    }else if(type == 1){//覆盖到原图层
        QRCode0X = getXLeft(elemFatherId)+getNumFromStringCarryPX($('#'+elemFatherId).css('width'))/2
            - getNumFromStringCarryPX($('#'+elemSonId).css('width'))/2 +'px';
    }
    $('#'+elemSonId).css({
        'z-index':'1',
        'top': topStart,
        'left': QRCode0X,       
        'opacity' : 0, 
        'visibility' : 'visible',
        'display':'block'
        });//$('#'+elemSonId).delay(animationSpeed/3).animate({
    $('#'+elemSonId).animate({//.delay():设置一个延时来推迟执行队列中之后的项目。
        "top":topEnd,
        "opacity" : 1
    },animationSpeed);  
}

function hideSubView(elemFatherId,elemSonId,animationSpeed,topStart,topEnd,type){
    $('#'+elemSonId).stop();
    topStart = getYTop(elemFatherId) - topStart +'px';
    topEnd = getYTop(elemFatherId) + topEnd + 'px';
    if(type == 0){
        QRCode0X = getXLeft(elemFatherId)+getNumFromStringCarryPX($('#'+elemFatherId).css('width'))+'px';
    }else if(type == 1){
        QRCode0X = getXLeft(elemFatherId)+getNumFromStringCarryPX($('#'+elemFatherId).css('width'))/2
            - getNumFromStringCarryPX($('#'+elemSonId).css('width'))/2 +'px';
    }//$('#'+elemSonId).delay(animationSpeed/3).animate({
        $('#'+elemSonId).animate({//.delay():设置一个延时来推迟执行队列中之后的项目。
            "top":topEnd,
            'left': QRCode0X,
            "opacity" : 0,
            'visibility' : 'hidden',
            'display':'none',
            'z-index':'-1',
        },animationSpeed);

}

//获取元素的纵坐标 
function getYTop(e){ 
    var offset=$('#'+e).offset().top;
    if(e.offsetParent!=null) 
        offset+=getYTop($('#'+e).offset().offsetParent);
    return offset;
} 
//获取元素的横坐标 
function getXLeft(e){ 
    var offset=$('#'+e).offset().left;
    if(e.offsetParent!=null) 
        offset+=getXLeft($('#'+e).offset().offsetParent);
    return offset;
} 

function getNumFromStringCarryPX(strSource){
    if(strSource.indexOf("px") > 0){
        return parseInt(strSource.split("px")[0]);
    }else{
        return parseInt(strSource);
    }
}

【大图切换.js】

var smallIDList;                                    //圈圈代表的ID列表
var focusList;                                      //圈圈所在的列表

function getId(id){
    return document.getElementById(id);
}

function moveElement(elmentId, finalX, finalY, interval){
    if(!document.getElementById)
        return false;
    if(!document.getElementById(elmentId))
        return false;

    var elem = document.getElementById(elmentId);

    if(elem.movement){                          //若当前elementId有活动, 使其停止
        clearTimeout(elem.movement);
    }
    if(!elem.style.left){                       //到达最左端
        elem.style.left = "0px";
    }
    if(!elem.style.top){
        elem.style.top = "0px";
    }

    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);

    if(xpos == finalX && ypos == finalY)
        return true;
    if(xpos < finalX){
        var dist = Math.ceil((finalX-xpos)/10);
        xpos+=dist;
    }
    if(xpos > finalX){
        var dist = Math.ceil((xpos-finalX)/10);
        xpos-=dist;
    }
    if(ypos < finalY){
        var dist = Math.ceil((finalY-ypos)/10);
        ypos+=dist;
    }
    if(ypos > finalY){
        var dist = Math.ceil((ypos-finalY)/10);
        ypos-=dist;
    }

    //alert(xpos);

    elem.style.left = xpos + 'px';
    elem.style.top = ypos + 'px';

                                            //设置重复的定时器在短时间内(如5毫秒)不断刷新文职, 结果表现为图片移动
    var repeat = "moveElement('"+elmentId+"',"+finalX+","+finalY+","+interval+")";
    elem.movement = setTimeout(repeat,interval);
}


function clearCurrentImageTag(){            /*清空下方小图片的“current”位置标示*/
    for(var i=0; i<focusList.length; i++){
        focusList[i].className='';
        smallIDList[i].background="silver";
        smallIDList[i].width='10px';
        smallIDList[i].height='10px';
    }
}

function focusChange(){                     /*点击圆圈图片使之滚动*/
    for(i=0; i<focusList.length; i++){
        focusList[i].onclick=function(){
            var index = findIndex(this);
            moveElement('mainImage',0,index*(-490),5);
            clearCurrentImageTag();
            focusList[index].className='currentImage';
            smallIDList[index].background='white';
            smallIDList[index].width='13px';
            smallIDList[index].height='13px';
        }
    }

    moveElement('mainImage',0,0,5);         //初始化圈圈
    clearCurrentImageTag();
    focusList[0].className='currentImage';
    smallIDList[0].background='white';
    smallIDList[0].width='13px';
    smallIDList[0].height='13px';
}

function findIndex(elem){
    for(i=0; i<focusList.length;i++){
        if(focusList[i]==elem)
           return i;
    }
    return -1;
}

setInterval('autoFocusChange()',5000);  

function autoFocusChange(){
    for(i=0; i<focusList.length; i++){
        if(focusList[i].className == 'currentImage')
            var currentNum=i;               //记录要显示的主图
    }
    currentNum = (currentNum+1)%(focusList.length);
    moveElement('mainImage',0,currentNum*(-490),5);
    clearCurrentImageTag();     
    focusList[currentNum].className='currentImage';
    smallIDList[currentNum].background='white';
    smallIDList[currentNum].width="13px";
    smallIDList[currentNum].height="13px";
}

window.onload=function(){
    focusList = getId('smallImage').getElementsByTagName('li');
    smallIDList = [(document.getElementById('circle1')).style,(document.getElementById('circle2')).style,
    (document.getElementById('circle3')).style,(document.getElementById('circle4')).style];

    focusChange();
}

【客服通.js】
这里写图片描述

(function($){
    $(document).ready(function(){
        customeServiceShowFlag = false;

        $('#customServiceFather').hover( function(){ customeServiceShowFlag = true; var leftPosition = getXLeft('customServiceFather')+getNumFromStringCarryPX($('#'+'customServiceFather').css('width'))/2 - getNumFromStringCarryPX($('#'+'customServiceSon').css('width'))/2 +'px'; var topPositionStart = parseFloat(getYTop('customServiceFather') + 20) + 'px'; var topPositionEnd = parseFloat(getYTop('customServiceFather')) + 'px'; $('#customServiceSon').css({ 'display':'block', 'left':leftPosition, 'top':topPositionStart, 'opacity' : 0, 'visibility' : 'visible' }); $('#customServiceSon').animate({ 'top':topPositionEnd, 'opacity' : 1 }); }, function(){ customeServiceShowFlag = false; setTimeout(function(){ if(customeServiceShowFlag == false){ $('#customServiceSon').css({'display':'none'}); } },500);  });

        $('#customServiceSon').hover( function(){ customeServiceShowFlag = true; }, function(){ $('#customServiceSon').css({'display':'none'}); });

    });

    function getXLeft(e){ 
        var offset=$('#'+e).offset().left;
        return offset;
    } 

    function getYTop(e){ 
        var offset=$('#'+e).offset().top;
        if(e.offsetParent!=null) 
            offset+=getYTop($('#'+e).offset().offsetParent);
        return offset;
    } 

    function getNumFromStringCarryPX(strSource){
    if(strSource.indexOf("px") > 0){
        return parseInt(strSource.split("px")[0]);
    }else{
        return parseInt(strSource);
    }
}

})(jQuery);

【折叠.js】
这里写图片描述

(function($){
    var pre;
    var cur;

    function itemShowDrawer(){
        $(".current").stop();
        pre.stop();

        cur.animate({//cur.delay(100).animate, .delay():设置一个延时来推迟执行队列中之后的项目。 'width':'300px' },300); 
        pre.animate({ 'width':'95px' },300);
    }

    $(document).ready(function(){
        pre = cur = $($('.imageAndText')[0]);
        cur.addClass('current');
        cur.css({ 'width':'300px' });
        $('.imageAndText').hover( function(){ if($(this)[0] != cur[0]){ pre=cur; pre.removeClass('current'); cur=$(this); cur.addClass("current"); itemShowDrawer(); } } ); 
    });

})(jQuery);

BunnyMelody

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿筑龙网站首页

项目效果更详细的项目文件及代码请访问链接:http://download.csdn.net/detail/viciousdear/8609725 项目中实现的动态效果有： 1》内容弹出悬浮显示 2》图片轮播 3》文字垂直翻滚 4》抽屉式折叠显示项目实现过程中的收获： ①为实现内容弹出悬浮显示置于顶层，设置了弹出图片的z-index为1，即使弹出层图片的display已设为none，
复制链接

扫一扫