js table栏切换+border绘制三角形特殊应用

最新推荐文章于 2023-04-19 20:14:14 发布
最新推荐文章于 2023-04-19 20:14:14 发布
阅读量1.6k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端_js_案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u011301203/article/details/72871464
本文展示了如何使用JavaScript实现表格栏目的切换效果，并利用CSS绘制三角形，创建独特的视觉体验。通过鼠标移过触发切换，动态改变元素的位置和显示状态，为用户提供个性化的浏览体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
			    width: 100%;
			    height: 100%;
			    background-color: #f6f6f6;
			}
			.count{
				width: 390px;
			    height: 444px;
			    /*border: 1px solid #000;*/
			    margin: 40px auto;
			    background-color: white;
			}
			.box_top{
				width: 100%;
				height: 55px;
    			background-color: #e77005;
    			position: relative;
			}
			.box_1{
				position: absolute;
			    top: 0;
			    left: 0;
			    width: 0;
			    height: 0;
			    border-top: 20px solid #f6f6f6;
			    border-right: 20px solid transparent;
    		}
    		.box_2{
    			position: absolute;
			    top: 3px;
    			left: 3px;
			    width: 0;
			    height: 0;
			    border-top: 15px solid #c02c2c;
			    border-right: 15px solid transparent;
    		}
    		h3{
    			font-family: fzzhengheis-el-gbregular;
			    font-size: 26px;
			    font-weight: 400;
			    line-height: 40px;
			    height: 40px;
			    padding-top: 6px;
			    margin-left: 40px;
			    color: white;
    		}
    		.box_subit{
    			position: absolute;
    			top: 20px;
    			right: 45px;
			    float: right;
			    height: 24px;
			    line-height: 24px;
			    font-size: 14px;
			    color: #fff;
    		}
    		.yuan{
    			height: 15px;
    			width: 15px;
    			border: 1px solid white;
    			position: absolute;
				top: 24px;
				right: 20px;
				border-radius: 50%;
				color: white;
    		}
    		.dian{
    			position: absolute;
    			top: -2px;
    			left: 3px;
    			font-size: 13px;
    		}
    		.bottom_top{
    			padding: 6px 0 7px;
    			width: 370px;
    			height: 18px;
    			font-size: 0;
			    white-space: nowrap;
			    overflow: hidden;
			    margin: 0 auto;
			    position: relative;
    		}
    		.move{
    			position: absolute;
			    top: 28px;
			    left: 0;
			    width: 75px;
			    height: 3px;
			    background-color: red;
			    border-radius: 10px;
    		}
    		.bottom_top>a{
    			display: inline-block;
    			width: 75px;
    			border-right: 1px solid #d2d1d1;
    			font-size: 14px;
    			text-align: center;
    		}
    		.bottom_bottom{
    			width: 370px;
    			height: 335px;
    			border-top: 1px solid #e7e7e7;
    			padding: 10px;
    		}
    		ul>li{
    			position: relative;
			    float: left;
			    height: 167px;
			    width: 123px;
			    text-align: center;
			    list-style: none;
			    display: inline-block;
			    box-sizing: border-box;
    		}
    		.border_right{
    			border-right: 1px solid #e7e7e7
    		} 
    		.border_bottom{
    			border-bottom: 1px solid #e7e7e7
    		}
    		.bottom_bottom>ul{
    			float: left;
    		}
    		.bao_pi{
    			height: 142px;
    			width: 122px;
    			padding: 12px 0;
    		}
    		.bao_pi>div:nth-child(1){
    			width: 100px;
    			height: 100px;
    			background-color: royalblue;
    			margin-left: 5px;
    		}
    		.bao_pi>div:nth-child(2){
    			font-size: 11px;
			    width: 107px;
			    margin-top: 10px;
			    margin-left: 4px;
			    height: 32px;
			    overflow: hidden;
    		}
		</style>
	</head>
	<body>
		
		<div class="count">
			<div class="box_top">
				<!--左上角小三角-->
				<div class="box_1"></div>
				<div class="box_2"></div>
				<h3>排行榜</h3>
				<a class="box_subit">专属你的购物指南</a>
				<div class="yuan"><div class="dian">></div></div>
			</div>
			<div class="box_bottom">
				<div class="bottom_top">
					<div class="move"></div>
					<a  class="move_a">抱枕靠垫</a>
					<a  class="move_a">手机通讯</a>
					<a  class="move_a">冰箱</a>
					<a  class="move_a">饮料冲调</a>
					<a  class="move_a">粮油调味</a>
				</div>
				<div class="bottom_bottom">
					<ul class="ul_1" style="display:block;">
						<li class="border_right border_bottom">
							<div class="bao_pi">
								<div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t4459/235/331983240/152011/c0050075/58cdcda0Nc7e03b8b.jpg!q90.webp"></div>
								<div>【京东超市】金沙河面条挂面 珍品龙须面营养拉面细干拌面条1000G</div>
							</div>
						</li>
						<li class="border_right border_bottom">
							<div class="bao_pi">
								<div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t4891/287/1067423208/91595/a0bd8bd0/58ec7e24Nf03b204d.jpg!q90.webp"></div>
								<div>【京东超市】福临门 东北大米 水晶米 中粮出品 大米5kg</div>
							</div>
						</li>
						<li class="border_bottom">
							<div class="bao_pi">
								<div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t3160/181/5242003839/378678/289bbaf2/5866146aN3d00b47b.jpg!q90.webp"></div>
								<div>【京东超市】金龙鱼 东北大米 蟹稻共生 盘锦大米5KG(包装更新，新老包装随机发放）</div>
							</div>
						</li>
						
						<li class="border_right">
							<div class="bao_pi">
								<div><img src="http://img10.360buyimg.com/mobilecms/s100x100_jfs/t3127/49/5333038539/285427/91b3ea36/58661521N82982242.jpg!q90.webp"></div>
								<div>【京东超市】金龙鱼 东北米 粳米 寒地东北大米 5kg </div>
							</div>
						</li>
						<li class="border_right">
							<div class="bao_pi">
								<div><img src="http://img13.360buyimg.com/mobilecms/s100x100_g10/M00/0E/02/rBEQWVFPsuoIAAAAAAD25TOlJ_gAACwJgGGJEYAAPb9270.jpg!q90.webp"></div>
								<div>【京东超市】王致和 精制料酒 500ml</div>
							</div>
						</li>
						<li>
							<div class="bao_pi">
								<div><img src="http://img14.360buyimg.com/mobilecms/s100x100_jfs/t3616/326/306661277/43954/bf366f32/5805c97dN0ab2219c.jpg!q90.webp"></div>
								<div>【京东超市】金龙鱼 食用油 纯香菜籽油5L</div>
							</div>
						</li>
					</ul>
					
					<ul class="li_2"  style="display:none;">
						<li class="border_right border_bottom">
							<div class="bao_pi">
								<div></div>
								<div>【京东超市】金沙河面条挂面 珍品龙须面营养拉面细干拌面条1000G</div>
							</div>
						</li>
						<li class="border_right border_bottom">
							<div class="bao_pi">
								<div></div>
								<div>【京东超市】福临门 东北大米 水晶米 中粮出品 大米5kg</div>
							</div>
						</li>
						<li class="border_bottom">
							<div class="bao_pi">
								<div></div>
								<div>【京东超市】金龙鱼 东北大米 蟹稻共生 盘锦大米5KG(包装更新，新老包装随机发放）</div>
							</div>
						</li>
						
						<li class="border_right">
							<div class="bao_pi">
								<div></div>
								<div>【京东超市】金龙鱼 东北米 粳米 寒地东北大米 5kg </div>
							</div>
						</li>
						<li class="border_right">
							<div class="bao_pi">
								<div></div>
								<div>【京东超市】王致和 精制料酒 500ml</div>
							</div>
						</li>
						<li>
							<div class="bao_pi">
								<div></div>
								<div>【京东超市】金龙鱼 食用油 纯香菜籽油5L</div>
							</div>
						</li>
					</ul>
				
					<ul class="ul_3" style="display:none;">
						<li class="border_right border_bottom">
							<div class="bao_pi">
								<div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t4459/235/331983240/152011/c0050075/58cdcda0Nc7e03b8b.jpg!q90.webp"></div>
								<div>【京东超市】金沙河面条挂面 珍品龙须面营养拉面细干拌面条1000G</div>
							</div>
						</li>
						<li class="border_right border_bottom">
							<div class="bao_pi">
								<div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t4891/287/1067423208/91595/a0bd8bd0/58ec7e24Nf03b204d.jpg!q90.webp"></div>
								<div>【京东超市】福临门 东北大米 水晶米 中粮出品 大米5kg</div>
							</div>
						</li>
						<li class="border_bottom">
							<div class="bao_pi">
								<div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t3160/181/5242003839/378678/289bbaf2/5866146aN3d00b47b.jpg!q90.webp"></div>
								<div>【京东超市】金龙鱼 东北大米 蟹稻共生 盘锦大米5KG(包装更新，新老包装随机发放）</div>
							</div>
						</li>
						
						<li class="border_right">
							<div class="bao_pi">
								<div><img src="http://img10.360buyimg.com/mobilecms/s100x100_jfs/t3127/49/5333038539/285427/91b3ea36/58661521N82982242.jpg!q90.webp"></div>
								<div>【京东超市】金龙鱼 东北米 粳米 寒地东北大米 5kg </div>
							</div>
						</li>
						<li class="border_right">
							<div class="bao_pi">
								<div><img src="http://img13.360buyimg.com/mobilecms/s100x100_g10/M00/0E/02/rBEQWVFPsuoIAAAAAAD25TOlJ_gAACwJgGGJEYAAPb9270.jpg!q90.webp"></div>
								<div>【京东超市】王致和 精制料酒 500ml</div>
							</div>
						</li>
						<li>
							<div class="bao_pi">
								<div><img src="http://img14.360buyimg.com/mobilecms/s100x100_jfs/t3616/326/306661277/43954/bf366f32/5805c97dN0ab2219c.jpg!q90.webp"></div>
								<div>【京东超市】金龙鱼 食用油 纯香菜籽油5L</div>
							</div>
						</li>
					</ul>
					
					<ul class="ul_4" style="display:none;">
						<li class="border_right border_bottom">
							<div class="bao_pi">
								<div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t4459/235/331983240/152011/c0050075/58cdcda0Nc7e03b8b.jpg!q90.webp"></div>
								<div>【京东超市】金沙河面条挂面 珍品龙须面营养拉面细干拌面条1000G</div>
							</div>
						</li>
						<li class="border_right border_bottom">
							<div class="bao_pi">
								<div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t4891/287/1067423208/91595/a0bd8bd0/58ec7e24Nf03b204d.jpg!q90.webp"></div>
								<div>【京东超市】福临门 东北大米 水晶米 中粮出品 大米5kg</div>
							</div>
						</li>
						<li class="border_bottom">
							<div class="bao_pi">
								<div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t3160/181/5242003839/378678/289bbaf2/5866146aN3d00b47b.jpg!q90.webp"></div>
								<div>【京东超市】金龙鱼 东北大米 蟹稻共生 盘锦大米5KG(包装更新，新老包装随机发放）</div>
							</div>
						</li>
						
						<li class="border_right">
							<div class="bao_pi">
								<div><img src="http://img10.360buyimg.com/mobilecms/s100x100_jfs/t3127/49/5333038539/285427/91b3ea36/58661521N82982242.jpg!q90.webp"></div>
								<div>【京东超市】金龙鱼 东北米 粳米 寒地东北大米 5kg </div>
							</div>
						</li>
						<li class="border_right">
							<div class="bao_pi">
								<div></div>
								<div>【京东超市】王致和 精制料酒 500ml</div>
							</div>
						</li>
						<li>
							<div class="bao_pi">
								<div><img src="http://img14.360buyimg.com/mobilecms/s100x100_jfs/t3616/326/306661277/43954/bf366f32/5805c97dN0ab2219c.jpg!q90.webp"></div>
								<div>【京东超市】金龙鱼 食用油 纯香菜籽油5L</div>
							</div>
						</li>
					</ul>
				
					<ul class="ul_5" style="display:none;">
						<li class="border_right border_bottom">
							<div class="bao_pi">
								<div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t4459/235/331983240/152011/c0050075/58cdcda0Nc7e03b8b.jpg!q90.webp"></div>
								<div>【京东超市】金沙河面条挂面 珍品龙须面营养拉面细干拌面条1000G</div>
							</div>
						</li>
						<li class="border_right border_bottom">
							<div class="bao_pi">
								<div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t4891/287/1067423208/91595/a0bd8bd0/58ec7e24Nf03b204d.jpg!q90.webp"></div>
								<div>【京东超市】福临门 东北大米 水晶米 中粮出品 大米5kg</div>
							</div>
						</li>
						<li class="border_bottom">
							<div class="bao_pi">
								<div><img src="http://img12.360buyimg.com/mobilecms/s100x100_jfs/t3160/181/5242003839/378678/289bbaf2/5866146aN3d00b47b.jpg!q90.webp"></div>
								<div>【京东超市】金龙鱼 东北大米 蟹稻共生 盘锦大米5KG(包装更新，新老包装随机发放）</div>
							</div>
						</li>
						
						<li class="border_right">
							<div class="bao_pi">
								<div><img src="http://img10.360buyimg.com/mobilecms/s100x100_jfs/t3127/49/5333038539/285427/91b3ea36/58661521N82982242.jpg!q90.webp"></div>
								<div>【京东超市】金龙鱼 东北米 粳米 寒地东北大米 5kg </div>
							</div>
						</li>
						<li class="border_right">
							<div class="bao_pi">
								<div><img src="http://img13.360buyimg.com/mobilecms/s100x100_g10/M00/0E/02/rBEQWVFPsuoIAAAAAAD25TOlJ_gAACwJgGGJEYAAPb9270.jpg!q90.webp"></div>
								<div>【京东超市】王致和 精制料酒 500ml</div>
							</div>
						</li>
						<li>
							<div class="bao_pi">
								<div></div>
								<div>【京东超市】金龙鱼 食用油 纯香菜籽油5L</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	
	<script>
		
		var move_aArr = document.getElementsByClassName('move_a');
		var move = document.getElementsByClassName('move')[0];
		var ulArr = document.getElementsByClassName('bottom_bottom')[0].children;
		var ulStatus = 0;
		
		for(var i=0; i<move_aArr.length;i++){
			move_aArr[i].setAttribute('index',i);
			move_aArr[i].onmousemove = function(){
				var index = this.getAttribute('index');
				move.style.cssText = 'transform:translateX('+index*76+'px);'
							+'transition-duration:0.5s;'
							+'transition-timing-function:ease';
				
				for( var j=0 ;j<ulArr.length; j++){
					ulArr[j].style.cssText = 'display:none;';
				}
				ulArr[index].style.cssText = 'display:block;';
			}
		}
		
	</script>
</html>

!important + css动画 + css过渡效果 + 关于z-index + hr标签实际高大于设置高 + css绘制三角形 + bootstrap日历组件 + 复选框全选
Zoey_J的博客
03-31 829
html+css部分 1、可以用 !important 提高一个样式属性的优先级； 2、在css中设置动画（以眨眼为例）： ①在css中通过@keyframes设置移动方式： @keyframes dong-eyes { 0%{} 50%{ height: 2px; top: 35px; transform: rotate(0deg)...
Qt自定义表格TableWidget实现整行单列按键逐行切换及跳转首尾
肩上风骋的博客
11-20 845
项目开发中需要实现一个类似表格的界面，要求只能通过键盘操作界面，点击上下键，表格中逐行选中，但是每次只能选中整行中的第一列，点击向左按键则跳转到首行，点击向右的按键，跳转到最后一行，若是当先在视口显示的行后面还有看不到的行，在表格最左侧下方出现一个向下的图标，若是当前视口可见的首行之前还有其它的行，则表格左侧的上方出现一个向上的箭头，若是表格显示的行，不足以占满整个视口的行，则表格左侧上下箭头都不显示。左侧箭头的功能是提示当前页后面或者前面还有没有显示出来的行。
css border三角形
11-25
css border三角形
CSS border实现三角形
cui_angel的专栏
12-14 5864
一、原理 CSS盒模型 一个盒子包括：margin+border+padding+content。上下左右边框交界处出呈现平滑的斜线。利用这个特点，通过设置不同的上下左右边框宽度或者颜色可以得到小三角，小梯形等。 调整宽度大小可以调节三角形形状。 示例1： 一般情况下，我们设置盒子的宽高度及上下左右边框，会呈现如下图： CSS语言: 高亮代码由发芽网提供 1 #tes
js table边框 border-collapse
qq_38321137的博客
09-15 1373
使用table的border-collapse: collapse;属性。将边框合并为单一的一条
jsp table怎么设置边框
信徒博客
10-17 1万+
1.第一种边框 设置td属性就可以了 border:1px solid gray; 2.第二种边框    设置的是table属性  border:1px solid gray;
react 实现tab切换 三角形筛选样式
lastone1212的博客
12-23 526
react 实现tab切换 三角形筛选样式 接下来上效果 这次使用的是react的class 类组件 import React, { Component } from 'react' import { LeftOutline, SearchOutline } from 'antd-mobile-icons' import { NavLink } from 'react-router-dom' class serach extends Component ...
html+css面试题
最新发布
02-10
通过CSS可以绘制基本图形，例如，一个简单的三角形可以通过设置宽度和高度为0，然后设置四条边框，并将其中三条边框颜色设置为透明，留下的不透明边框构成三角形。 行高(line-height)是行与行之间的距离，其主要...
移动应用开发面试题(2022)
qq_53228343的博客
04-16 3841
一、HTML+CSS基础 1. display:none; 和visibility:hidden;的区别 display:none; 彻底消失，释放空间。可能引发页面的reflow回流（重排）。 visibility:hidden; 就是隐藏，但是位置没释放，好比opacity:0; 不引发页面回流。 2. CSS 选择器权重如何计算 就近原则：直接选中的，一定比继承的权重大。 一样近，比权重： id是100，class是10，标签是1， 总数权重一样谁写在下面听谁的。 行内
《Web前端开发技术(HTML+CSS+JavaScript)》题库附答案
m0_63394128的博客
03-14 1万+
什么是Web技术？ 答：Web即全球广域网（World Wide Web），也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。它是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超链接将Internet上的信息节点组织成一个互为关联a的网状结构。 什么是Web前端？ 答：Web前端是指基于Web（现在一般指动态页面技术）的客户端软件，也就是通常说的在浏览器端运行的网页程序...
【学习总结】用border画小三角
zhongmei121的专栏
06-18 449
用border画小三角形的原理：div宽高为0，把border的一条边设置实线和颜色，通过控制不同边的显示，画不同方向的三角形。&lt;html&gt;&lt;head&gt;&lt;style type="text/css"&gt;.test1{width:0px;height:0px;border-style:solid;border-width:10px;border-color:red b...
CSS/JS小元素实践----画三角形和圆形
小蜗牛的博客
04-03 990
1.使用css画一些元素 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .huabu{ height:400px; width:400px; border:1px solid; position:relative; } .show{ widt
带小三角形的tab切换效果实现（css&background）css方法兼容性不够完善
小鱼儿-专注前端开发
09-16 1139
根据块级元素的border表现形式做的三角形,但是发现在IE系列浏览器里面兼容性不够好,后面改用背景图实现,具体相关代码如下: [code="html"] em模拟小三角 *{margin:0;padding:0} body{font:12px/1.5 simsun;color:#000;text-align:center} ul,li{list-style:none...
js(JavaScript)代码实现的TAB标签切换效果
低调走过
07-27 1万+
一个可以js（JavaScript）的tab标签切换代码，可以自动适应宽度，可以自己添加删除标签块，傻瓜式操作便能完成！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.
13种常用按钮、文本框、表单等CSS样式
weixin_30454481的博客
06-11 1458
一、按钮样式.buttoncss{font-family:"tahoma","宋体";/*www.52css.com*/font-size:9pt;color:#003399;border:1px#003399solid;color:#006699;border-bottom:#93bee21pxsolid;border-left:#93bee21pxsolid;border-right:#93b...
html 小三角折叠菜单,css3 实现选项卡小三角形状
weixin_28833069的博客
05-31 462
css3 实现选项卡小三角形状css3 实现选项卡小三角形状效果如下图查看链接html推荐男装女装套装css 样式 (核心部分).fitting-tab .fitting-text{width:80px;height:30px;background:red;position: relative;text-align:center;line-height:30px;background-color:...
js生成world文件内table 边框
weixin_43847545的博客
04-29 551
<style> table{ border-collapse:collapse; /*Merge overlapping borders*/ } table td{ border:1px solid #339999; border-top:1px solid #33999...
原生table 边框重叠 粗细不一样等问题，秒懂，只需几秒就能完成
柑橘乌云_
04-19 2031
下面的方法前提需要查看是否存在默认样式表设置了边框为border：none的情况，若有，则注释掉 ，默认样式表如果将table、tr、td设置了border：none 可能会导致下面方法失效。下面的方式只需要设置table的一些属性就可以达到目的，不需要用css给每个tr和td设置边框。一、边框粗细相同 （粗边框）二、边框粗细相同 （细边框）
关于IE7 IE8兼容HTML5和CSS3的一种解决方案
热门推荐
IntelligenceXenogeneicRobot
12-08 3万+
今天突然发现一网站用JS来实现这个支持 添加到head里   excanvas.js //Filament Group modification note: //This version of excanvas is modified to support lazy loading of this file. More info here: http
使用JS+Table实现简易实用的JSP嵌套甘特图
- **jquery-1.5.1.min.js**: 这是压缩后的jQuery库文件，用于提供js+table实现甘特图时的JS代码支持。 - **readme.txt**: 这是一个文本文件，通常用于提供项目的基本说明，可能包含如何使用gantt.html文件以及其他...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值