码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript插件制作-tab选项卡

时间:2018-10-13 02:17:40      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:ext   top   add   dex   code   move   round   col   for   

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选项卡

标签:ext   top   add   dex   code   move   round   col   for   

原文地址:https://www.cnblogs.com/zimengxiyu/p/9781351.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!