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

不出意外的话,这应该是这个系列的最后一部分了。
  第三部分的效果已经基本上满足大部分的需求了。所以这一部分呢,只能算是加分项。废话不多说了,还是继续博文吧。
  其实带背景半透明的备注的轮播效果也是网上一抓一大把,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

    来做,语义可能会更好,这里我就不改了
    nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;'; //为它设置样式
    /* -- 显示备注 --*/
    var alt = this.alt = document.createElement('p'); //添加一个p标签,用于显示文本
    this.img = [];
    for(var k=0;k=100){ //在图片淡入之前先把图片透明度置为透明
    this.li[i].o = 0;
    this.li[i].style.opacity = 0;
    this.li[i].style.filter = 'alpha(opacity=0)';
    this.alt.style.height = 0; //做备注层的滑动效果
    }
    this.alt.innerHTML = this.img[i].alt; //植入alt文本
    for(var x=0;x=100){
    clearInterval(this.li[i].f); //如果透明度变化完毕,清除计时器
    if(!this.li.a){ //确保所有计时器都清除掉之后再开始自动运行。要不然会导致有控制器时点击过快的话,计时器没来得及清除就开始下一次变化,功能就乱了
    this.auto();
    }
    }
    else{
    this.li[i].o+=5;
    this.li[i].style.opacity = this.li[i].o/100;
    this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')';
    this.alt.style.height = Math.ceil(this.li[i].o*this.textH/100)+'px'; //做文字滑动效果
    }
    }
    }
    return {init:init}
    }();
    // -->

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    恩,文章最后,差点忘了说一个很关键的点,就是options的配置参数:
    在实例化 new Hongru.fader.init()的时候,第二个参数即为配置参数,是个对象,可选配置参数如下
    {
    id: //(必选),轮播列表父元素id
    auto: //(可选)自动播放时间间隔秒数
    navClass: //(可选) 控制器className
    curNavClass: //(可选) 控制器当前状态className
    index: //(可选)初始化时从第几个位置开始播放,默认为0,即第一个元素
    }
    好了,这一系列到此结束!!源码大家可以自行更改

(0)

相关推荐

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

    其实凭借着之前良好的代码结构,加入控制器很简单(^_^这也就是为什么我说刚开始的架构的代码结构很重要!) 先说一下加入控制器的思路: 根据轮播元素的个数为每一个元素添加一个对应的控制按钮,(这里我直接用a标签来做,考虑语义的话可以用ul或ol),考虑到书写样式的方便可以先create一个控制器父标签,然后依次把每个控制按钮append到控制器父标签,再把父标签append到我们的轮播模块中就ok了.然后再为对应的元素添加上对应的css样式即可 好了,说完思路,咱们动手开始,控制器的绘制应该在in

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

    接上一篇,现在进行第二部分. 开始之前,还是说说前文提到的关于把所有函数都写在一个闭包内的优化问题.前文也提到了,因为我们在初始化的时候要调用的只是init,所以可以只把init写入闭包,其他功能函数作为init的原型继承方法来调用.所以前文的代码其实可以这样改写: 复制代码 代码如下: var Hongru={}; function H$(id){return document.getElementById(id)} function H$$(c,p){return p.getElements

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

    不出意外的话,这应该是这个系列的最后一部分了. 第三部分的效果已经基本上满足大部分的需求了.所以这一部分呢,只能算是加分项.废话不多说了,还是继续博文吧. 其实带背景半透明的备注的轮播效果也是网上一抓一大把,163,qq,taobao等等,仔细找找应该都能看到类似的效果.添加文本其实和前一文的添加控制器的方法差不多.无非也就是再append一个元素,在里面显示文本即可. 复制代码 代码如下: /* -- 显示备注 --*/ var alt = this.alt = document.create

  • 一步一步教你网站同步镜像(转载)

    1.介绍 现在的网站随着访问量的增加,单一服务器无法承担巨大的访问量,有没有什么方便快捷的方式解决这个问题呢,答案是"有"!比如建立服务器群,进行均衡负载. 但是如果要解决像电信网通这样的互访问题(中国网民的悲哀..),这个解决办法就无能为了了! 要解决这个问题最方便快捷的方式就是建立镜像网站!由访问者自己选择适合自己网络的速度最快的网站!这样即可以解决线路问题,又可以解决访问量问题! 2.网站同步的数据分类 网站数据基本分为两类: 一类是文件,比如HTML,ASP,PHP等网页文件,

  • 教你一步一步在linux中正确的安装Xcache加速php

    首先,强烈吐槽,百度上的教程,都左复制右复制的,乱七八糟,缺东缺西的.借此微凉大大我提供我苦心整理好的教程.以便各位小菜能顺利的使用Xcache加速php,如果看完了,也操作了,还是失败了的话,请联系微凉大大的QQ 496928838,微凉大大也想看看你是如何一步一步都装不上. #第一步,下载Xcache wget http://xcache.lighttpd.net/pub/Releases/3.1.0/xcache-3.1.0.tar.gz #第一步非常简单,如果你下载不了就是人品问题. #

  • 手把手教你写一个spring IOC容器的方法

    本文分享自华为云社区<手把手教你写一个spring IOC容器>,原文作者:技术火炬手. spring框架的基础核心和起点毫无疑问就是IOC,IOC作为spring容器提供的核心技术,成功完成了依赖的反转:从主类的对依赖的主动管理反转为了spring容器对依赖的全局控制.今天就带大家手写一个spring IOC容器. 第0步(准备工作): (1)JDK1.8及java环境变量 (2)maven包及maven环境变量 (3)idea 第1步(创建项目,引入tomcat包) PS:由于该项目的作用

  • 一步一步封装自己的HtmlHelper组件BootstrapHelper(三)

    前言:之前的两篇封装了一些基础的表单组件,这篇继续来封装几个基于bootstrap的其他组件.和上篇不同的是,这篇的有几个组件需要某些js文件的支持. BootstrapHelper系列文章目录 C#进阶系列--一步一步封装自己的HtmlHelper组件:BootstrapHelper C#进阶系列--一步一步封装自己的HtmlHelper组件:BootstrapHelper(二) C#进阶系列--一步一步封装自己的HtmlHelper组件:BootstrapHelper(三:附源码) 一.Nu

  • 手把手教你写一个微信小程序(推荐)

    需求 小程序语音识别,全景图片观看,登录授权,获取个人基本信息 一:基础框架 官方开发文档:https://developers.weixin.qq.com/miniprogram/dev/ (其实官方文档写的很清楚了) 1.跟着官方文档一步一步来,新建一个小程序项目就好 2.然后呢,毕竟默认的只是基本骨架,肌肉线条还是要自己填的 app.json 是当前小程序的全局配置 小程序的所有页面路径.界面表现.网络超时时间.底部 tab 需求一:底部tab,我们要像原生APP那样要有是三个常驻的按钮,

  • 一步一步跟我学易语言之认识窗口组件和子程序

    认识窗口组件(基本常用组件,扩展组件,外部组件) 看到了吗?易语言自带的组件.你会发现,组件工具箱里没有窗口这个组件,其实窗口是一个最基本的组件,其它组件都包容(画)在窗口上.如果要添加窗口,我们可以到易语言菜单的"插入"项,单击"新窗口".或者到工作夹(下图) 要编写出强大.实用的程序,光有窗口是远远不够的,还要有一些常用的组件,如:编辑框.图片框.外形框.画板.分组框.标签.按钮.选择夹.时钟等.它们的添加方法就要简单的多了.用鼠标左键单击要添加的组件,然后将鼠

  • 一步一步封装自己的HtmlHelper组件BootstrapHelper(二)

    前言:上篇介绍了下封装BootstrapHelper的一些基础知识,这篇继续来完善下.参考HtmlHelper的方式,这篇博主先来封装下一些常用的表单组件.关于BootstrapHelper封装的意义何在,上篇评论里面已经讨论得太多,这里也不想过多纠结.总之一句话:凡事有得必有失,就看你怎么去取舍.有兴趣的可以看看,没兴趣的权当博主讲了个"笑话"吧. BootstrapHelper系列文章目录 C#进阶系列--一步一步封装自己的HtmlHelper组件:BootstrapHelper

随机推荐