zoukankan      html  css  js  c++  java
  • 边框逐渐显示效果

    公司最近有一个商城的项目,需要这效果,本来想偷懒在网上找一下有没有插件什么的用一下,然后没找到,好吧,只有靠自己想了。

    我的想法是在一个div中放4个div,然后将里面的4个div用position属性放在外面div的上左下右四个位置,然后用jquery的animate的方法,当鼠标移动到最外面的div上时4个位置的div按照顺序呢显示出来。当鼠标移出时,再根据鼠标在div上停留的时间来确定从哪一个位置开始反向执行动画。具体代码如下:

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{
    margin:0;
    padding:0;
    }
    .main{200px;height:200px;margin:100px auto;position: relative}
    .div{
    position: absolute;
    background-color: #000000;
    }
    .top{
    top: 0;
    left: 0;
    height: 2px;
    0;
    }
    .right{
    right: 0;
    top: 2px;
    2px;
    height: 0;
    }
    .bottom{
    bottom: 0;
    right: 2px;
    0;
    height: 2px;
    }
    .left{
    left: 0;
    bottom: 2px;
    2px;
    height: 0;
    }
    </style>
    </head>
    <body>
    <div class="main">
    <div class="top div"></div>
    <div class="right div"></div>
    <div class="bottom div"></div>
    <div class="left div"></div>
    </div>
    <script src="jquery-1.7.2.min.js"></script>
    <script>
    var time=1000;
    var hoverTime=0;
    $(".main").hover(function(){
    $(".div").stop();
    hoverTime=new Date();
    $(".top").animate({
    "200px"
    },time,function(){
    $(".right").animate({
    height:"198px"
    },time,function(){
    $(".bottom").animate({
    "198px"
    },time,function(){
    $(".left").animate({
    height:"196px"
    },time)
    })
    })
    })
    },function(){
    var nowTime=new Date();
    var howLong=nowTime.getTime()-hoverTime.getTime();
    console.log(howLong)
    if(howLong>3000){
    $(".div").stop();
    $(".left").animate({
    height:0
    },time,function(){
    $(".bottom").animate({
    0
    },time,function(){
    $(".right").animate({
    height:0
    },time,function(){
    $(".top").animate({
    0
    },time)
    })
    })
    })
    }else if(howLong<=3000&&howLong>2000){
    $(".div").stop();
    $(".bottom").animate({
    0
    },time,function(){
    $(".right").animate({
    height:0
    },time,function(){
    $(".top").animate({
    0
    },time)
    })
    })
    }else if(howLong>1000&&howLong<=2000){
    $(".div").stop();
    $(".right").animate({
    height:0
    },time,function(){
    $(".top").animate({
    0
    },time)
    })

    }else if(howLong>0&&howLong<=1000){
    $(".div").stop();
    $(".top").animate({
    0
    },time)
    }
    });

    </script>
    </body>
    </html>

    本人技术有限,希望又更好方法的人可以不吝指教一下:)

  • 相关阅读:
    Metasploit命令大全
    nmap所有参数详解
    Kali Linux 命令集
    十大编程算法助程序员走上大神之路
    新入行程序员需要知道的十个秘密
    浅谈c#枚举
    php 常用的系统函数
    php大型网站如何提高性能和并发访问
    【转】Oracle + PHP Cookbook(php oracle clob 长度超过4000如何写入)
    干货:小程序开发文档和设计指南要点详解
  • 原文地址:https://www.cnblogs.com/zaxxm/p/5299214.html
Copyright © 2011-2022 走看看