打印

发现个效果很不错

cane [楼主]

中级会员

帖子: 99
体力: 247
威望: 0

1^# 大中小发表于 2008-6-23 10:29

发现个效果很不错，鼠标停在商品的图片上效果就会出现，可剥不了，有哪位好心人帮忙剥出来让我学习学习？
地址:http://www.piao6.net/shop/index.html

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

kanghuanan

新手上路

帖子: 93
体力: 14
威望: 0
当前: 北京东城区
离线: 12 天

2^# 大中小发表于 2008-6-23 11:12

好象用CSS也能写出来..应该不是很难吧

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

phankfei

中级会员

帖子: 137
体力: 318
威望: 0
当前: 广东深圳
离线: 5 天

3^# 大中小发表于 2008-6-23 11:20

我也想知道```

用div，，onmoseover事件显示``但要跟随鼠标移动```不会`嘻``我也等着高手``````

TOP

activeTechPros 共享IT行业薪资信息 | 《疯狂的程序员》劲爆上市

cane [楼主]

中级会员

帖子: 99
体力: 247
威望: 0

4^# 大中小发表于 2008-6-23 11:54

要用到jquery的吧

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

comasp

高级会员

帖子: 393
体力: 707
威望: 0
离线: 26 天

专长 JS,JSP,UE

5^# 大中小发表于 2008-6-23 12:50

试试
http://www.cssrain.cn/demo/tooltips.html

不回帖好了,应该没有广告帖了吧。cssrain.cn

TOP

cane [楼主]

中级会员

帖子: 99
体力: 247
威望: 0

6^# 大中小发表于 2008-6-24 16:40

up!等高手

TOP

shuibozuoliu

随波逐流

初级会员

帖子: 173
体力: 138
威望: 0
当前: 广东深圳

专长 网页设计,UI

7^# 大中小发表于 2008-6-24 18:14

这个可以用CSS模拟，不过会出现一个问题，就是如果那个商品靠近浏览器右边的话会，那个说明的面板不会变为转向左，而是一直向右移动，浏览器就会出现横向滚动条。
如图，

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

TOP

lq917

初级会员

帖子: 53
体力: 115
威望: 0
离线: 18 天

专长 ASP,Access

8^# 大中小发表于 2008-6-24 22:09

楼主给的那个网站的不好

虽然看起来不错，但有严重问题，到屏幕边上会跑出去
这个是我见过最好用的：http://www.walterzorn.com/tooltip/tooltip_e.htm#docu

TOP

alimanman

初级会员

帖子: 85
体力: 194
威望: 0
当前: 上海浦东

专长 网页设计

9^# 大中小发表于 2008-6-24 22:29

在蓝色sgw2004的帮助下出来的效果。

不过貌似在FF下不好使，还请哪位再指点指点？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>JS</title>
<style type="text/css">
.lookMe{
	float:left;
	margin-right:10px;
	padding:5px;
	width:90px;
	color:#0099FF;
	cursor:pointer;
	background:#FFFADC;
	border:1px solid #CC6600;
}
.lookMe span{
	display:none;
	position:absolute;
	padding:5px;
	width:200px;
	color:#CC3300;
	background:#FFFADC;
	border:1px solid #CC6600;
         filter:alpha(opacity=0);
}
</style>
</head>
<body>
<div onmouseover="lookMe(this);" class="lookMe" onmousemove="mouseMove(event);">闷战120分钟点球战4-2 西班牙破魔咒淘汰意大利
<span>1.雅虎体育讯 北京时间6月23日,2008欧洲足球锦标赛在瑞士奥地利继续进行,在一场四分之一决赛中,西班牙队迎来了上届世界杯冠军意大利队,90分钟与加时赛双方均一球未进,在最终的点球大战中,西班牙4:2击败了对手,昂首挺进四强。</span>
</div>
<div onmouseover="lookMe(this);" class="lookMe" onmousemove="mouseMove(event);">闷战120分钟点球战4-2 西班牙破魔咒淘汰意大利
<span>2.在一场四分之一决赛中 </span>
</div>
<div onmouseover="lookMe(this);" class="lookMe" onmousemove="mouseMove(event);">闷战120分钟点球战4-2 西班牙破魔咒淘汰意大利
<span>3.2008欧洲足球锦标赛在瑞士奥地利继续进行,在一场四分之一决赛中,西班牙队迎来了上届世界杯冠军意大利队,90分钟与加时赛双方均一球未进,在最终的点球大战中,西班牙4:2击败了对手,昂首挺进四强。</span>
</div>
<script>
var span,timer1;
function lookMe(thisTag){
         span = thisTag.getElementsByTagName('span')[0];
	span.style.display = 'block';
         span.filters[0].opacity=0;
         timer1=setInterval("showme()",10)         
	thisTag.onmouseout = function(){
		span.style.display = 'none';
	}
}
function showme()
{
   if(span.filters[0].opacity==80){clearInterval(timer1)}
   span.filters[0].opacity++
}
function mouseMove(event){
	var xx=event.clientX + 5;
	var yy=event.clientY + 10;
	var obj = event.srcElement ? event.srcElement : event.target;
         var span=obj.getElementsByTagName("span")[0];
	span.style.left = xx + 'px';
	span.style.top = yy + 'px';
}
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

www.alimanman.com

TOP

magus163

修行的魔法师

金牌会员

帖子: 1526
体力: 3029
威望: 4
离线: 31 天

专长 JAVA,.NET,Perl

10^# 大中小发表于 2008-6-24 23:05

忘了哪抄的了

<HTML>
<HEAD>
<title>一种很酷的文字提示效果演示</title>
<style>
.tableBorder7{width:800;solid; background-color: #000000;}
TD{font-family: 宋体;font-size: 12px;line-height : 15px ;}
th{background-color: #f7f7f7;color: #000000;font-size: 12px;font-weight:bold;}
th.th1{background-color: #333333;}
td.TableBody7{background-color: #B1EA45;}
</style>
<script language="JavaScript">
//more javascript from http://www.51it.org

</script>
</HEAD>
<BODY>
<div title="醉别西楼醒不记，春梦秋云，聚散真容易。<br>斜月半窗还少睡。画屏闲展吴山翠。<br>衣上酒痕诗里字，点点行行，总是凄凉意。<br>红烛自怜无好计，夜寒空替人垂泪。">蝶恋花</div>
</BODY>
</HTML>

提示：您可以先修改部分代码再运行

修行的魔法师

TOP

huaronggg

新手上路

帖子: 14
体力: 36
威望: 0
离线: 146 天

11^# 大中小发表于 2008-6-25 02:14

菜鸟简单的写一下思路

提示：您可以先修改部分代码再运行

TOP

frankres

新手上路

帖子: 3
体力: 9
威望: 0
当前: 四川成都
离线: 34 天

12^# 大中小发表于 2008-6-25 10:05

引用:

原帖由 magus163 于 2008-6-24 23:05 发表
忘了哪抄的了
[html]

一种很酷的文字提示效果演示

.tableBorder7{width:800;solid; background-color: #000000;}
TD{font-family: 宋体;font-size: 12px;line-height : 15px ;}
th{background-colo ...

效果在FF里好用不！！感觉有用！

TOP

kevins3389

新手上路

帖子: 8
体力: 21
威望: 0
当前: 河南郑州
离线: 152 天

13^# 大中小发表于 2008-6-25 10:07

good

TOP

dingbo

新手上路

帖子: 55
体力: 37
威望: 0
当前: 重庆南岸
离线: 3 天

专长 网页设计,前端制作,ASP

14^# 大中小发表于 2008-7-14 11:17

10楼的,那个感觉对我有用呢,可在FF下面不行,
UP期待高手

不能超过10

TOP

csk83

新手上路

帖子: 6
体力: 18
威望: 0
当前: 重庆北碚
离线: 53 天

15^# 大中小发表于 2008-7-14 16:35

不知道这个效果是否适用。http://www.mlcq.org.cn/baidu/

TOP

cane [楼主]

中级会员

帖子: 99
体力: 247
威望: 0

16^# 大中小发表于 2008-7-14 19:07

果然不出所料，用到了jquery，那个时候没弄出来，今天终于弄出来了

，还得请高手多完善些
昨晚见到一个论坛上有个人嫌给的分少了就叫到“一分贴，懒得写”，真想踩了那人,有必要那么看重那分数嘛~~他还叫到“公鸡铁，楼主绝”，这种人看了还真不顺眼得很
多帮人少计较嘛~~~
今天又改了点地方，我打了包，看附件

[ 本帖最后由 cane 于 2008-7-15 08:42 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

o(∩_∩)o...

TOP

cane [楼主]

中级会员

帖子: 99
体力: 247
威望: 0

17^# 大中小发表于 2008-7-15 08:44

这么长时间了啊~~~终于解决了

o(∩_∩)o...

TOP

cane [楼主]

中级会员

帖子: 99
体力: 247
威望: 0

18^# 大中小发表于 2008-7-15 10:28

版主在吗？麻烦把16楼的和1楼的整一下

o(∩_∩)o...

TOP

kingwkb

初级会员

帖子: 27
体力: 59
威望: 0
离线: 4 天

19^# 大中小发表于 2008-7-15 13:23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>JS</title>
<style type="text/css">
.lookMe{
	float:left;
	margin-right:10px;
	padding:5px;
	width:90px;
	color:#0099FF;
	cursor:pointer;
	background:#FFFADC;
	border:1px solid #CC6600;
}
.lookMe span{
	display:none;
	position:absolute;
	padding:5px;
	width:200px;
	color:#CC3300;
	background:#FFFADC;
	border:1px solid #CC6600;
         filter:alpha(opacity=0);
}
</style>
</head>
<body>
<div onmouseover="lookMe(this);" class="lookMe" onmousemove="mouseMove(event);" onmouseout="mouseOut(this);">闷战120分钟点球战4-2 西班牙破魔咒淘汰意大利
<span>1.雅虎体育讯 北京时间6月23日,2008欧洲足球锦标赛在瑞士奥地利继续进行,在一场四分之一决赛中,西班牙队迎来了上届世界杯冠军意大利队,90分钟与加时赛双方均一球未进,在最终的点球大战中,西班牙4:2击败了对手,昂首挺进四强。</span>
</div>
<div onmouseover="lookMe(this);" class="lookMe" onmousemove="mouseMove(event);" onmouseout="mouseOut(this);">闷战120分钟点球战4-2 西班牙破魔咒淘汰意大利
<span>2.在一场四分之一决赛中 </span>
</div>
<div onmouseover="lookMe(this);" class="lookMe" onmousemove="mouseMove(event);" onmouseout="mouseOut(this);">闷战120分钟点球战4-2 西班牙破魔咒淘汰意大利
<span>3.2008欧洲足球锦标赛在瑞士奥地利继续进行,在一场四分之一决赛中,西班牙队迎来了上届世界杯冠军意大利队,90分钟与加时赛双方均一球未进,在最终的点球大战中,西班牙4:2击败了对手,昂首挺进四强。</span>
</div>
<script>
var span,timer1;
function lookMe(thisTag){
         span = thisTag.getElementsByTagName('span')[0];
	span.style.display = 'block';
         span.filters[0].opacity=0;
         timer1=setInterval("showme()",10)         
}
function mouseOut(thisTag){
        span = thisTag.getElementsByTagName('span')[0];
        span.style.display='';
}
function showme()
{
   if(span.filters[0].opacity==80){clearInterval(timer1)}
   span.filters[0].opacity++
}
function mouseMove(event){
	var xx=event.clientX + 5;
	var yy=event.clientY + 10;
	var obj = event.srcElement ? event.srcElement : event.target;
         var span=obj.getElementsByTagName("span")[0];
	span.style.left = xx + 'px';
	span.style.top = yy + 'px';
}
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

firefox没问题了

[ 本帖最后由 kingwkb 于 2008-7-15 13:24 编辑 ]

TOP

fuguojian1988

天天向网NET

银牌会员

帖子: 1046
体力: 2105
威望: 0
当前: 河南商丘

专长 网页设计,平面,前端制作

20^# 大中小发表于 2008-7-15 15:31

我常用CSS的span实现

一个人的路，还是一个人走！

TOP

tenado

中级会员

帖子: 136
体力: 248
威望: 0
离线: 70 天

21^# 大中小发表于 2008-7-16 15:48

很不错，再完善一点就更好了

TOP

zz1001

中级会员

帖子: 129
体力: 305
威望: 0
当前: 湖北宜昌

专长 网页设计,PHP

22^# 大中小发表于 2008-7-20 08:27

强，为何这些效果要结合JS呢？看来HTML不起太大作用

TOP

wanjvk2

初级会员

帖子: 62
体力: 140
威望: 0
离线: 5 天

23^# 大中小发表于 2008-9-26 10:53

很不错的效果.

QQ群:18712161

TOP

wawehi

新手上路

帖子: 43
体力: 12
威望: 0
离线: 67 天

24^# 大中小发表于 2008-9-26 17:58

回复 20# fuguojian1988 的帖子

css的span在IE中会有一个问题，如果你的tooltip包含在某层中，即使你设置了tooltip的z-index，也会被父对象的文字或图片掩盖，
哎，就是这个原因我才放弃了使用这种方式，而转入直接使用jquery

TOP

dictionarydxn

初级会员

帖子: 25
体力: 55
威望: 0

25^# 大中小发表于 2008-9-27 09:34

恩，值得参考

TOP

minepace

minepace

中级会员

帖子: 134
体力: 251
威望: 0
当前: 广东深圳
离线: 2 天

专长 网页设计

26^# 大中小发表于 2008-11-7 12:16

还真的挺管用的哦,收藏了

TOP

amu945

钻石会员

帖子: 1667
体力: 6326
威望: 47
当前: 重庆九龙坡

27^# 大中小发表于 2008-11-7 12:22

http://preview.zcool.com.cn/code/ggcode/081/
还是这个舒服。

http://www.yes028.com/vapor

TOP

hmj410

珞珈山下

中级会员

帖子: 271
体力: 495
威望: 0
当前: 湖北武汉
离线: 3 天

专长 网页设计,平面,策划

28^# 大中小发表于 2008-11-7 14:24

这个效果很简单的扫兴

蓝盾国际

TOP