10
22
2011
4

js&css无图片实现tip提示效果 学习总结

<div class="tip">
   Tips Test<br/>Hello Tips!
  <span class="tip-out">
     <span class="tip-in"></span>
  </span>
</div>
.tip{
/*注意边框的颜色和背景色很重要!*/
 border:6px solid gray;
 background-color:skyblue;
/*宽和高根据需要设置,ps:需要配合tip-top和tip-in位置来进行设置!*/
 width:420px;
 height:420px;

/*下面仅仅是对tips里面内容的设置,so可以说不相关!*/
 line-height:210px;
 font-weight:bold;
 text-align:center;
}
 .tip-out,.tip-in{
/*首先设置边框宽度(需要经过计算过!),然后设置其颜色为透明:这个很重要。
 至于边框的样式可以自己调试修改下看效果如何,因为我这个没怎么测试
*/
 border:100px solid transparent;
/*然后设置上边框,主要是设置颜色
 颜色跟tips内颜色一致,这个就是tips下面的那个角,所以要一致才行
*/
 border-top-color:skyblue;
 position:absolute;

/*这个的作用是将span对象呈递为内联对象,但是对象的内容作为块对象呈递。
旁边的内联对象会被呈递在同一行内
其实这个在这边的作用不大,如果将span改为div,那么这个就不需要设置了。
更确切的说这个其实是不用写的,因为貌似将一个
对象设置为position:absolute后,这个对象就成了块级元素了,
so其实这个可以去掉。当然作为学习,so放在这边了!
最后发现的一个问题是:块级元素默认是占用整个屏幕宽度的(当然可以设置
其宽&高为0),但如果设置了为absolute的话,其边框内部的空间就默认
为0*0了(如果没有放内容),这就是为什么要改为块级元素的原因了。
*/
 display:inline-block;/*可选项目,其实不需要的了……*/
}


/*下面是分别设置tip-out,tip-in的位置以便组合成tips下的角,
然后设置tip-out的颜色为tips的边框色,以衔接tips的边框*/
.tip-out{
  border-top-color:gray;
  top:440px;
 left:40px;
}
.tip-in{
 top:-110px;
 left:-100px;
}

由于时间问题,先上代码!!以后在进行注解!当作是复习吧!反正是通过边框来实现的。

分析:

   原本我以为是通过border-radius来实现tips上的尖角效果的,但是发现border-radius设置的再大,最终就变成了一个很圆的圆而已……

  后来找了 js无图片实现tip提示效果 3K完美搞定 这个例子后才知道其原理(不过可能还有别的实现方法吧!呵呵,学无止尽,方法也有很多的吧!),主要还是通过边框来实现的。

 其中最重要的一点就是,首先不能为行内元素而是要块级元素,然后就是绝对定位方式(不占用原来的空间,然后可以任意定位),最后就是设置边框了(原理所在)。主要的两句是

 border:100px solid transparent;
 border-top:100px solid skyblue;

首先就是要设置所有边框为透明,然后设置需要显示的边框&颜色。其实主要是为了显示一个三角形出来,然后两个三角形进行叠加后就能出现所需要的效果了!

那么三角形是如何出现的呢?首先一个条件就是边框内部的高&宽为0!!不然不会出现尖尖的角的!因为由于内部空间为0,所以四条边框重叠了,然后进行透明&不透明设置(如上设置)后,就能出现三角形了,因为举例来说上边框&其相邻的左边框在交界处是以对角线来划分作为分界线的,所以在设置不同颜色的时候会有尖角出现!这个的测试代码如下!

<div></div>

<style>
div{
 height:0px;width:0px;
/*display:inline-block;另一种选择*/

 border-style:solid;
 border-width:100px;
 border-left-color:#666;
 border-top-color:#444;
 border-right-color:#222;
 border-bottom-color:#000;
}
</style>

效果如下

 
由于上面的tips测试代码的宽&高太大,不好演示,所以我做了调整,测试代码如下,很小了,这个也没有计算的太好,所以有点不均匀(貌似在ff下显示上回有点问题,有些郁闷)
 

Hello Tips!
 

鼠标移到这边来!

 

终于写完了,虽然不是很美观,但是学习了,貌似图片也许是不错的选择吧!

Category: Web设计 | Tags: javascript css | Read Count: 4205
Avatar_small
λ 说:
2011年10月23日 01:47

沒附上例子……

我看主要就是transparent和inline-block這兩個東東要解釋了吧?

Avatar_small
wind 说:
2011年10月23日 13:20

@λ: 慢慢来,附上的代码就是我自己写的测试例子啊!! 是根据我前面发的那个文章来写的测试例子啦! 不着急,我等会就解释下!

Avatar_small
λ 说:
2011年10月26日 12:34

@wind: -_-...感觉分析之前的很难一下看懂,先把下面的三角形效果的原理放到前面说比较好。

Avatar_small
λ 说:
2012年3月28日 19:42

这篇文章有说弄三角形的,只设左右和底部的颜色就可以了
http://coolshell.cn/articles/6913.html


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter

Host by is-Programmer.com | Power by Chito 1.3.3 beta | Theme: Aeros 2.0 by TheBuckmaker.com