juqery 实现div动态切换

最新推荐文章于 2023-11-24 10:15:24 发布
最新推荐文章于 2023-11-24 10:15:24 发布
阅读量239 收藏
点赞数
文章标签： python javascript ViewUI
原文链接：https://my.oschina.net/liuxinzhou/blog/823746
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

直接上代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/banner.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/banner.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.color.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="banner">
			<div class="mork">
				<div class="mork-left float-left"><</div>
				<div class="mork-right float-right">></div>
			</div>
		</div>
		<div class="icon_btn">
			<div class="icon_li">
				<div class="perfect-circle float-left" banner-bgk="#000000" id="id0"></div>
				<div class="perfect-circle float-left" banner-bgk="#FF0000" id="id1"></div>
				<div class="perfect-circle float-left" banner-bgk="#00FF00" id="id2"></div>
				<div class="perfect-circle float-left" banner-bgk="#0000FF" id="id3"></div>
				<div class="perfect-circle float-left" banner-bgk="#FFFF00" id="id4"></div>
			</div>
		</div>
	</body>

</html>
var currentindex = "id0";
$(document).ready(function() {
	//初始化组件宽度
	var window_width = $(window).width();
	$(".banner").width(window_width);
	$(".icon_btn").width(window_width);
	var top = $(".banner").offset().top;
	var left = $(".banner").offset().left;
	var banner_height = $(".banner").height();
	var banner_width = $(".banner").width();
	$(".mork").css({
		"position": "absolute",
		"top": top,
		"left": left
	})
	$(".mork-left").css({
		"height": banner_height,
		"line-height": banner_height + "px"
	});
	$(".mork-right").css({
		"height": banner_height,
		"line-height": banner_height + "px",
		"position": "relative",
		"left": banner_width - 100
	});

	$('#id0').css({
		"background-color": "yellow"
	});
	$(".mork").hide();
	// 实现背景切换
	$('.perfect-circle').mouseenter(function() {
		$(".perfect-circle").css({
			"background-color": "red"
		});
		var bgk = $(this).attr("banner-bgk");
		var bgk = $(this).attr("banner-bgk");
		currentindex = $(this).attr("id");
		$(this).css({
			"background-color": "yellow"
		});
		$(".banner").css({
			"background-color": bgk
		});
	});
	var system = {
		win: false,
		mac: false,
		xll: false,
		ipad: false
	};
	//检测平台
	var p = navigator.platform;
	alert(p);
	system.win = p.indexOf("Win") == 0;
	system.mac = p.indexOf("Mac") == 0;
	system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
	system.ipad = (navigator.userAgent.match(/iPad/i) != null) ? true : false;
	if(system.win || system.mac || system.xll || system.ipad) {
		$('.banner').mouseover(function() {
			$(".mork").show();
		});
		$('.banner').mouseout(function() {
			$(".mork").hide();
		});
		$(".mork-left").click(function() {
			var index = currentindex.replace("id", "");
			if(parseInt(index) - 1 < 0) {
				return;
			}
			currentindex = "id" + (parseInt(index) - 1);
			var bgk = $('#' + currentindex).attr("banner-bgk");
			$(".perfect-circle").css({
				"background-color": "red"
			});
			$('#' + currentindex).css({
				"background-color": "yellow"
			});
			$(".banner").css({
				"background-color": bgk
			});
		});
		$(".mork-right").click(function() {
			var index = currentindex.replace("id", "");
			if(parseInt(index) + 1 >= $(".perfect-circle").length) {
				return;
			}
			currentindex = "id" + (parseInt(index) + 1);
			var bgk = $('#' + currentindex).attr("banner-bgk");
			$(".perfect-circle").css({
				"background-color": "red"
			});
			$('#' + currentindex).css({
				"background-color": "yellow"
			});
			$(".banner").css({
				"background-color": bgk
			});
		});
	} else {
		$.getScript("js/jquery.mobile-1.3.2.min.js", function() {
			$(".banner").on("swipeleft", function() {
				var index = currentindex.replace("id", "");
				if(parseInt(index) - 1 < 0) {
					return;
				}
				currentindex = "id" + (parseInt(index) - 1);
				var bgk = $('#' + currentindex).attr("banner-bgk");
				$(".perfect-circle").css({
					"background-color": "red"
				});
				$('#' + currentindex).css({
					"background-color": "yellow"
				});
				$(".banner").css({
					"background-color": bgk
				});

			});
			$(".banner").on("swiperight", function() {
				var index = currentindex.replace("id", "");
				if(parseInt(index) + 1 >= $(".perfect-circle").length) {
					return;
				}
				currentindex = "id" + (parseInt(index) + 1);
				var bgk = $('#' + currentindex).attr("banner-bgk");
				$(".perfect-circle").css({
					"background-color": "red"
				});
				$('#' + currentindex).css({
					"background-color": "yellow"
				});
				$(".banner").css({
					"background-color": bgk
				});
			});
		});
	}
	setInterval("settime()", 5000);
})

function settime() {

	var index = currentindex.replace("id", "");
	if(parseInt(index) + 1 >= $(".perfect-circle").length) {
		index = -1;
	}
	currentindex = "id" + (parseInt(index) + 1);
	$(".perfect-circle").css({
		"background-color": "red"
	});
	var bgk = $('#' + currentindex).attr("banner-bgk");
	$("#" + currentindex).animate({
		"backgroundColor": "yellow"
	}, 1000)
	$(".banner").animate({
		"backgroundColor": bgk
	}, 1000)

}
@charset "utf-8";
	body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr {
	padding:0;
	margin: 0;
}
body{
	overflow-x: hidden;
}
ul li{
	list-style: none;
}
.float-left{
	float: left;
	
}
.float-right{
	float: right;
}
.perfect-circle{
	width: 10px;
	height: 10px;
	background-color: red;
	color: white;
	text-align: center;
	border-radius: 100px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	margin: 10px 2px 0 0;
}
.banner{
	width: 1000px;
	height: 200px;
	background-color: #000000;
	color: white;
	text-align: center;
    margin: 0 auto;
}
.icon_btn{
	width: 1000px;
	margin: 0 auto;
	height: 100px;
}
.icon_li{
	width: 100px;
	margin: 0 auto;
}
.mork-left{
	background: blueviolet;
	width: 50px;
	height: 100px;
	text-align: center;
	opacity: 0.5;
	color: white;
	font-size: 50px;
}
.mork-right{
	background: blueviolet;
	width: 50px;
	height: 100px;
	text-align: center;
	opacity: 0.5;
	color: white;
	font-size: 50px;
}
.mork-left:hover,.mork-right,.perfect-circle{
	cursor:pointer ;
}

 

转载于:https://my.oschina.net/liuxinzhou/blog/823746

weixin_33749131
关注
JS 实现div的切换
luoxiao492的博客
03-24 482
‍ 莫得标题 ul{ list-style:none} var nFocus = 0; var bFlag = false; var aLiTab, aDivTab; function c1() { var $ = function c($) { ret...
DIV动态/动画切换效果
泡泡菌的博客
09-26 4232
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> script src="../common/jquery-3.1.1.js" type="text/javascript">script> style> .box{position: relative}
JavaScript实现div切换效果
yxh8888888的博客
03-18 2024
button { width:100px; } .active { background-color:red; } .show { display: block; } 水果 零食 蔬菜 苹果 西瓜 辣条 白菜 //给每一个button都添加点击事件 for (var i = 0; i < aButton.length; i++) { //通过给button...
实现div切换
pang_sanbai的博客
08-04 286
js代码：  .switchD为页面上的点击事件触发元素 $(document).ready(function(){     $(".switchD").click(function(){         var sIndex = $(this).index()+1;         var switchId = $($(this).parent()).attr("id");   
整理下2个div的动态切换
liuyuemozhu的博客
09-19 894
首先展示实现效果： 点击 “其他格式” 的时候动态切换两个div的显示状态： 实现需求： 两个div，一个div默认状态下是显示状态，另一个div是隐藏状态，当点击“其他格式”的时候，动态切换两个div的显示状态。 实现代码： HTML： CSS： 原生javascript： 具体看js的实现思路就可以了。 代码只是自己思想逻辑的一种具象体现，开始做的时候，还是没...
jquery实现div模块轮播切换
10-29
本文将深入探讨如何使用 jQuery 来实现一个div模块的轮播切换效果，这种效果通常用于展示多个图片或内容块，使得用户可以在有限的页面空间内浏览更多的信息。 首先，我们需要在HTML中创建轮播的基础结构。这通常...
jquery+div实现同时滑动切换的图文展示特效插件下载.rar
03-23
"jQuery+div实现同时滑动切换的图文展示特效插件"就是一个旨在提升用户体验的工具，它利用了JavaScript库jQuery的强大功能和HTML中的div元素来实现动态的、平滑的图文展示效果。接下来，我们将深入探讨这个插件的...
使用jquery实现div的tab切换实例代码
12-02
在这个实例中，我们将讨论如何使用jQuery实现一个基于div的Tab切换功能。 首先，HTML结构是实现Tab切换的基础。在给定的代码中，有两个主要的div元素，`#sidebar-tab` 和 `#tab-content`。`#sidebar-tab` 包含了Tab...
JQuery实现DIV其他动画效果的简单实例
10-21
jQuery提供的动画效果能够帮助开发者轻松实现网页元素的动态展示，包括淡入淡出、滑动切换等。 #### 3. toggle()方法 toggle()方法是jQuery中的一个动画函数，用于切换元素的可见状态。如果元素是可见的，它将被...
jQuery实现百度登录框的动态切换效果
10-19
在本文中，我们将探讨如何使用jQuery来实现类似百度登录框的动态切换效果。这个效果通常涉及到用户界面中的多个状态或视图之间的平滑过渡，为用户提供更好的交互体验。以下是一步步实现这一效果的方法： 首先，我们...
vue3实现在某个div里面动态的切换页面
最新发布
青莳的博客
11-24 726
【代码】vue3实现在动态的某个div里面切换内容。
动态增加div，实现div之间的切换，不刷新页面
m0_37901706的博客
08-22 1976
以下是jsp中的全部内容，以下jsp中使用了java，引用了jquery       测试Div之间的互换             $(function(){         //“4”代表动态增加标签的份数                      var liValue = "补充协议"++""             $("#tab_t
Css实现页内多个div之间的切换动画
嗨皮田酱的博客
11-30 1万+
因为最近的项目里面有用到页内多个div之间的左右动画切换，之前没接触过，然后查了下网上的方法，有点瞅不明白，有的使用js的监听事件touchmove之类的方法，也有的是使用css3的transition属性来进行实现。毕竟看别人的方法自己不实践那是完全不能收为己用的，云里雾里只会。于是，我决定自己写个demo玩一下。其实，淘宝网触屏版是个很不错的借鉴网站，毕竟都是大牛写的，没事的时候可以多看看大牛们
用JS实现页内动态切换DIV的内容
jw903的专栏
04-27 1万+
用JS实现页内动态切换DIV的内容 设想：无需页面跳转，仅通过当页提供的锚动态改变指定div内的内容。 思路：可利用getElementById方法加以实现。getElementById通过id属性捕获或赋值给网页特定元素的相关资讯，如innerHTML（内部的html超文本）、innerTEXT（内部的text纯文本）等。其语法结构为：document.getElementB
HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）
热门推荐
u014063717的博客
03-17 4万+
两个场景（即两个div视图）切换的时候，如果想添加个过渡动画，除了可以使用js来实现，还可以通过CSS3的animation属性来实现。 （注意：Internet Explorer 9 以及更早的版本不支持 animation 属性。）下面做了个过渡动画汇总，包含常见的动画效果，效果图如下： 点击此处查看运行效果。 代码如下：<!DOCTYPE html> <html> <head> <m
jQuery实现div tab切换示例及代码
本文档提供了使用jQuery实现动态div标签tab切换的实例代码，这是一种常见的前端交互设计技术。首先，我们来详细解读一下如何通过HTML、CSS和JavaScript结合jQuery来创建一个可切换的tab面板。 HTML部分: 在这个例子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值