请选择进入手机版 | 继续访问电脑版

收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

蓝色理想最新研发动态 用悬赏三天解决问题解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › 超酷的图片轮换渐变效果来自腾讯

发新帖

查看: 20878|回复: 67

超酷的图片轮换渐变效果来自腾讯 [复制链接]

henter　楼主

Henter

帖子: 236
体力: 927
威望: 0
居住地: 广东省广州市

发表于 2007-10-7 23:05:43 |显示全部楼层

刚刚在腾讯女性频道上看到一个很酷的图片渐变轮换效果·····于是乎····抠下来了···分享···

<style type="text/css">
.woon{border:1px solid #fff;}
.wooff{border:1px solid #ffffff;filter:progid:DXImagetransform.Microsoft.Alpha(style=1,opacity=1500,finishOpacity=1);}
</style>

<script language="JavaScript" type="text/JavaScript">
<!--
window.onerror = function(){return true}

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
<table width=252 border=0 align=center cellPadding=0 cellSpacing=0  background="http://img1.qq.com/lady/pics/3931/3931550.jpg">
    <tr>
      <td height="470" align="center">
        <div id=fc style="filter:progid:DXImagetransform.Microsoft.GradientWipe(duration=3,gradientSize=0.5,motion=forward ); WIDTH:240px; HEIGHT:454px; border:1px solid #D85C8A">
          <div style="display:block"><A 
                  href="http://lady.qq.com/a/20071007/000003.htm" target=_blank><img onmouseover=clearAuto(); 
                  onmouseout=setAuto() height=454 
                  src="http://mat1.qq.com/lady/images/index/2007/10/07/hot1.jpg" width=240 border=0></A></div>
          
        <div style="display: none"><a href="http://lady.qq.com/a/20071007/000009.htm" target="_blank"><img onmouseover=clearAuto(); 
                  onmouseout=setAuto() height=454 
                  src="http://mat1.qq.com/lady/images/index/2007/10/07/hot2.jpg" width=240 border=0></a></div>
          
        <div style="display: none"><A href="http://lady.qq.com/a/20071007/000005.htm" target=_blank><img onmouseover=clearAuto(); 
                  onmouseout=setAuto() height=454 
                  src="http://mat1.qq.com/lady/images/index/2007/10/07/hot3.jpg" width=240 border=0></A></div>

<div style="display: none"><a href="http://lady.qq.com/a/20071007/000006.htm" target=_blank><img onmouseover=clearAuto(); 
                  onmouseout=setAuto() height=454 
                  src="http://mat1.qq.com/lady/images/index/2007/10/07/hot4.jpg" width=240 border=0></a></div>
      </div></td>
    </tr>
    <tr>
      <td height=99 valign="top"> <table border=0 align=center cellPadding=0 cellSpacing=1 id=num>       
          <tr>
             
          <td class=woon onmouseover=clearAuto();onclick=Mea(0); onmouseout=setAuto()
                           ><img src="http://mat1.qq.com/lady/images/index/2007/10/07/hot01.jpg" width="57" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000003.htm','','')"></td>
             
          <td class=wooff onmouseover=clearAuto(); 
                            onclick=Mea(1); onmouseout=setAuto()
                           ><img src="http://mat1.qq.com/lady/images/index/2007/10/07/hot02.jpg" width="57" height="90" border="0" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000009.htm','','')"></td>

<td class=wooff onmouseover=clearAuto(); 
                            onclick=Mea(2); onmouseout=setAuto() 
                            ><img src="http://mat1.qq.com/lady/images/index/2007/10/07/hot03.jpg" width="57" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000005.htm','','')"></td>
             
          <td class=wooff onmouseover=clearAuto(); 
                            onclick=Mea(3); onmouseout=setAuto() 
                           ><img src="http://mat1.qq.com/lady/images/index/2007/10/07/hot04.jpg" width="57" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000006.htm','','')"></td>
             </td>
          </tr>
      
      </table>

<script> 
var n=0;
var showNum = document.getElementById("num");
function Mea(value){
	n=value;
	setBg(value);
	plays(value);
	}
function setBg(value){
	for(var i=0;i<4;i++)
   if(value==i){
		showNum.getElementsByTagName("td")[i].className='woon';
		} 
	else{	
		showNum.getElementsByTagName("td")[i].className='wooff';
		}  
	} 
function plays(value){
	with (fc){
		filters[0].Apply();
		for(i=0;i<4;i++)i==value?children[i].style.display="block":children[i].style.display="none"; 
		filters[0].play(); 		
		}	
}
function clearAuto(){clearInterval(autoStart)}
function setAuto(){autoStart=setInterval("auto(n)", 5000)}
function auto(){
	n++;
	if(n>3)n=0;
	Mea(n);
} 
function sub(){
	n--;
	if(n<0)n=3;
	Mea(n);
} 
setAuto(); 
</script>

</body>
</html>

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

n

http://wuyouzs.com

西部数码顶级域名注册商39元抢注！

使用道具举报

binghexijian　

帖子: 209
体力: 825
威望: 0
居住地: 福建省泉州市

发表于 2007-10-7 23:15:35 |显示全部楼层

不错哦。。呵呵。。支持一下，谢谢分享

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

ime　

帖子: 432
体力: 1471
威望: 2
居住地: 浙江省温州市

发表于 2007-10-8 10:45:32 |显示全部楼层

不错哦！就是速度稍微慢了点！

上品流行 http://shop57093577.taobao.com

使用道具举报

巴山夜雨　

帖子: 37
体力: 21
威望: 0

发表于 2007-10-8 12:40:59 |显示全部楼层

在FF下无效，呵

使用道具举报

初级会员 

帖子: 40
体力: 125
威望: 0
居住地: 天津市河东区

发表于 2007-10-8 12:43:54 |显示全部楼层

IE中能出来就完了。。我是支持单浏览器支持的。。适用于功能开发。。

使用道具举报

坦克

帖子: 264
体力: 492
威望: 0
居住地: 河南省平顶山市

发表于 2007-10-8 12:44:16 |显示全部楼层

不错,也发现在FF下无效

使用道具举报

坦克

帖子: 264
体力: 492
威望: 0
居住地: 河南省平顶山市

发表于 2007-10-8 12:46:42 |显示全部楼层

不错不错!
发现4张图,第1张鼠标移上去不点,上面的图马上转换成它了,其它的要点击才能马上转换

使用道具举报

黑仔

帖子: 363
体力: 413
威望: 0
居住地: 海南省海口市

发表于 2007-10-8 14:12:21 |显示全部楼层

效果不错，学习

使用道具举报

蓝蓝的神仙

帖子: 1052
体力: 5994
威望: 3
居住地: 上海市闵行区

发表于 2007-10-8 14:52:01 |显示全部楼层

楼主好样的

使用道具举报

Dreamlessness

帖子: 4960
体力: 13275
威望: 11
居住地: 大洋洲澳大利亚

发表于 2007-10-8 14:53:19 |显示全部楼层

用了CSS的滤镜（貌似alpha），所以FF是没效果的

使用道具举报

帖子: 105
体力: 521
威望: 0
居住地: 安徽省安庆市

发表于 2007-10-8 14:56:40 |显示全部楼层

这个效果看起来不错啊，比起平常所见图片轮显的就有很大的改观了！！
顶下先！！

学习,学习!

使用道具举报

帖子: 22
体力: 61
威望: 0

发表于 2007-10-9 09:56:30 |显示全部楼层

能不能修改下兼容FF

使用道具举报

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

发表于 2007-10-9 11:31:27 |显示全部楼层

真的很好的效果啊，我收藏了，谢楼主分享！

使用道具举报

帖子: 3
体力: 16
威望: 0

发表于 2007-10-20 09:16:39 |显示全部楼层

那个高手修改下，搞成兼容FF的!!

使用道具举报

帖子: 3
体力: 27
威望: 0

发表于 2007-10-27 12:10:28 |显示全部楼层

bu cuo ..

使用道具举报

天赐的幸运

帖子: 106
体力: 876
威望: 0

发表于 2007-10-27 12:32:08 |显示全部楼层

伟大的奉献精神，支持

好鞋好人生

使用道具举报

帖子: 337
体力: 548
威望: 8

发表于 2007-10-27 13:46:06 |显示全部楼层

原帖由 yd514 于 2007-10-20 09:16 发表
那个高手修改下，搞成兼容FF的!!

这个效果是用绿境做的，据我了解ff还不支持绿境

使用道具举报

帖子: 74
体力: 170
威望: 0

发表于 2007-10-31 16:14:25 |显示全部楼层

很好.

使用道具举报

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

发表于 2007-10-31 17:29:52 |显示全部楼层

ff的确无效，楼上几位说的没错

使用道具举报

帖子: 91
体力: 430
威望: 0

发表于 2007-10-31 19:25:01 |显示全部楼层

现在的图片轮换全用FLASH的啦~纯代码的基本淘汰了!

使用道具举报

赵勇

银牌会员 

帖子: 4121
体力: 2378
威望: 2
居住地: 广东省深圳市

发表于 2007-11-1 12:20:49 |显示全部楼层

看个人喜欢了！反正这个我不喜欢

蓝色理想情感专家恋爱问题

使用道具举报

花鸟

帖子: 925
体力: 111
威望: 0

发表于 2007-11-1 12:26:56 |显示全部楼层

一般般，学网页的前十节课里面好像就有学过啦

[上海]专业

使用道具举报

e4　

帖子: 49
体力: 91
威望: 0

发表于 2007-11-2 15:10:01 |显示全部楼层

谢一个先

使用道具举报

ghfhaifeng2008　

帖子: 35
体力: 28
威望: 0
居住地: 山东省济南市

发表于 2007-11-23 14:09:46 |显示全部楼层

正在找这个那，谢谢了，

8xici.com

使用道具举报

ghfhaifeng2008　

帖子: 35
体力: 28
威望: 0
居住地: 山东省济南市

发表于 2007-11-23 15:43:10 |显示全部楼层

有那个asp的吗，我想从数据库里提取数据来显示？

8xici.com

使用道具举报

帖子: 22
体力: 123
威望: 0

发表于 2008-1-7 09:00:31 |显示全部楼层

FF下无效

使用道具举报

帖子: 453
体力: 2166
威望: 0

发表于 2008-1-7 09:29:21 |显示全部楼层

回复 #20 kenperseus 的帖子

哪里有FLASH的提供一下吧。谢谢了。

先天下
www.xiantianxia.cn
www.futuremall.cn

使用道具举报

帖子: 104
体力: 453
威望: 0

发表于 2008-1-18 12:28:57 |显示全部楼层

能不能用flash作成这样的效果?

使用道具举报

帖子: 8
体力: 28
威望: 0

发表于 2008-1-18 12:46:58 |显示全部楼层

WE4RDA

在FLASH当然可以做出这样的效果，只不过，用代码较方便一些压瓦机。

使用道具举报

清馨感觉

帖子: 115
体力: 275
威望: 0

发表于 2008-1-18 12:56:01 |显示全部楼层

多谢楼主~~~~~~~~~~~~~~~~~~~~

使用道具举报

发新帖

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-13 13:14 , Processed in 0.256316 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部