js案例

最新推荐文章于 2021-09-25 10:10:41 发布
最新推荐文章于 2021-09-25 10:10:41 发布
阅读量5.6k 收藏 66
点赞数 8
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sphinx1122/article/details/86594060
版权

案例1：电影排行榜

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	* {padding: 0; margin: 0;}
	.box{
		width: 300px;
		height: 450px;
		margin: 50px auto;
		border: 1px solid #000;
	}.box>h1{
		font-size: 20px;
		line-height: 35px;
		color: deeppink;
		padding-left: 10px;
		border-bottom: 1px dashed #ccc;
	}

	ul>li{
		list-style: none;padding: 5px 10px;
		border: 1px dashed #ccc;

	}
	ul>li:nth-child(-n+3) span{
		background: deeppink;
	}
	ul>li>span{
		display: inline-block;
		width: 20px;
		height: 20px;
		background: #ccc;
		text-align:center;
		line-height: 20px;
		margin-right: 10px;
	}
	.content{
		overflow: hidden;
		display: none;
	}
	.content>img{
		width: 80px;
		height: 100px;
		float: left;
	}
	.content>p{
		width: 180px;
		height: 100px;
		float: right;
		font-size: 12px;
		line-height: 20px;
	}
	.current .content{
		display: block;
	}
</style>
<script src="js/jquery-1.12.js"></script>
<script>
$(function() {
	$("li").hover(function(){
		$(this).addClass("current")
	},function(){
		$(this).removeClass("current")
	})
})
</script>
</head>
<body>
	<div class="box">
		<h1>电影排行榜</h1>
		<ul>
			<li><span>1</span>战狼1
				<div class="content">
					<img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1075481921,1149912994&fm=58&w=121&h=140&img.JPEG">
					<p>
						简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一...
					</p>
				</div>
			</li>
			<li><span>2</span>战狼2
				<div class="content">
					<img src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1075481921,1149912994&fm=58&w=121&h=140&img.JPEG">
					<p>
						简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一...
					</p>
				</div>
			</li>
			<li><span>3</span>战狼3</li>
			<li><span>4</span>战狼4</li>
			<li><span>5</span>战狼5</li>
			<li><span>6</span>战狼6</li>
			<li><span>7</span>战狼7</li>
		</ul>
	</div>
</body>
</html>

在这里插入图片描述

案例2：对联广告

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	* {
		padding: 0; 
		margin: 0;
	}
	body{
		height: 2500px;
	}
	.left{
		float: left;
		position: fixed;
		left: 0;
		top: 200px;
	}
	.right{
		float: right;
		position: fixed;
		right:  0;
		top: 200px;
	}
	img{
		display: none;
	}
</style>
<script src="js/jquery-1.12.js"></script>
<script>
$(function() {
$(window).scroll(function(){
	// 网页滚动偏移位
	var offset = $("html,body").scrollTop()
	if(offset>=800){
		$("img").show(1000)
	}else{
		$("img").hide(1000)
	}
	console.log(offset)
})
})
</script>
</head>
<body>
	<img src="./img/dt.png" class="left">
	<img src="./img/dt.png" class="right">
</body>
</html>

在这里插入图片描述
案例三： 折叠菜单上

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	* {
		padding: 0; 
		margin: 0;
	}
	.nav{
		list-style: none;
		width: 300px;
		margin: 100px auto;
		/*border: 1px solid #000;*/
	}
	.nav>li{
		border: 1px solid #000;
		line-height: 35px;
		border-bottom: none;
		text-indent: 2em;
	}
	.nav>li:last-child{
		border-bottom: 1px solid #000;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
	}
	.nav>li:first-child{
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}
	.nav>li>span{
		float: right;
		padding-right: 15px;

	}
	.sub{
		display: none;
	}
	.sub>li{
		list-style: none;
		background: mediumpurple;
		border-bottom: 1px solid white;

	}
	.sub>li:hover{
		background: red;
	}
	.nav>.current>span{
		transform: rotate(90deg); /*旋转90度*/
	}

</style>
<script src="js/jquery-1.12.js"></script>
<script>
$(function() {
		//监听一级菜单 点击事件
		$(".nav>li").click(function(){
			// 拿到二级菜单
			var $sub = $(this).children(".sub")
			$sub.slideDown()
			//拿到非当前的二级菜单 ，让非当前的二级菜单收起
			var otherSub = $(this).siblings().children(".sub")
			otherSub.slideUp()
			//让箭头90度旋转
			$(this).addClass("current")
			$(this).siblings().removeClass("current")
	})
})
</script>
</head>
<body>
	<ul class="nav">
		<li>一级菜单<span>></span>
			<ul class="sub">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
		<li>一级菜单<span>></span>
			<ul class="sub">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
		<li>一级菜单<span>></span>
			<ul class="sub">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
	</ul>
</body>
</html>

在这里插入图片描述

案例四： 下拉菜单

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	* {
		padding: 0; 
		margin: 0;
	}
	.nav{
		list-style: none;
		width: 300px;
		height: 50px;
		background: red;
		margin: 100px auto;		
	}
	.nav>li{
		width: 100px;
		height: 50px;
		line-height: 50px;
		text-align: center;
		float: left;
	}

	.current{
		list-style: none;
		background: blue;
		display: none;
	}

</style>
<script src="js/jquery-1.12.js"></script>
<script>
$(function() {
	//监听一级菜单的移入事件
	$(".nav>li").mouseenter(function(){
		var $current = $(this).children(".current");
		//让当前正在运行的动画停止，
		$current.stop()
		//展示二级菜单
		$current.slideDown()
	})
	$(".nav>li").mouseleave(function(){
		var $current = $(this).children(".current");
		$current.stop()
		$current.slideUp()
	})
})
</script>
</head>
<body>
	<ul class="nav">
		<li>一级菜单
			<ul class="current">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
		<li>一级菜单
			<ul class="current">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
		<li>一级菜单
			<ul class="current">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
	</ul>

</body>
</html>

在这里插入图片描述

案例五：弹窗广告
让广告1秒钟上升，1秒钟消失，再1秒钟展示，动画之前先stop()停止其它动作，避免动画出现队列，即用户快速多次操作结束后，动画仍然在执行

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	* { padding: 0; margin: 0; 	}
	.ad{ position: fixed; right: 0; bottom:0; display: none; }
	.ad>span{ display: inline-block; width: 30px; height: 30px; /*background: red;*/ position: absolute; top: 0; right: 0; }
</style>
<script src="js/jquery-1.12.js"></script>
<script>
$(function() {
	$("span").click(function(){
		$(".ad").remove();

	});
	写法一：
	// 动画之前先调用 stop()，避免出现动画队列
	// slideDown()、fadeOut()、fadeIn()参数1动画耗时，参数2动画完毕执行的动作
	$(".ad").stop().slideDown(1000,function(){
		$(".ad").fadeOut(1000, function(){
			$(".ad").fadeIn(1000)
		})
	})
	*/
	//写法二：
	$(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(2000)

});
</script>
</head>
<body>
	<div class="ad">
		<img src="./img/5.jpg" alt="">
		<span></span>
	</div>
</body>
</html>

在这里插入图片描述

案例六：自定义动画
点击按钮控制两个方块

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	* {
		padding: 0; 
		margin: 0;
	}
	div{
		width: 100px;
		height: 100px;
		margin-top: 10px;
		background: red;
	}
	.two{
		background: blue;
	}
</style>
<script src="js/jquery-1.12.js"></script>
<script>
$(function() {
	$("button").eq(0).click(function(){
		$(".one").animate({
			width:50
		},2000,function(){
		});
		$(".two").animate({
			marginLeft:500
		},2000,"linear",function(){
		});
		
	})
	$("button").eq(1).click(function(){
		$(".one").animate({
			width:"+=100"
		},2000,function(){
		})
	})
	$("button").eq(2).click(function(){
		$(".one").animate({
			width:"hide"
		},2000,function(){
		})
	})
	$("button").eq(3).click(function(){
		$(".one").animate({
			width:"toggle"
		},2000,function(){
		})
	})
});
</script>
</head>
<body>
	<button>操作属性</button>
	<button>累加属性</button>
	<button>关键字hide</button>
	<button>关键字toggle</button>
	<div class="one"></div>
	<div class="two"></div>
</body>
</html>

在这里插入图片描述

案例七： 无限循环滚动
图片从右向左无限循环滚动，鼠标悬念暂停滚动，并给其它图片加上蒙版，鼠标移出继续滚动。
前2张图片与最后两张图片相同，是让图片在循环时避免卡登一下

<style>
	*{ margin: 0px; padding: 0px; }
	div{ width: 600px; height: 161px; border: 1px solid #000; margin: 100px auto; overflow: hidden;}
	ul{ list-style: none; width: 1800px; height: 161px; background: #000;}
	ul>li{ float: left;}
	img{ width: 300px;}
</style>
<script>
$(function(){
// 1.定义变量保存偏移位
var offset = 0;
// 2.让图片向左滚动
var timer;
function autoPlay(){		
	 timer = setInterval(function(){
		offset -= 10
		if(offset <= -1200){
			offset =0
		}
		$("ul").css("margin-left",offset)
	},50)
}
	autoPlay();
	// 3.监听li移入移出事件
	$("li").hover(function(){
		clearInterval(timer)
		$(this).siblings().fadeTo(100,0.5)
		$(this).fadeTo(100,1)
	},function(){
		autoPlay();
		$("li").fadeTo(100, 1)
	})
})
</script>
<div>
	<ul>
		<li><img src="img/dy.jpg"></li>
		<li><img src="img/call.jpg"></li>
		<li><img src="img/fyh.jpg"></li>
		<li><img src="img/2.jpg"></li>
		<li><img src="img/dy.jpg"></li>
		<li><img src="img/call.jpg"></li>
	</ul>
</div>

在这里插入图片描述

案例八： 动态创建的表单添加点击事件

点击 x 关闭整个对话框

<html>
<head>
  <title></title>
  <script src="./static/jquery.min.js"></script>
  <style>
    body>.layui-main{
      height: 2500px;
      margin-top: 50px;
    }
    .mask{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.2);
        position: fixed;
        top: 0;
        left: 0;
    }
    .login{
        width: 407px;
        height: 208px;
        margin: 100px auto;
        position: relative;
    }
    .login>span{
        width: 30px;
        height: 30px;
        position: absolute;
        top:0;
        right: 0;
        font-size: 1.8rem;
    }
  </style>
</head>
<body>
    <a href="#">点我登录</a>  
</body>
<script>
$(function(){
var $mask = $(
    '<div class="layui-main"> '+
    '  <div class="mask">'+
    '    <div class="login">'+
    '      <span> X</span>'+
    '      <img src="img/login.png" alt="">'+
    '    </div>  '+
    '  </div> '+
    '</div>');
$('a').click(function(){
    $('body').append($mask);
    $('body').delegate('.login>span', 'click', function(){
        $mask.remove();
    })
    return false;
})
})
</script>
</html>

在这里插入图片描述

一筐大白菜啊
关注
  • 8
    点赞
  • 踩
  • 66
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
200 个经典的js小例子。
02-09
JS 200 个经典的js小例子,很有用！
〖大前端 - 基础入门三大核心之JS篇(58)〗- 面向对象案例
最新发布
2401_84254343的博客
06-20 234
首先定义一个TrafficLight（红绿灯）类这个类的属性包括：当前颜色color属性、自己的DOM元素dom（因为在js中定义一个对象，这个对象是一个很抽象的数据结构，这个对象必须要通过自己的DOM属性才能管理自己下辖的这一片DOM，它的图片就是它的DOM）这个类的方法包括：初始化init()、绑定事件bindEvent()、切换颜色changeColor()实例化的对象本身是个key-value对的组合，包含color和dom对象，所以初学者可以理解为实例化类出来的这个对象比dom对象要”大“
js小案例
QQ849410011的博客
04-29 493
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .a1{ width: 600px; } tr:nth-child(odd){ background-color
25 道神奇的 javascript 示例，全答对算我输！！！
Yvette Lau的专栏
07-29 398
前言JavaScript 是一种很好的语言。它有一个简单的语法，庞大的生态系统，以及最重要，最伟大的社区。同时，我们都知道，JavaScript 是一个非常有趣又充满戏法的语言。他们中的有...
js的案例
xiaozhegaa的博客
12-10 1802
为了方便大家，我把代码打包上传到我的资源，大家可以去下载后部署到自己的网站上去，这样就不用你来copy代码了，免费下载哦，下面的代码都是从打包的源码中截取出来的额。2017/3/18有更新下载网址：http://download.csdn.net/detail/xiaozhegaa/9783956 ## 新开一个窗口：可以选择窗口中的属性window.html <body> 姓名
JavaScript案例
12-04
在本“JavaScript案例”压缩包中，包含了一系列的JS代码示例，这些案例可以帮助我们深入理解和掌握JavaScript的核心概念、语法结构以及实际应用技巧。 1. **基础语法** JavaScript的基础包括变量定义（var、let、...
JavaScript案例-js购物车
02-16
在这个“JavaScript案例-js购物车”中，我们将深入探讨如何使用JavaScript技术来构建一个基本的在线购物车功能。购物车是电商网站不可或缺的一部分，它允许用户选择商品并保存这些选择，直到他们准备结账。 首先，...
JavaScript案例-JavaScript
02-16
在描述中提到的"JavaScript案例"可能涵盖了多个实际应用场景。这些案例可能包括： 1. **DOM操作**：通过JavaScript，我们可以访问和修改文档对象模型（DOM），这使得我们能够动态地改变HTML元素的属性、内容或样式...
JavaScript案例-js表单验证
02-16
在这个"JavaScript案例-js表单验证"中，提供的"03_validation"文件很可能包含了上述提到的验证示例代码。你可以深入研究这些代码，了解具体的实现方式，并尝试根据自己的需求进行修改和扩展。通过实践，你将更好地...
JavaScript案例-js轮播图
02-16
在这个"JavaScript案例-js轮播图"中，我们将深入探讨如何使用纯JavaScript实现一个功能完善的轮播图效果。 首先，轮播图是网页设计中常见的元素，它允许展示一组图片或内容，并在用户交互或定时自动切换之间进行...
50个js经典案例
12-19
50个常用的js的案例，便于初学者更好的学习js
JavaScript实例大全
11-09
一个非常好的JS实例大全，适用于各种JS人群，学习必备，包含各种JS实例，由浅入深，
javascript100个非常炫丽实用的案例
12-06
文件包中包含100个非常炫酷的js实例，而且在页面中也非常的实用。技术含量非常高。
javascript趣味教学案例
08-07
猜拳游戏 金字塔 三种弹出窗口，javascript的入门 javascript的入门 网址:http://www.13itao.com
javascript实例备忘
weixin_30952103的博客
02-16 244
一，javascript动态显示： 如显示效果上图所示： 如图显示鼠标放在百度谷歌等字样上市动态显示其内容明细：代码如下：<head><title></title><script type="text/javascript">functioninitEvent() {varlinks=document.getElementsB...
Js小案列
wen0627的博客
09-25 460
1、共有两个小案例，第一个小案列是换网页背景图片，第一步是新建一个HTML文件，然后在bady中设置你要更换的网页背景，插入div，给div设置一个id命名为name，在div中插入p标签，最后在p标签中设置img标签插入你的图片。 2、接着设置css样式，设置name、p、img的样式。 3、最后设置js的样式，获取到图的id设置点击图片换背景。 4、第二个小案列是简单的轮播，第一步和上面的一样插入div，给div设置类和id，再添加style:left：-500px；。 ...
JS小案例
weixin_49758373的博客
06-27 117
案例1： 描述：在输入框输入内容，实现弹幕功能。 <body> <input type="text" id="words" /> <input type="button" value="走你" id="btn" /> </body> CSS代码如下： <style> .newList{ height: 100px; overflow: hidden;
javascript案例
06-12
以下是一个简单的 JavaScript 案例，可以实现在页面中输入数字，然后计算它们的和： ```html <!DOCTYPE html> <title>JavaScript 案例：求和 function sum() { var num1 = parseInt(document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值