JavaScript插件制作练习-鼠标划过选项卡切换图片

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            body {

                background: #353131;

            }

            .warp {

                position: relative;

                top: 50px;

                left: 25%;

            }

            ul {

                list-style: none;

            }

            ul .warp-li {

                float: left;

                width: 100px;

                height: 40px;

                line-height: 40px;

                background: #000;

                opacity: .3;

                color: #fff;

                text-align: center;

            }

            ul .warp-li:hover {

                background: aquamarine;

                color: #000000;

                opopacity: 1;

            }

            ul::after {

                display: block;

                content: "";

                clear: both;

            }

            .box {

                position: absolute;

                left: 0;

                top: 40px;

                display: none;

            }

            .box img {

                width: 500px;

                height: 300px;

            }

            #show {

                display: block;

            }

            #on {

                background: aquamarine;

                color: #000;

                opopacity: 1;

            }

        </style>

    </head>

    <body>

        <div class="warp">

            <ul>

                <li class="warp-li" id="on">首页</li>

                <li class="warp-li">动漫</li>

                <li class="warp-li">游戏</li>

                <li class="warp-li">生活</li>

                <li class="warp-li">直播</li>

            </ul>

            <div class="box" id="show">

                <img src="img/1.jpg" />

            </div>

            <div class="box">

                <img src="img/18d8bc3eb13533fa3110518aadd3fd1f40345bf4.jpg" />

            </div>

            <div class="box">

                <img src="img/359b033b5bb5c9eab33999fed739b6003bf3b3e1.jpg" />

            </div>

            <div class="box">

                <img src="img/ce4a8e8065380cd7fd58a3eaa944ad3459828123.jpg.png" />

            </div>

            <div class="box">

                <img src="img/timg.jpg" />

            </div>

        </div>

        <script type="text/javascript">

            (function(window) {

                var maxTab = function(tabLen, showLen, tabLenId, showLenId) {

                    this.tabLen = tabLen;

                    this.showLen = showLen;

                    this.tabLenId = tabLenId; //选项卡id

                    this.showLenId = showLenId; //显示区域id

                    this.show();//调用切换图片的方法

                }

                maxTab.prototype = {

                    constructor: maxTab,

                    show: function() {

                        var _this = this; //这里的this是指向maxTab的，function会建里一个作用域所以要保留

                        var tabLen = document.getElementsByClassName(this.tabLen);

                        var showLen = document.getElementsByClassName(this.showLen);

                        var index = 0;

                        for(var i = 0; i < tabLen.length; i++) {

                            tabLen[i].setAttribute("index", i);

                            for(var j = 0; j < tabLen.length; j++) {

                                tabLen[i].onmouseover= function() {

                                    _this.reset(tabLen);

                                    _this.reset(showLen);

                                    this.id = _this.tabLenId;

                                    index = this.getAttribute("index");

                                    showLen[index].id = _this.showLenId;

                                }

                            }

                        }

                    },
                    //格式化id

                    reset: function(obj) {

                        for(var i = 0; i < obj.length; i++) {

                            obj[i].removeAttribute("id");

                        }

                    }

                }

                window.maxTab = maxTab;

            })(window)

            //插件调用

            var am = new maxTab("warp-li", "box", "on", "show");

        </script>

    </body>

</html>

JavaScript插件制作-tab选项卡的更多相关文章

  1. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

  2. 原生javascript 改写的tab选项卡

    <!--css部分--> <style> *{ margin: 0; padding: 0; } ul,li{ list-style: none } .tabbox{ widt ...

  3. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  4. 微信小程序的wx-charts插件-tab选项卡

    微信小程序的wx-charts插件-tab选项卡 效果: //index.js var wxCharts = require('../../utils/wxcharts-min.js'); const ...

  5. 微信小程序swiper制作内容高度不定的tab选项卡

    微信小程序利用swiper制作内容高度不定的tab选项卡,不使用absolute定位,不定高度,由内容自由撑开主要思路是获取内容区的高度来给swiper动态设置值 .wxml <view cla ...

  6. 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  7. javascript插件制作学习-制作步骤

    原生JavaScript插件开发学习 自己制作的demo大家可以看下https://www.cnblogs.com/zimengxiyu/p/9814889.html 插件制作步骤: (一)构造函数 ...

  8. bootstrap 支持的JavaScript插件

    一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使 ...

  9. Bootstrap JavaScript插件

      在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab ...

随机推荐

  1. liunx crontab 定时访问指定url

    链接主机 crontab -e 打开文件,直接输入需要执行的脚本 1 9 * * * /usr/bin/curl http://www.baidu.com 语法解析 * * * * * /usr/bi ...

  2. 数据结构之单链表的实现-java

    一.单链表基本概念 单链表是一种链式存取的数据结构,用一组地址任意的存储单元(一般是非连续存储单元)存放线性表中的数据元素.链表中的数据是以结点来表示的,每个结点的构成:元素data + 指针next ...

  3. 外贸开发，用java调用速卖通api第一步，token的获取。

     第一步 定义速卖通api的常量  public String client_id;  public String client_key;  public String site;   第二步 获取登 ...

  4. redis 学习（6）-- 集合类型

    redis 学习(6)-- 集合类型 set 结构 无序 无重复 集合间操作 set 集合内操作 命令 含义 sadd key memebr1 [member2...] 向集合中添加一个或多个成员 s ...

  5. 使用TableSnapshotInputFormat读取Hbase快照数据

    根据快照名称读取hbase快照中的数据,在网上查了好多资料,很少有资料能够给出清晰的方案,根据自己的摸索终于实现,现将代码贴出,希望能给大家有所帮助: public void read(org.apa ...

  6. 剑指offer-孩子们的游戏(圆圈中最后剩下的数)-知识迁移能力-python

    题目描述 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为牛客的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈.然后,他随机指 ...

  7. PHP 下载mysql数据到PHPExcel表格

    第一步:先到官网(https://github.com/PHPOffice/PHPExcel)下载PHPExcel 第二步:放到第三方库 第三步: /** * 封装:信息导出 * @param $da ...

  8. vue记录错误和警告日志

    https://blog.csdn.net/lucky___star/article/details/95491657 https://blog.csdn.net/weixin_34204057/ar ...

  9. AngularJS 在实际应用中优缺点

    AngularJS 在实际应用中优点:模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令:是一个比较完善的前端MV*框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所 ...

  10. 本地存储cookie,localStorage,sessionStorage

    常见的前端存储有老朋友 cookie,短暂的 sessionStorage,和简单强大的localStorage 他们之间的区别有以下几点 1.. cookie在浏览器和服务器间来回传递.而sessi ...