菱形广告位

效果如图~ 鼠标悬停在左侧和右侧这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>
时间: 09-01

菱形广告位的相关文章

Android 设计一个菱形形状的Imageview组件.

网上没有资料,特来请教下大神 Android 设计一个菱形形状的Imageview组件. >> android 这个答案描述的挺清楚的:http://www.goodpm.net/postreply/android/1010000007107851/Android设计一个菱形形状的Imageview组件.html

题目:打印出如下图案(菱形)

×× ×××××× ×××××××××× ×××××× ×× class HomeWork0604{public static void main (String[] args){int i,j,k;for(i=0;i<=3;i++) //控制前三行 { for(j=0;j<(2*(3-i));j++) //控制前三行空格System.out.print(" ");for(k=0;k<(4*i-2);k++) //控制前三行* System.out.print(&qu

C++之菱形继承

当我们谈C++时,我们谈些什么? 封装,继承,多态.这是C++语言的三大特性,而每次在谈到继承时我们不可避免的要谈到一个很重要的问题--菱形继承. a.菱形继承是什么 如上图,菱形继承即多个类继承了同一个公共基类,而这些派生类又同时被一个类继承.这么做会引发什么问题呢,让我们来看一段代码吧! #include<iostream> using namespace std; class Base { protected: int _base; public: void fun() { cout &

【C语言】用循环语句输出菱形

//用循环语句输出菱形 #include <stdio.h> int main() { int i,j; for(i=0;i<=3;i++) //上4行 { for(j=0;j<=3;j++) //上4行的左边 { if(i+j<=2) printf(" "); else printf("*"); } for(j=4;j<=6;j++) //上4行的右边 { if(j-i>=4) printf(" ");

1-1-09:字符菱形

09:字符菱形 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB 描述 给定一个字符,用它构造一个对角线长5个字符,倾斜放置的菱形. 输入 输入只有一行, 包含一个字符. 输出 该字符构成的菱形. 样例输入 * 样例输出 * *** ***** *** * #include<stdio.h> int main() { char a; scanf("%c",&a); int i,j,s; for( i=1;i<=3;i++) { f

java字符串,包,数组及空心正方形,菱形的实例

一.数组:相同类型的多个对像引用类型:所有的类,接口,数组,int[] ints(变量名) = new int[3]new:指的是在内存空间重新开辟一块区域 String s1 = "abc"; String s2 = "abc"; System.out.println(s1==s2); String s3 = new String("abc"); String s4 = new String("abc"); System.o

用JAVA 的for循环输出 菱形

public class For{ public static void main(String[] args){ //首先.把菱形看成上下两部分,上五下四,所以,第一个for循环有5次,第二个for循环有4次 for( int i = 1; i <= 5; i++){ //将空格和*分开看,看" "的变化i=1时,它是4,2的时候是3,找规律 for( int j = 1; j <= 5-i ; j++){ System.out.print(" ");

杨辉三角实例菱形实例

杨辉三角实例 public class Hui { public static void main (String [] args){ int [][] a =new int [10][10]; for(int i=0;i<a.length;i++){ for(int j=0;j<=i;j++){ if(j==0||i==j){ System.out.print(" "+(a[i][j]=1)); }else {a[i][j]=a[i-1][j-1]+a[i-1][j];

使用for循环打印矩形和三角形、菱形、空心菱形

打印矩形 **************************************************************************************************** public class Demo3_712 { public static void main(String args[]){ for(int i=1;i<=10;i++){ //控制行 for(int j=1;j<=10;j++){ //控制列 System.out.print(&