首页 > 代码库 > 菱形广告位
菱形广告位
效果如图~ 鼠标悬停在左侧和右侧这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>
菱形广告位
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。