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. yield浅析-Python3

    yield 浅析 先来一段代码: def fun1(): for i in range(5): yield i print("继续调用继续执行") gen1 = fun1() pr ...

  2. 2019最新的IDEA的激活方式!!!

    第一步: 安装IDEAhttps://www.jetbrains.com/idea/ 选择要下载的版本Ultimate 第二步: 下载破解补丁链接:https://pan.baidu.com/s/1j ...

  3. 配置Mysql远程连接

    一.赋予某个用户权限 1.赋予权限格式:grant 权限 on 数据库对象 to 用户@IP(或者相应正则) 注:可以赋予select,delete,update,insert,index等权限精确到 ...

  4. javaScript基础知识总汇

    javaScript是什么: 1.JavaScript 运行在客户端(浏览器)的编程语言 2.用来给HTML网页增加动态功能 3.用来给HTML网页增加动态功能. 4.Netscape在最初将其脚本语 ...

  5. PC端微信扫码支付和支付宝跳转支付

    import java.io.BufferedOutputStream; import java.io.BufferedReader; import java.io.IOException; impo ...

  6. SQL这样干,你就是给自己刨坑.....

    SQL是作为一个程序员接触得非常多的一种语言,但是,很多时候,我们会发现,有些SQL的执行效率异常的差,造成了数据库的负担.我们通过分析这些有问题的SQL,就可以发现很多我们平时在写SQL的时候忽略的 ...

  7. Centos7:zookeeper安装,配置与使用

    配置jdk环境 解压缩zookeeper的压缩包 配置 创建data目录 复制zoo_sample.cfg为zoo.cfg 修改confg/zoo.cfg中dataDir=**/data 常用命令 . ...

  8. java-第三方包没有打进war包里面

    java-web的项目中引用第三方的jar包,在打成war包部署测试,出现报错,提示找不到引用的jar 解决方案: 1.在eclipse的项目--右键属性---deployment assembly- ...

  9. ThinkPHP依赖注入

    D:\wamp64\www\thinkphp5.1\tp5.1\application\index\controller\Demo1.php文件 <?php namespace app\inde ...

  10. 微信小程序(7)--微信小程序连续旋转动画

    微信小程序连续旋转动画 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html <view animation=&quo ...