JQuery-日常的笔记

最新推荐文章于 2020-09-27 21:00:24 发布
最新推荐文章于 2020-09-27 21:00:24 发布
阅读量653 收藏 3
点赞数 2
分类专栏： 日常笔记 文章标签： jquery

项目一

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>首页右侧固定层</title>
    <link href="css/nav.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<nav id="nav">
    <li><span></span><p>就东会员</p></li>
    <li><span></span><p>购物车</p></li>
    <li><span></span><p>我的关注</p></li>
    <li><span></span><p>我的足迹</p></li>
    <li><span></span><p>我的消息</p></li>
    <li><span></span><p>咨询JIMI</p></li>
</nav>
</body>
</html>

.css

*{margin: 0; padding:0; font-size: 12px;}
ul,ol,li{list-style: none;}
#nav{width: 100px; margin: 0 auto;}
#nav li{height:36px;}
#nav li span{
    display: block;
    float: right;
    width: 35px;
    height: 35px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    background: #7a6e6e url("../images/toolbars.png") no-repeat;
}
#nav li:nth-of-type(1) span{background-position: 0px -15px;}
#nav li:nth-of-type(2) span{background-position: 0px -57px;}
#nav li:nth-of-type(3) span{background-position: 1px -106px;}
#nav li:nth-of-type(4) span{background-position: 0px -156px;}
#nav li:nth-of-type(5) span{background-position: 0px -200px;}
#nav li:nth-of-type(6) span{background-position: 2px -265px;}
#nav li p{
    height: 35px;
    text-align: left;
    background: #c81623;
    color: #ffffff;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    line-height: 35px;
    padding-left: 10px;
    display: none;
}

js代码

$(function(){
	//$("p").css("display", "block");显示隐藏的
	$("nav li").mouseover(function(){
		$(this).find("span").css("background-color","#B80000");
	});
	$("nav li").mouseout(function(){
		$(this).find("span").css("background-color","#909090");
	});
	$("#nav li").mouseover(function(){
		$(this).find("p").show();
	});
	$("#nav li").mouseout(function(){
		$(this).find("p").hide();
	});
});

运行效果

在这里插入图片描述

项目二（左侧菜单-).mouseove -.hover)

<!doctype html>
<html>
 <head lang="en">
  <meta charset="UTF-8">
  <title>仿京东左侧菜单</title>
  <link href="css/style2.css" rel="stylesheet"/>
  <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
  <script type="text/javascript" src="js/index1.js"></script>
 </head>
 <body>
	<div class="nav-box">
		<div class="nav-top"><a href="">全部商品分类</a></div>
		<ul>
			<li>
				<a href="">家用电器</a><div><img src="images/erji.jpg"/></div>
			</li>
			<li>
				<a href="">手机</a>、<a href="">数码</a>、<a href="">京东通信</a><div><img src="images/erji1.jpg"/></div>
			</li>
			<li>
				<a href="">电脑</a>、<a href="">办公</a><div><img src="images/erji2.jpg"/></div>
			</li>
			<li>
				<a href="">家居</a>、<a href="">家具</a>、<a href="">家装</a>、<a href="">厨具</a><div><img src="images/erji3.jpg"/></div>
			</li>
			<li>
				<a href="">男装</a>、<a href="">女装</a>、<a href="">珠宝</a><div><img src="images/erji4.jpg"/></div>
			</li>
		</ul>
	</div>
 </body>
</html>

js实现

$(function(){
	****//移入移出****
	//$("nav-top a").css("display", "block");
	/*$("ul li").mouseover(function(){
		$(this).css("background-color","green").find("div").show();
	}).mouseout(function(){
		$(this).css("background-color","#c81623").find("div").hide();
	});
	*/
	
	//光标移入触发
	$("ul li").hover(function(){
		$(this).css("background-color","green").find("div").show();
	},function(){
		//光标移出触发
		$(this).css("background-color","#c81623").find("div").hide();
	});
	
});

//$(":hidden").show();显示全部隐藏的东西

.css

*{padding:0;margin:0;}
a{text-decoration:none;}
.nav-box{
	width:210px;
	margin:5px 0 0 5px;
}
.nav-top a{
	display:block;
	height:45px;
	font-size:16px;
	line-height:45px;
	padding:0 10px;
	background:#B1191A;
	color:#fff;
}
ul{background:#c81623;list-style:none;padding-bottom:1px;}
ul li{
	height:30px;
	line-height:30px;
	font-size:14px;
	color:#fff;
	position:relative;
	padding-left: 5px;
}
.orange{background-color: orange;}
ul li a{color:#fff;}
ul li div{display:none; position: absolute; left: 211px; top:0px;}

效果

在这里插入图片描述

项目三- 常见问题分类页面

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>京东常见问题分类页面</title>
  <link href="css/style.css" rel="stylesheet"/>
  <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
  <script type="text/javascript" src="js/2index.js"></script>
  </head>
  
 <body>
	<div class="top">
		<div class="wrap">
			<div class="top-l left">欢迎光临京东，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div>
			<ul class="top-m right">
				<li><a href=""><i class="top-car left"></i>购物车</a></li>
				<li class="line"></li>
				<li><a href="">我的交易单</a></li>
				<li class="line"></li>
				<li><a href="">会员中心</a></li>
				<li class="line"></li>
				<li><a href=""><i class="top-tel left"></i>我的关注</a></li>
				<li class="line"></li>
				<li class="on">
					<a href="" class="menu-btn">联系客服</a>
					<ul class="topDown">
						<li><a href="">帮助中心</a></li>
						<li><a href="">我要吐槽</a></li>
						<li><a href="">在线客服</a></li>
						<li><a href="">咨询JIMI</a></li>
						<li><a href="">客服邮箱</a></li>
					</ul>
				</li>
				<li class="line"></li>
				<li><a href="" class="menu-btn">手机金融</a></li>
				<li class="line"></li>
				<li><a href="" class="menu-btn">网站导航</a></li>
				<li class="line"></li>
			</ul>
			<div class="clearfix"></div>
		</div>
	</div>
	<div class="wrap">
		<a href=""><img src="images/logo.png" alt="logo"/></a>
	</div>
	<div class="wrap">
		<nav class="nav">
			<header>常见问题分类</header>
			<ul>
				<li><dl>
					<dt>京东金融</dt>
					<dd><a href="#">京东金融简介</a></dd>
					<dd><a href="#">京东金融会员</a></dd>
					<dd><a href="#">京东金融安全中心</a></dd>
				</dl></li>
				<li><dl>
					<dt>理财</dt>
					<dd><a href="#">京东小金库</a></dd>
					<dd><a href="#">京东基金理财</a></dd>
					<dd><a href="#">京东保险理财</a></dd>
					<dd><a href="#">小白理财</a></dd>
					<dd><a href="#">智投理财</a></dd>
					<dd><a href="#">乐猜</a></dd>
				</dl></li>
				<li><dl>
					<dt>白条</dt>
					<dd><a href="#">京东白条</a></dd>
					<dd><a href="#">京东金条</a></dd>
					<dd><a href="#">校园白条</a></dd>
					<dd><a href="#">教育白条</a></dd>
					<dd><a href="#">乡村白条</a></dd>
					<dd><a href="#">京东金采</a></dd>
					<dd><a href="#">京农贷</a></dd>
				</dl></li>
				<li><dl>
					<dt>众筹</dt>
					<dd><a href="#">产品众筹</a></dd>
					<dd><a href="#">轻众筹</a></dd>
					<dd><a href="#">产品众筹发起者常见问题</a></dd>
					<dd><a href="#">产品众筹支持者常见问题</a></dd>
					<dd><a href="#">产品众筹永久众筹常见问题</a></dd>
					<dd><a href="#">京东众创常见问题</a></dd>
				</dl></li>
				<li><dl>
					<dt>京东钱包</dt>
					<dd><a href="#">京东钱包简介</a></dd>
					<dd><a href="#">自动服务及常见问题</a></dd>
					<dd><a href="#">购房盈</a></dd>
				</dl></li>
			</ul>
		</nav>
		<section class="content">
			<p>京东金融 > 京东金融会员</p>
			<ul>
				<li>&#8226;<a href="#">什么是京东金融会员</a> </li>
				<li>&#8226;<a href="#">会员签到规则</a> </li>
				<li>&#8226;<a href="#">会员金币</a> </li>
				<li>&#8226;<a href="#">小白信用</a> </li>
				<li>&#8226;<a href="#">外部虚拟券</a> </li>
			</ul>
		</section>
	</div>
 </body>
</html>

js

$(function(){
	
		$(".top-m .on").hover(
				function(){
					//$(".topDown").show("fast");
					$(".topDown").slideDown("slow");//逐步延伸显示
					$(".topDown").slideDown("200");//用数字逐步延伸显示
		},
				function(){
					//$(".topDown").hide("fast");
					$(".topDown").slideUp("slow");//逐步延伸显示
		});
		
		$(".nav dt").css("background","#CCFFFF");
		
		$(".nav li").hover(function(){
					//$(this).css("background","#FF9999").find("dd").show();      		 //用show
					$(this).css("background","#FF9999").find("dd").slideDown();   		//用slideDown 慢延伸
					
			},function(){
				//$(this).find("dd").hide();  
				$(this).find("dd").slideUp("slow");
			});
	});

.css

*{padding:0;margin:0;}
html{color:#404040;font-size:12px;font-family:"Arial","微软雅黑";}
a{text-decoration:none;color:#1a66b3;}
ul{list-style:none;}
.left{float:left;}
.right{float:right;}
.hide{display:none;}
.clearfix{clear:both;overflow:hidden;height:0;}
.wrap{width:800px;margin:0 auto;}

/**头部**/
.top{height:32px;background:#f9f9f9;padding-top:2px;line-height:32px;border-bottom:1px solid #f2f2f2}
.top,.top a{color:#646464;}
.top a:hover{color:#ff2832;}
.top-l .top-login{color:#ff2832;margin-right:5px;}
.top-m > li{float:left;height:22px;line-height:22px;padding-top:5px;}
.top-m > li.line{width:1px;height:12px;background:#e1e1e1;margin:10px 0 0;padding:0;}
.top-m > li  a{display:block;padding:0 8px;}
.top-m > li a.menu-btn{padding-right:27px;background:url(../images/home_sprite.png) no-repeat right -307px;}
.top-m > li a i{margin-right:6px;margin-top:3px;}
.top-m > li.on{position:relative;border:1px #e6e6e6 solid;background:#fff;}
.top-m ul.topDown{position:absolute;border:1px #e6e6e6 solid;border-top:0;width:100%;top:27px;left:-1px;background:#fff;display:none;}
.top-m ul.topDown li{line-height:24px;}
.top-m ul.topDown li a{display:block;padding-left:10px;color:#000;}
.top-m ul.topDown li a:hover{background:#f2f2f2;color:#000;}
.top-m .top-car{width:15px;height:14px;background:url(../images/home_sprite.png) no-repeat -40px -86px;}
.top-m .top-tel{width:11px;height:16px;background:url(../images/home_sprite.png) no-repeat -40px -70px;}

.wrap img[alt='logo']{margin: 10px 0;}
.nav {
    float: left;
width: 200px;
margin-right: 10px;}
.nav header{ padding-left: 15px; font-size: 18px; color: #ffffff; background: #6ABB78; line-height: 45px;}
.nav ul{border: 1px #cccccc solid; border-top: none;}
.nav dt{background: #efefef; font-size: 16px; padding-left: 15px; color: #666666; line-height: 35px; border-bottom: 1px solid #ffffff; cursor: pointer;}
.nav dd{display: none;padding-left: 15px;}
.nav dd a{color: #666666; line-height: 30px;  font-size: 14px;}
.content{
    float: left;
    width: 548px ;
    border: 1px #cccccc solid;
padding: 10px;}
.content p{font-size: 14px;color: #666666; padding-bottom: 15px; }
.content li{padding-left: 20px;}
.content li a{color: #666666; line-height: 30px; padding-left: 3px; }
.content li a:hover{text-decoration: underline;}

效果（ 通过js对隐藏的现实，鼠标移到->众筹->下拉列表出来）

在这里插入图片描述

项目四-点击小框-自动移到

<!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" />
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/10index.js"></script>
</head>

<title>Panel</title>
<style type="text/css">
*{margin:0;padding:0;}	
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background:#FFFF33; cursor: pointer}
</style>

<script src="js/jquery-1.12.4.js"></script>
  <script src="10index.js"></script>
<body>
<div id="panel"></div>
</body>
</html>

js

$(function(){
	$("#panel").click(function(){
		
		//$("#panel").animate({left:"500px",top:"300",right:"500"},5000)//改变这个图片的运动方向
		$("#panel").animate({height:"300px",left:"500px"},1000);
		
	});
	
		
	
});

效果

在这里插入图片描述
在这里插入图片描述

小白小罗
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
高仿京东分类页面实现
Hedong的博客
05-14 4733
最近写了个小demo，仿京东的分类功能实现，网上看了有些用ListView并排，个人并不推荐这种方法，自己使用ListView+Fragment实现，OK，直接上代码 首先看主页面布局 xml version="1.0" encoding="utf-8"?> xmlns:android="http://schemas.android.com/apk/res/android" and
Jquery仿京东分类导航层简单实现
深南大道
09-17 4820
$(function () { var alink01 = $(".item > ul"); alink01.hover(function () { //alert div var divId = $(this).find("div").attr("id");
jquery第三章练习三（制作京东常见问题分类页面）
weixin_47065927的博客
08-19 7557
js代码及要求如下： $(document).ready(function () { /* 鼠标移至“联系客服”，二级菜单以”slow“速度显示；当鼠标离开时，二 级菜单以“fast”速度隐藏 */ $(".menu-btn").hover( function () { $(this).next().show("slow"); }, function () { $(this).next().hide("fast"); } ); /*
京东分类页面
11-22
来分析这个demo的主体构成吧，顶部为搜索栏，左侧是scroview，不要担心优化问题，因为scroview里面的TextView是动态生成的，完全不用担心优化问题，右侧是viewPager，Scroview可以控制viewPager的滑动，反之ViewPager也可以控制scroview的滑动。
jquery仿京东商城新版左侧分类导航
06-30
jquery仿京东商城新版左侧分类导航
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jQuery- 课堂笔记.pdf
11-25
jQuery- 课堂笔记
jquery-3.5.0.js jquery-3.5.0.min.js.zip
08-17
jquery-3.5.0.js jquery-3.5.0.min.js.zip
jquery-ui.min.js
11-07
jqueryUi-181107亲测可用，对应jquery-ui.min.js文件。
jQuery-3.6.0.min.js
11-14
jQuery-3.6.0.min.js
jQuery仿京东商品分类选项卡切换代码
06-10
jQuery仿京东商品分类选项卡切换代码是一款基于jquery.SuperSlide实现的京东商品tab选项卡切换特效。
京东分类页面部分的实现
xiaoxianmao666的博客
04-06 1540
分类主要布局的部分的代码 xml version="1.0" encoding="utf-8"?> LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http
jQuery——上机作业
weixin_44502548的博客
09-27 4622
一：制作京东首页右侧固定层 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0px; padding: 0px; font-size: 12px; } ul li{ list-style: none; } #nav{
仿京东分类页面h5的页面布局及css样式设置
zuo-yiran的博客
12-22 6357
项目中用到的分类界面要的效果类似于京东移动端的分类页面：（两侧都可滑动且互不影响） 效果如图： html代码如下：<aside class="mainport-left"> <ul class="categoryFirst"> <li class="active">柴米油盐<span></span></li> <li>柴米油盐1</li>
第二本第六章第4题京东商品分类列表页面
苏哲
10-18 1418
无标题文档 .oo { border: 2px solid #F60; height: 60x; width: 500px; } a{ text-decoration:none; } li{border-bottom-color:#000; border-bottom-width:1px; border-bottom-style:dotted; } di
京东分类页面①
05-03 266
ClassFragmentpackage com.example.a1512qjd.ui.fragment; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.v4.app.F...
京东商城的title
10-31 188
京东商城的title 把机打发票放在里面还是让人有些惊奇<title>京东网上商城-综合网购首选，正品行货，机打发票，售后上门取件，省钱又放心</title> <meta name="description" content="京东商城...
js将"2018-05-19T08:04:52.000+0000"这种格式的时间转化为正常格式
热门推荐
大海无量的博客
05-19 9万+
最终版解决办法（在IE下也可以）： 参考了：https://blog.csdn.net/cxwtsh123/article/details/82673598 后台返回的日期数据：2019-04-07T16:00:00.000+0000 ，转换后应该是：2019-04-08 截图： 代码： var time1="2019-04-07T16:00:00.000+0000"; va...
jquery之仿京东菜单
weixin_34050005的博客
02-04 295
$(function () { //上菜单 $("#ListTopUL li").hover(function () { //$(this).addClass("ListTopULhover"); //$(this).siblings(this).removeClass("ListTopULhover"); va...
jquery-validation-1.14.0下载
最新发布
01-20
jquery-validation-1.14.0 是一个用于验证表单的 jQuery 插件，可以帮助开发人员轻松地对表单进行实时验证。要下载 jquery-validation-1.14.0，首先需要打开 jQuery Validation 插件的官方网站或者在 GitHub 上搜索...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值