• 一步一步教你写带图片注释的淡入淡出插件(四)


      不出意外的话,这应该是这个系列的最后一部分了。

      第三部分的效果已经基本上满足大部分的需求了。所以这一部分呢,只能算是加分项。废话不多说了,还是继续博文吧。

      其实带背景半透明的备注的轮播效果也是网上一抓一大把,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;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'; //做文字滑动效果

    恩,这样就差不多了。再看看最后的效果吧。

    恩,文章最后,差点忘了说一个很关键的点,就是options的配置参数:

    在实例化 new Hongru.fader.init()的时候,第二个参数即为配置参数,是个对象,可选配置参数如下

    {

    id:  //(必选),轮播列表父元素id
    auto: //(可选)自动播放时间间隔秒数
    navClass: //(可选) 控制器className
    curNavClass: //(可选) 控制器当前状态className
    index: //(可选)初始化时从第几个位置开始播放,默认为0,即第一个元素 

    }

    好了,这一系列到此结束!!源码大家可以自行更改

  • 相关阅读:
    HTML_表单
    HTML_列表、表格与媒体元素
    HTML_HTML5基础
    使用java理解程序逻辑 试题分析
    字符串
    带参数的方法
    人机猜拳
    类的无参方法
    类和对象
    vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
  • 原文地址:https://www.cnblogs.com/hongru/p/1848052.html
Copyright © 2020-2023  润新知