JS 滑动门（溢出部分用按钮）

最新推荐文章于 2024-08-09 06:13:01 发布
最新推荐文章于 2024-08-09 06:13:01 发布
阅读量114 收藏
点赞数
文章标签： xhtml javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dtt3401885/article/details/84483230
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* { margin:0px; padding:0px;}
.MenuTab { margin:0 auto; width:1000px; overflow:hidden; height:24px;}
.MenuTab .LeftTabBtn,.MenuTab .RightTabBtn { float:left; width:45px; height:24px; text-align:center; font:14px/24px "宋体"; cursor:pointer;}
.MenuTab .MenuTabBtn { float:left; width:900px; overflow:hidden; height:24px; position:relative;}
.MenuTabBtn ul { list-style:none; width:10000px; position:absolute; height:24px; overflow:hidden; left:0px; top:0px;}
.MenuTabBtn ul li { float:left; width:178px; height:22px; border:1px solid #dedede; text-align:center; font:14px/24px "宋体"; cursor:pointer;}
.MenuTabCont { margin:0 auto; width:1000px; overflow:hidden; height:300px;}
.MenuTabCont .MenuTabContent { background:#0FF; color:#000; width:1000px; overflow:hidden; height:300px; display:none;}
</style>
<script type="text/javascript" src="http://www.shopbest.cn/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var i=0;
$DtDiv = $(".MenuTabBtn > ul > li");
$DtDiv.click(function(){
DdDiv = $DtDiv.index(this);
$(".MenuTabContent").eq(DdDiv).show().siblings().hide();
})
$(".LeftTabBtn").click(function(){
if(i>0){i--;LeftWid = i*180;$(".MenuTabBtn > ul").css("left",-LeftWid);}
else{alert("左边没了菜单");}})
$(".RightTabBtn").click(function(){
if(i<2){i++;LeftWid = i*180;$(".MenuTabBtn > ul").css("left",-LeftWid);}
else{alert("右边没了菜单");}})
})
</script>
</head>

<body>
<div class="MenuTab">
<div class="LeftTabBtn">←</div>
<div class="MenuTabBtn">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
<div class="RightTabBtn">→</div>
</div>
<div class="MenuTabCont">
<div class="MenuTabContent" style="display:block;">1</div>
<div class="MenuTabContent">2</div>
<div class="MenuTabContent">3</div>
<div class="MenuTabContent">4</div>
<div class="MenuTabContent">5</div>
<div class="MenuTabContent">6</div>
<div class="MenuTabContent">7</div>
</div>
</body>
</html>
dtt3401885
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android 溢出按钮,android
weixin_29737443的博客
05-26 85
我需要为“锁定屏幕”应用覆盖“主页”按钮。 我发现以下答案，按下主屏幕按钮6秒钟后重新启动应用程序。protected void onUserLeaveHint() {Intent i=new Intent(this,MainActivity123.class);startActivity(i.setFlags(Intent.FLAG_ACTIVITY_REORDER_TO_FRONT));To...
android 溢出按钮,android – 在工具栏中显示菜单溢出按钮
weixin_35718242的博客
05-26 175
我已经为Lollipop创建了一个工具栏,但我似乎无法弄清楚如何在工具栏中添加溢出按钮.我不打算使用v7 appcompat工具栏,因为我想明确使用工具栏小部件.我希望它看起来像这样：main_activity.xmlxmlns:fab="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"andro...
利用滑动门原理制作圆角和渐变色按钮【css】
Wendy
11-18 1655
在说明方法之前，先看一下效果图：       在border-radius出现之前，实现圆角效果使用的是滑动门。滑动门是利用背景图像的可层叠性，并允许他们在彼此之上进行滑动，以创造一些特殊的效果。        要想让滑动门适用于多种场合，左右两个角必须透明，以此露出背景颜色，若是左右压中间，左右角的透明部分露出的是中间的颜色，所以只能改成中间压左右，中间部分可以重叠，已达到宽度自适应
CSS滑动门技术宽度自适应按钮
科比不来it
02-23 730
CSS滑动门技术宽度自适应按钮 滑动门技术自适应宽度按钮指按钮的宽度可以随着内容的多少而改变，这个在导航菜单上的应该尤为广泛 #nav ul { list-style:none; margin: 0px; padding: 0px; height:31px; background:url(/upload/2010-07/05/13.gif) 0 bottom repeat-x; ove
android 溢出按钮,React-Native封裝Tabbar 實現中間按鈕溢出效果(Android/iOS)
weixin_35606595的博客
05-26 143
以前寫過一篇文章是基於react-native-tab-navigator 封裝Tabbar，由於RN版本的不斷更新，react-navigation，自17年1月開源以來就備受關注，Fb推薦使用庫，並且在React Native0.44中已將Navigator刪除。本文將以 react-navigation – 1.0.0-beta.27 / React-Native – 0.52.2 封裝實現...
用滑动门技术设计按钮的图文教程
10-30
在本教程中，我们将探讨如何使用滑动门技术来设计一个跨浏览器的按钮。首先，我们创建一个`<button>`元素，这是HTML中专用于表示按钮的元素，适合于提交表单或触发某些交互行为。例如： ```html ...
基于JavaScript实现滑动门效果
10-20
滑动门效果是一种常见的网页动态效果，常用于导航栏或者展示图片，它通过改变元素的位置来模拟门开启和关闭的动作。在JavaScript中实现滑动门效果，主要是通过调整HTML元素（通常为图片）的CSS属性，尤其是`left`...
简单通用的JS滑动门代码
12-01
这个例子中，我们看到的是一个使用JavaScript和CSS实现的简单通用的滑动门代码。 首先，HTML部分创建了一个无序列表`<ul id="tabMainNav">`，其中包含了四个列表项`<li>`。每个列表项都有一个唯一的ID，并且通过`...
js滑动门代码制作js滑动门导航鼠标滑过滑动门效果
11-23
js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果
js实现左侧网页tab滑动门效果代码
11-25
本文主要介绍如何使用JavaScript实现一种开口靠左的网页Tab滑动门效果，这种效果常用于网站导航，可以提升用户体验。该效果适用于多种浏览器，包括IE6、IE7、Firefox和Opera。 首先，我们需要理解滑动门效果的基本...
修改Android actionbar 溢出菜单按钮（OverflowButton）默认图标
16ren
09-01 7560
可以通过修改主题来修改Actionbar 溢出菜单默认图标（右边的那个三个点） android:actionOverflowButtonStyle 对于material主题样式等样式，使用actionOverflowButtonStyle属性<resources> XML <!-- Base application theme. --> <style name="Apptheme
featuretable排序按钮点击后溢出问题
CSDNmilu的博客
03-29 284
arcgis api for javascript api 小部件css的引入时要注意的问题
带绿色箭头指示的滑动门DIV效果
GoodShot的专栏
08-13 2510
带箭头指向的首页滑动门特效代码，而且可以很方便的在滑动和鼠标点击之间切换，代码比以前的很多滑动门都简洁，而且效果相当舒服，宽度和高度根据你网页的大小可以自己修改，要注意CSS文件内的图片路径要一并修改。                       首页栏目切换滑动门代码 站长学院pigzz.com body {
flex实现左右布局中按钮溢出隐藏效果
weixin_33884611的博客
12-02 530
最近在开发公司项目的时候UI设计稿给了这么一个设计(这里是我手动画的草图)： 看这效果，第一感觉很简单，flex布局，左边宽度自适应，右边固定宽度。 先回顾下关于文本溢出隐藏的方式： /* 单行文本 */ .text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; /*当然还需要加...
js/swiper 内容块超出时加滑动控制和左右按钮控制滑动；
onlylele的博客
11-04 774
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>slidesPerGroup_swiper3参数选项</title> <meta name="keywor...
javascript实现内容溢出手动滚动
哈哈哈
11-07 1319
HTML代码： 溢出滚动 * { margin: 0; padding: 0; } .body { width: 300px; height: 500px; background: red; margin: 100
点击按钮滑动指定li位置
开拓者
03-04 993
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;点击返回指定位置&lt;/title&gt; &lt;style&gt; #nav{ position: fixed; left:0; top:10px; ...
XHTML 简介
最新发布
lly202406的博客
08-09 368
XHTML作为一种基于XML的标记语言，曾在一段时间内成为网页内容的标准格式。它的严格语法规则和良好的兼容性为网页设计和开发带来了便利。然而，随着HTML5的崛起，XHTML逐渐淡出了人们的视野。尽管如此，XHTML在推动网页技术发展方面所做出的贡献仍然值得我们铭记。
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 282
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
js滑动到指定位置悬浮按钮
06-11
你可以使用JavaScript来实现一个滑动到指定位置悬浮按钮的效果。具体的实现步骤如下： 1. 首先需要在页面上添加一个悬浮按钮的HTML元素，可以使用或标签来创建一个按钮，并设置其样式和位置。 2. 使用JavaScript...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值