菱形广告位

效果如图~ 鼠标悬停在左侧和右侧这6个链接时，会显示一个带提示文字的层。中间的两个链接无提示层。


浏览器前缀只写了webkit的，低版本IE未做js兼容，只是简单的排列。(好吧，一方面没什么确定的思路，不过我想应该是要在鼠标处于悬停时获取鼠标相对于菱形盒子的x,y坐标，求x/y的值来判断有没有超出盒子的范围。另一方面，看了下1号店的效果，觉得js兼容的效果不是很灵敏，干脆和产品商量一下，直接用css3了)

rotate之后，盒子的左边距和下边距，以及容器的内外边距都不是很好定，好在有Chrome控制台微调。
用到的css3的属性就2d旋转与2d缩放。
代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">

    <style type="text/css">

    body,div{
        padding: 0px;
        margin: 0px;
    }
    a,img{
        border:0;
    }

    .ad{
        width: 330px;
        height: 471px;
        float: left;
        overflow: hidden;
    }
    .wrap{
        float: left;
        position: relative;
        position: static\0/;
        width: 300px;
        margin: 50px;
        padding: 20px 0 0 20px;
        background-color: #999;
        z-index: 0;
        padding-top: 4px\0/;
        padding-bottom: 16px\0/;
        
    }

    .box2_wrap{
        position: absolute;
        top: 91px;
        margin-left: -70px;
        left: 50%;
        z-index: -1;
        position: static\0/;
        margin-left: 0\0/;
    }
        .box{
            float: left;
            width: 100px;
            height: 100px;            
            margin-right: 40px;
            margin-bottom: 40px;

            background-color: #fff;
            -webkit-transform:rotate(45deg);
            overflow: hidden;
            margin-bottom: 4px\0/;
            margin-right: 10px\0/;
            margin-left: 10px\0/;
        }
        .box2{
            background-color: #959;

        }
        .box .logo_w{
            display: inline-block;
            -webkit-transform:rotate(-45deg);
            
        }
        .box .tip{
            visibility: hidden;
            width: 100px;
            height: 100px;
            background-color: #f00;
            text-align: center;
            line-height: 100px;
            -webkit-transform:scale(1.5);
            position: absolute;
            top:0;
            left: 0;
            z-index: 1;
            
            
        }
        .box:hover .logo_w{
            position: relative;
        }
        .box:hover .tip{
            visibility: visible;

        }
    </style>
</head>
<body>
    <div class="ad">

        <div class="wrap">
            <a class="box" href="#">
                <span class="logo_w">
                    <img src="01.jpg" width="100px" height="100px;"/>
                    <span class="tip">一折</span>
                </span>
            </a>
            <a class="box" href="#">
                <span class="logo_w">
                    <img src="02.jpg" width="100px" height="100px;"/>
                    <span class="tip">二折</span>
                </span>
            </a>
            <a class="box" href="#">
                <span class="logo_w">
                    <img src="03.jpg" width="100px" height="100px;"/>
                    <span class="tip">三折</span>
                </span>
            </a>
            <a class="box" href="#">
                <span class="logo_w">
                    <img src="04.jpg" width="100px" height="100px;"/>
                    <span class="tip">四折</span>
                </span>
            </a>
            <a class="box" href="#">
                <span class="logo_w">
                    <img src="05.jpg" width="100px" height="100px;"/>
                    <span class="tip">二折</span>
                </span>
            </a>
            <a class="box" href="#">
                <span class="logo_w">
                    <img src="06.jpg" width="100px" height="100px;"/>
                    <span class="tip">三折</span>
                </span>
            </a>
            <div class="box2_wrap">
                <a href="#" class="box box2">
                    <span class="logo_w">
                        <img src="07.png" width="100px" height="100px;"/>
                    </span>
                </a>
                <a href="#" class="box box2">
                    <span class="logo_w">
                        <img src="08.png" width="100px" height="100px;"/>
                    </span>
                </a>
            </div>
        </div>

    </div>
</body>
</html>

 

posted on 2014-09-01 23:24  叫我钱了个浅  阅读(364)  评论(0)  编辑  收藏  举报

导航