时间:2021-05-25
不出意外的话,这应该是这个系列的最后一部分了。
第三部分的效果已经基本上满足大部分的需求了。所以这一部分呢,只能算是加分项。废话不多说了,还是继续博文吧。
其实带背景半透明的备注的轮播效果也是网上一抓一大把,163,qq,taobao等等,仔细找找应该都能看到类似的效果。添加文本其实和前一文的添加控制器的方法差不多。无非也就是再append一个元素,在里面显示文本即可。
复制代码 代码如下:
var alt = this.alt = document.createElement('p'); //添加一个p标签,用于显示文本
this.img = [];
for(var k=0;k<this.l;k++){
this.img.push(H$$('img',this.li[k])[0]); //提取轮播模块里的图片,目的是取alt
}
.
.
.
wp.appendChild(alt); //
this.textH = nav_wp.offsetHeight;
alt.style.cssText = 'height:'+this.textH+'px;line-height:'+this.textH+'px;color:#fff;font-size:12px;padding-left:20px;margin:0;position:absolute;left:0;bottom:0;overflow:hidden;width:100%;background:#000;opacity:0.7;filter:alpha(opacity=70);'; //为这个层添加样式
上面是init() 函数里添加的两段代码。都很易懂。就不细讲了。另外。同样要在变换函数里改变z-index值,让控制器处于最高,文本层次之,同时再把alt文本写入到这个文本层里面,如果需要滑动效果的话,在pos()里面把高度清0,在fade()里做高度变换即可(同样也可以用top或left来做);故pos()里改动代码如下:
复制代码 代码如下:
this.alt.style.zIndex = this.z+1;
nav_wp.style.zIndex = this.z+2;
.
this.alt.style.height = 0; //做备注层的滑动效果
.
this.alt.innerHTML = this.img[i].alt; //植入alt文本
如果文本层有高度变化效果的话,fade()里面加一句文本层的高度变化即可:
复制代码 代码如下:
this.alt.style.height = Math.ceil(this.li[i].o*this.textH/100)+'px'; //做文字滑动效果
恩,这样就差不多了。再看看最后的效果吧。
step4
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前几天在blueIdea上看到一个淡入淡出的带注释的图片轮播效果http://bbs.blueidea.com/thread-2911266-1-1.html看
本文实例讲述了jquery实现经典的淡入淡出选项卡效果代码。分享给大家供大家参考。具体如下:这是一款经典的Tab选项卡代码,带有淡入淡出效果,jquery插件实
本文实例为大家分享了Unity实现背景图片淡入淡出的具体代码,供大家参考,具体内容如下如题。背景是两个图片,每隔一段时间图片1淡出,2淡入,然后2淡出,1淡入很
本文实例为大家分享了Unity3D实现图片循环淡入淡出的具体代码,供大家参考,具体内容如下1、说明由于近期项目需求,在网上找了淡入淡出的代码,但都是两张图片淡入
图片匀速淡入淡出效果如下:淡入效果*{margin:0;padding:0;}div{border:2pxsolid#aaa;}img{width:300px;