Web-Frontendjs-TutorialVon jQuery_jquery implementierter Multi-Schiebetür- und Multi-Tab-Effektcode
Das Beispiel in diesem Artikel beschreibt den von jQuery implementierten Multi-Sliding Door- und Multi-Tab-Effekt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der Screenshot des Laufeffekts sieht wie folgt aus:
Der spezifische Code lautet wie folgt:
<!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>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超多滑动门效果</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-size:12px;
}
ul, li {
list-style-type:none;
}
#tab {
width:500px;
height:200px;
margin:20px auto;
overflow:hidden;
}
#tab .tab_title {
width:500px;
height:22px;
overflow:hidden;
left:0;
top:0;
clear:both;
overflow:hidden;
position:relative;
}
#tab .tab_title .u {
width:465px;
overflow:hidden;
position:relative;
}
#tab .tab_title ul {
margin:0 5px;
position:absolute;
float:left;
width:2784px;/*这个即是滑动门的总长度！就是所有的li的宽度加上间距！计算本案例中的宽度即为：24*100+14*24+24*2（2为边框宽度）=2784 */
}
#tab .tab_title div {
float:left;
width:15px;
height:20px;
line-height:20px;
cursor:pointer;
}
#tab .tab_title span.vright {
top:0;
right:5px;
margin-left:2px;
}
#tab .tab_title span.vleft {
top:0;
left:0px;
padding-left:5px;
}
#tab .tab_title li {
float:left;
width:100px;/*这个的宽度即是四个滑动门栏目的宽度*/
height:20px;
line-height:20px;
text-align:center;
background-color:#cccccc;
margin-right:14px;
border:1px #999999 solid;
cursor:pointer;
}
#tab .tab_title li:hover {
background-color:#999999
}
#tab .tab_title li.selected {
background-color:#666666;
}
#tab .tab_content {
width:476px;
height:156px;
overflow:hidden;
padding:10px;
border:1px #CCCCCC solid;
}
#tab .tab_content div {
border:1px #999999 dotted;
}
#tab .tab_content div p {
line-height:1.5;
text-indent:25px;
color:#333333;
}
#tab .tab_content .none {
display:none;
}
#div1 {
border:1px #CCCCCC solid;
position:absolute;
display:none;
background:#EEF7EE;
font-size:12px;
padding:5px;
color:#999999;
}
#div2 {
width:120px;
height:15px;
border:1px #CCCCCC solid;
position:absolute;
display:none;
background:#CCCCCC;
font-size:5px;
padding:2px;
color:#999999;
}
</style>
<script language="javascript">
$(function(){
var index = 0;
$(".tab_title ul li").click(function(){
index = $(".tab_title ul li").index(this);
$(this).addClass("selected").siblings().removeClass("selected");
$(".tab_content div").eq(index).show().siblings().hide();
});
var i = 4; //这个前端展示几个滑动门栏目
var len = $(".u .scrol li").length;
var page = 1;
var maxpage = Math.ceil(len/i);
var scrollWidth = $(".u").width();
var divbox = "<div id='div1' >呵呵，没有了</div>";
$("body").append(divbox);
$(".vright").click(function(e){
if(!$(".u .scrol").is(":animated")){
if(page == maxpage ){
$(".u .scrol").stop();
$("#div1").css({
"top": (e.pageY + 20) +"px",
"left": (e.pageX + 20) +"px",
"opacity": "0.9"
}).stop(true,false).fadeIn(800).fadeOut(800);
}else{
$(".u .scrol").animate({left : "-=" + scrollWidth +"px"},2000);
page++;
}
}
});
$(".vleft").click(function(){
if(!$(".u .scrol").is(":animated")){
if(page == 1){
$(".u .scrol").stop();
}else{
$(".u .scrol").animate({left : "+=" + scrollWidth +"px"},2000);
page--;
}
}
});
});
</script>
</head>
<body>
<div id="tab">
<div class="tab_title">
<div class="vleft"><strong><<</strong></div>
<div class="u">
<ul class="scrol">
<li class="selected">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
</ul>
</div>
<div class="vright"><strong>>></strong></div>
</div>
<div class="tab_content">
<div>
<p>1的内容</p>
</div>
<div class="none">
<p>2的内容</p>
</div>
<div class="none">
<p>3的内容</p>
</div>
<div class="none">
<p>4的内容</p>
</div>
<div class="none">
<p>5的内容</p>
</div>
<div class="none">
<p>6的内容</p>
</div>
<div class="none">
<p>7的内容</p>
</div>
<div class="none">
<p>8的内容</p>
</div>
<div class="none">
<p>9的内容</p>
</div>
<div class="none">
<p>10的内容</p>
</div>
<div class="none">
<p>10的内容</p>
</div>
<div class="none">
<p>12的内容</p>
</div>
<div class="none">
<p>13的内容</p>
</div>
<div class="none">
<p>14的内容</p>
</div>
<div class="none">
<p>15的内容</p>
</div>
<div class="none">
<p>16的内容</p>
</div>
<div class="none">
<p>17的内容</p>
</div>
<div class="none">
<p>18的内容</p>
</div>
<div class="none">
<p>19的内容</p>
</div>
<div class="none">
<p>20的内容</p>
</div>
<div class="none">
<p>21的内容</p>
</div>
<div class="none">
<p>22的内容</p>
</div>
<div class="none">
<p>23的内容</p>
</div>
<div class="none">
<p>24的内容</p>
</div>
</div>
</div>
</body>
</html>
Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen auf dieser Website ansehen: „Zusammenfassung der Drag-Effekte und Fähigkeiten von JQuery“, „Zusammenfassung der Fähigkeiten der jQuery-Erweiterung“ , „Zusammenfassung der allgemeinen klassischen JQuery-Spezialeffekte“, „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“, „Zusammenfassung der Verwendung des JQuery-Selektors“ und „jQuery Allgemeine Plug-Ins und Nutzungsübersicht》
Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der jQuery-Programmierung befassen.
jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM实现方法：1、用“$("img").delay(毫秒数).fadeOut()”语句，delay()设置延迟秒数；2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句，通过定时器来延迟。
axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM区别：1、axios是一个异步请求框架，用于封装底层的XMLHttpRequest，而jquery是一个JavaScript库，只是顺便封装了dom操作；2、axios是基于承诺对象的，可以用承诺对象中的方法，而jquery不基于承诺对象。
jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM修改方法：1、用css()设置新样式，语法“$(元素).css("min-height","新值")”；2、用attr()，通过设置style属性来添加新样式，语法“$(元素).attr("style","min-height:新值")”。
jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM增加元素的方法：1、用append()，语法“$("body").append(新元素)”，可向body内部的末尾处增加元素；2、用prepend()，语法“$("body").prepend(新元素)”，可向body内部的开始处增加元素。
jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM在jquery中，apply()方法用于改变this指向，使用另一个对象替换当前对象，是应用某一对象的一个方法，语法为“apply(thisobj,[argarray])”；参数argarray表示的是以数组的形式进行传递。
jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM删除方法：1、用empty()，语法“$("div").empty();”，可删除所有子节点和内容；2、用children()和remove()，语法“$("div").children().remove();”，只删除子元素，不删除内容。
jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM去掉方法：1、用“$(selector).removeAttr("readonly")”语句删除readonly属性；2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。
jquery on()有几个参数Apr 21, 2022 am 11:29 AMon()方法有4个参数：1、第一个参数不可省略，规定要从被选元素添加的一个或多个事件或命名空间；2、第二个参数可省略，规定元素的事件处理程序；3、第三个参数可省略，规定传递到函数的额外数据；4、第四个参数可省略，规定当事件发生时运行的函数。
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Herunterladen der Mac-Version des Atom-Editors
Der beliebteste Open-Source-Editor
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SAP NetWeaver Server-Adapter für Eclipse
Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.
VSCode Windows 64-Bit-Download
Ein kostenloser und leistungsstarker IDE-Editor von Microsoft
Sicherer Prüfungsbrowser
Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.
