zoukankan      html  css  js  c++  java
  • 百叶窗 蒙版 图层

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    *{
    margin:0;
    padding:0;
    }
    .box{
    margin:0 auto;
    600px;
    height: 436px;
    overflow: hidden;
    position: relative;
    }
    .box img{
    position: absolute;
    top:0;
    left:0;
    cursor: pointer;
    }
    .box img:nth-child(2){
    left: 100px;
    }
    .box img:nth-child(3){
    left: 200px;
    }
    .box img:nth-child(4){
    left: 300px;
    }
    .box img:nth-child(5){
    left: 400px;
    }
    .box img:nth-child(6){
    left: 500px;
    }
    .compare{
    370px;
    height: 436px;
    background: url("imasges/chanpin_image03.jpg");
    position: relative;
    margin-left: 100px;
    }
    .up{
    20px;
    height: 436px;
    background: rgba(230,230,200,0.2);
    border-left: 3px #000 solid;
    box-shadow:5px 5px 5px rgba(0, 0, 0, 0.6);
    margin-bottom: 20px;
    position: absolute;
    top:0;
    right:0;
    }
    .box2{
    1100px;
    margin: 0 auto;
    }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
    $(function () {
    $('.box img').mouseenter(function () {
    var index = $(this).index();
    $('.box img').each(function (i,el) {
    if(i<=index){
    $(el).stop(true).animate({
    'left':(i*48)+'px'
    },600)
    }else if(i>index){
    $(el).stop(true).animate({
    'left':((i-1)*48+360)+'px'
    },600)
    }
    })
    }).mouseleave(function () {
    $('.box img').each(function (i,el) {
    $(el).stop(true).animate({
    'left':i*100+'px'
    },100)
    })
    });

    // mask 蒙版
    $('.compare').mouseenter(function () {
    $(this).mousemove(function (event) {
    event=event||window.event;
    $('.up').css('width',(parseFloat($('.box2').css('margin-left'))+parseFloat($('.compare').css('margin-left'))+370)-event.pageX);
    })
    }).mouseleave(function () {
    $('.up').css('width','20px');
    })
    })
    </script>
    </head>
    <body>
    <div class="box">
    <img src="imasges/chanpin_image01.jpg" width="360px"/>
    <img src="imasges/chanpin_image02.jpg" width="360px"/>
    <img src="imasges/chanpin_image03.jpg" width="360px"/>
    <img src="imasges/chanpin_image04.jpg" width="360px"/>
    <img src="imasges/chanpin_image05.jpg" width="360px"/>
    <img src="imasges/chanpin_image06.jpg" width="360px"/>
    </div>
    <div class="box2">
    <div class="compare">
    <div class="up"></div>
    </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    【javascript】手写call,apply,bind函数
    http压缩 Content-Encoding: gzip
    【javascript】强大的CSS3/JS:帧动画的多种实现方式与性能对比
    【canvas】html5 canvas常用api总结(二)--图像变换API
    【canvas】html5 canvas常用api总结(一)--绘图API
    python的列表试用3-6
    UIImagePickerController获取照片的实现,添加overlay方法 (相机取景框)
    调试JDK1.8源码的方法
    多线程-Executor,Executors,ExecutorService,ScheduledExecutorService,AbstractExecutorService
    多线程-Fork/Join
  • 原文地址:https://www.cnblogs.com/xiaoxiongv1/p/8034652.html
Copyright © 2011-2022 走看看