work——toolofna

于 2017-06-05 11:44:03 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： demo 涛痕世界 文章标签： javascript 实例 css jquery html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/iamcgt/article/details/72865021
版权
本文介绍了如何使用JavaScript和CSS创建图片翻转、图片标亮及滚动面板的效果。在图片翻转中，通过CSS的transform和transition实现动画过渡；图片标亮利用伪类:hover改变opacity和背景位置；滚动面板则通过计算滚动条和内容的联动比例，实现内容的平滑滑动。最后，作者分享了实现这些效果的心得体会。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果

图片翻转

这里写图片描述

图片标亮

这里写图片描述

滚动面板

这里写图片描述

图片翻转

分析

将图片先沿着Y轴旋转60度，然后加载页面后用JavaScript改变角度，实现翻转效果

思路

1、图片作为div的背景图片即可

<div id="work">
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
</div>

2、div旋转60度，设置transition实现动画过渡

transform: rotateY(60deg);
transition: transform 1s;

3、JavaScript改变角度

 $("#work div").css({"transform":"rotateY(0)"});

图片标亮

分析

为div设置伪类：hover，设置opacity为.5，当鼠标移动到div上时，opacity变为1，背景图片位置向上移动

思路

1、div设置伪类：hover

#work div:hover{
    opacity: 1;
    background-position: 0 -15px;
}

2、设置opacity和transition

    opacity: 0.4;
    transition: opacity .5s,background-position .5s;

滚动面板

分析

布局

（1）面板多个box并排排列

（2）下边有个滚动条，拉动滚动条会滑动

（3）拉动滚动条，顶部内容向左滑动

（4）滚动鼠标滚轮，同样实现滑动效果
这里写图片描述

联动

滚动条在底部滚动区域滑动的距离和总距离的比例和上边内容部分滑动的距离和总距离比例是完全相等的

内容滑动距离/内容可以滑动的总距离 = 滚动块滑动的距离/滚动条可以滑动的总距离

这里写图片描述

思路

1、多个div并排，下面有个滚动条

<div id="work">
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
</div>
<div class="scrollbar">
    <div></div>
</div>

2、自动设置滚动条长度

 var length = $("#work div").first().width()/$("#work").width()*$(".scrollbar").width();
    $(".scrollbar div").css("width",length);

3、声明一个联动的方法

 function move(dis){
        $(".scrollbar div").css("left",dis);
        //实现联动
        var botton_total = $(".scrollbar").width()-$(".scrollbar div").width();//内容可以滑动的总距离
        var top_total = $("#work").width()-$(".scrollbar").width();//滚动条可以滑动的总距离
         //内容滑动距离 = 滚动块滑动的距离/滚动条可以滑动的总距离*内容可以滑动的总距离
        var distance = (dis / botton_total)*top_total;
        $("#work").css("left",-distance);
        //判断距离
        if($(".scrollbar div").position().left<0){
            $(".scrollbar div").css("left",0);
            $("#work").css("left",0);
        }
        if($(".scrollbar div").position().left>($(".scrollbar").width()-$(".scrollbar div").width())){
            $(".scrollbar div").css("left",($(".scrollbar").width()-$(".scrollbar div").width()));
            $("#work").css("left",-top_total);
        }
    }

4、监听鼠标滚轮

var dis =0;
   if(window.location.pathname.indexOf("/Toolofna/work.html")!=-1){
        $(window).on("mousewheel",function(event){
            //监听滚轮的上下移动
            var value =  event.originalEvent.detail || event.originalEvent.wheelDelta;
            if(value>0){
                dis +=50;
            }else{
                dis-=50;
            }
            move(dis);
        });
    }

5、可以直接拉动滚动条

 var down = false;
    $(".scrollbar").on("mousedown",function(){
        down = true;
    });
    //一定要监听全页面的鼠标移动，如果只监听滚动条的，那么鼠标只能在滚动条区域滑动，用户体验不好
    $(document).on({
        "mouseup":function(){
            down = false;
        },
        "mousemove":function(event){
            if(down){
                //阻止鼠标默认事件
                event.stopPropagation();
                event.preventDefault();
                var x = event.clientX;
                var left = x - $(".scrollbar").offset().left-$(".scrollbar div").width()/2;
                move(left);
            }
        }
    });

源码

html

<div id="work">
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
    <div class="thumb mouse"></div>
</div>
<div class="scrollbar">
    <div></div>
</div>

css

/**
work
 */
#work{
    position: fixed;
    height: 622px;
    width: 4000px;
    padding-top: 100px;
    transform-style: preserve-3d;
}
#work div{
    float: left;
    opacity: 0.4;
    background-color: rgb(34, 34, 34);
    background-size: cover;
    transition: opacity .5s,background-position .5s,transform 1s;
    width: 400px;
    height: 100%;
    transform: rotateY(60deg);
}
#work div:hover{
    opacity: 1;
    background-position: 0 -15px;
}
#work div:nth-of-type(1){
    background-image: url("../images/work/eyesongigi_strip.jpg");
}
#work div:nth-of-type(2){
    background-image: url("../images/work/harden_strip.jpg");
}
#work div:nth-of-type(3){
    background-image: url("../images/work/litcar_strip.jpg");
}
#work div:nth-of-type(4){
    background-image: url("../images/work/sk2_strip.jpg");
}
#work div:nth-of-type(5){
    background-image: url("../images/work/walmartrec_strip.jpg");
}
#work div:nth-of-type(6){
    background-image: url("../images/work/cokestrip.jpg");
}
#work div:nth-of-type(7){
    background-image: url("../images/work/rei_strip.jpg");
}
#work div:nth-of-type(8){
    background-image: url("../images/work/ToolStrip.jpg");
}
#work div:nth-of-type(9){
    background-image: url("../images/work/hipchat_strip.jpg");
}
#work div:nth-of-type(10){
    background-image: url("../images/work/walmartrec_strip.jpg");
}
.scrollbar{
    width: 1536px;
    height: 12px;
    position: absolute;
    background-color: #000;
    left: 0;
    bottom: 0;
}
.scrollbar div{
    position: absolute;
    left: 0;
    top: 0;
    background-color: #e74c4c;
    height: 100%;
    width: 180px;

}

JavaScript

 /**
     * work
     */
    $("#work div").css({"transform":"rotateY(0)"});
    var length = $("#work div").first().width()/$("#work").width()*$(".scrollbar").width();
    $(".scrollbar div").css("width",length);
    var dis =0;
    if(window.location.pathname.indexOf("/Toolofna/work.html")!=-1){
        $(window).on("mousewheel",function(event){
            //监听滚轮的上下移动
            var value =  event.originalEvent.detail || event.originalEvent.wheelDelta;
            if(value>0){
                dis +=50;
            }else{
                dis-=50;
            }
            move(dis);
        });
    }
    function move(dis){
        $(".scrollbar div").css("left",dis);
        //实现联动
        var botton_total = $(".scrollbar").width()-$(".scrollbar div").width();
        var top_total = $("#work").width()-$(".scrollbar").width();
        var distance = (dis / botton_total)*top_total;
        $("#work").css("left",-distance);

        if($(".scrollbar div").position().left<0){
            $(".scrollbar div").css("left",0);
            $("#work").css("left",0);
        }
        if($(".scrollbar div").position().left>($(".scrollbar").width()-$(".scrollbar div").width())){
            $(".scrollbar div").css("left",($(".scrollbar").width()-$(".scrollbar div").width()));
            $("#work").css("left",-top_total);
        }
    }

    var down = false;
    $(".scrollbar").on("mousedown",function(){
        down = true;
    });
    $(document).on({
        "mouseup":function(){
            down = false;
        },
        "mousemove":function(event){
            if(down){
                //阻止鼠标默认事件
                event.stopPropagation();
                event.preventDefault();
                var x = event.clientX;
                var left = x - $(".scrollbar").offset().left-$(".scrollbar div").width()/2;
                move(left);
            }
        }
    });

心得

整个页面最主要的是滚动面板，涉及到一些基础的计算来实现元素之间的联动效果，并且涉及到了方法的封装以及事件的处理。原网站做了很多更好的细节处理，我也是凭着自己的思考模仿了这个网页，总的来说收获还是蛮多的

toolofna

http://toolofna.com/#!/work

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值