1、鼠标点击谁，谁变色
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js"></script>
<style>
button {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
</body>
<script type="text/javascript">
$('button').click(function(){
$(this).css('background-color','red');
$(this).siblings('button').css('background-color','');
})
</script>
</html>
2、鼠标放在左边哪一栏，右边那一栏图片展示
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js"></script>
<style type="text/css">
ul {
float: left;
padding-top: 140px;
}
li {
margin: 5px;
padding: 7px;
list-style: none;
color: #333333;
font-size: 18px;
background-color: royalblue;
color: #fff;
border-radius: 5px;
}
li:hover {
color: #333333;
}
.info img {
display: none;
width: 300px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>张三</li>
<li>李四</li>
</ul>
<div class="info">
<img src="img/zs.jpg" alt="" />
<img src="img/ls.jpg" alt="" />
</div>
</div>
</body>
<script type="text/javascript">
$('.box li').mouseenter(function(){
var index=$(this).index();
$('.info img').eq(index).show();
$('.info img').eq(index).siblings().hide()
})
</script>
</html>
2、随着标题更换，更显示对应内容
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul {
list-style: none;
background-color: #CCCCCC;
text-align: center;
}
li {
display: inline-block;
width: 110px;
padding: 10px;
font-size: 18px;
color: #fff;
}
.current {
background-color: red;
}
.content {
display: none;
}
.content:first-child {
display: block;
}
</style>
</head>
<body>
<div class="info">
<ul>
<li class="item">首页</li>
<li class="item">关于我们</li>
<li class="item">产品信息</li>
<li class="item">联系我们</li>
</ul>
</div>
<div class="deatil">
<div class="content">我是首页</div>
<div class="content">我是关于我们</div>
<div class="content">我是产品信息</div>
<div class="content">我是联系我们</div>
</div>
</body>
<script src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('.info .item').mouseenter(function(){
$(this).addClass('current').siblings().removeClass('current');
var index=$(this).index();
$('.deatil .content').eq(index).show().siblings().hide();
});
});
</script>
</html>
3、下拉展示内容和隐藏内容
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box {
margin-top: 20px;
width: 400px;
height: 300px;
background-color: rosybrown;
text-align: center;
display: none;
}
</style>
</head>
<body>
<button>点击1</button>
<button>点击2</button>
<button>点击3</button>
<button>点击4</button>
<div class="box">
<p>展示内容~</p>
</div>
</body>
<script src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('button').eq(0).click(function(){
$('.box').slideDown();
});
$('button').eq(1).click(function(){
$('.box').slideUp();
});
$('button').eq(2).click(function(){
$('.box').slideToggle();
});
//鼠标经过和离开 -显示和隐藏
$('button').eq(3).hover(function(){
$('.box').slideToggle().show();
});
});
</script>
</html>
4、鼠标悬浮选中内容出现高亮效果
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js"></script>
<style type="text/css">
.box {
margin: 200px;
width: 700px;
}
.box>ul {
list-style: none;
}
.box li {
float: left;
border: 10px solid #333333;
}
img {
width: 200px;
};
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<img src="img/1618286142(1).jpg"/>
</li>
<li>
<img src="img/1618286142(1).jpg"/>
</li>
<li>
<img src="img/1618286142(1).jpg"/>
</li>
<li>
<img src="img/1618286142(1).jpg"/>
</li>
<li>
<img src="img/1618286142(1).jpg"/>
</li>
<li>
<img src="img/1618286142(1).jpg"/>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
$('.box li').hover(function(){
$(this).siblings().stop().fadeTo(500,0.5);
},function(){
$(this).siblings().stop().fadeTo(500,1);
});
</script>
</html>
手风琴动画效果
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js"></script>
<style type="text/css">
ul {
list-style: none;
}
.king {
width: 1500px;
background-color: #333;
overflow: hidden;
}
.king ul {
overflow: hidden;
}
.king li {
position: relative;
float: left;
width: 69px;
height: 69px;
margin-left: 8px;
}
.smail {
position: relative;
left: 0;
top: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
.king .current {
width: 224px;
height: 69px;
}
.current .big {
display: block;
}
.current .smail {
display: none;
}
.big {
display: none;
width: 224px;
height: 69px
}
</style>
</head>
<body>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="img/smail.jpg" class="smail"/>
<img src="img/big.jpg" class="big"/>
</a>
</li>
<li >
<a href="#">
<img src="img/smail.jpg" class="smail"/>
<img src="img/big.jpg" class="big"/>
</a>
</li>
<li >
<a href="#">
<img src="img/smail.jpg" class="smail"/>
<img src="img/big.jpg" class="big"/>
</a>
</li>
<li >
<a href="#">
<img src="img/smail.jpg" class="smail"/>
<img src="img/big.jpg" class="big"/>
</a>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function(){
$('.king li').mouseenter(function(){
/*1、当前的li宽度变为224px，同时内部大图片淡入，小图片淡出*/
$(this).stop().animate({
width:224
},500).find('.smail').stop().fadeOut().siblings('.big').stop().fadeIn();
/*2、让其余兄弟小li宽度变为69px,小图淡入，大图淡出*/
$(this).siblings().stop().animate({
width:69
},500).find('.smail').stop().fadeIn().siblings('.big').stop().fadeOut();
})
});
</script>
</html>
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js"></script>
<style type="text/css">
.box {
margin: 50px 0;
}
.contents input {
display: ;
}
</style>
</head>
<body>
<div class="box">
<input type="checkbox" name="" id="" value="" class="allChe"/>全选
</div>
<div class="contents">
<input type="checkbox" name="" id="" value="" class="itemChe"/>选中 <span>袜子1双</span><br />
<input type="checkbox" name="" id="" value="" class="itemChe"/>选中<span>鞋子1件</span><br />
<input type="checkbox" name="" id="" value="" class="itemChe"/>选中<span>帽子2件</span>
</div>
<div class="box">
<input type="checkbox" name="" id="" value="" class="allChe"/>全选
</div>
</body>
<script type="text/javascript">
$(function(){
/*当全选按钮发生改变时，让单个按钮的选中状态和全选按钮的选中状态一致*/
$('.allChe').change(function(){
$('.allChe, .itemChe').prop("checked",$(this).prop("checked"));
});
/*当单个按钮的选中状态<小按钮的总数时，全选按钮不选中，否则选中*/
$('.itemChe').change(function(){
if($('.itemChe:checked').length===$('.itemChe').length){
$('.allChe').prop("checked",true);
}else{
$('.allChe').prop("checked",false);
}
})
});
</script>
</html>
右边导航展示或隐藏；点击回到顶部
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js"></script>
<style type="text/css">
.box {
margin-top: 400px;
width: 100%;
height: 500px;
background-color: royalblue;
}
.content {
position: relative;
width: 100%;
height: 500px;
}
.nav {
position: absolute;
top: 10px;
right: 0;
width: 100px;
height: 50px;
background-color: darkcyan;
display: none;
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="content">
<div class="nav">回到顶部</div>
</div>
</body>
<script type="text/javascript">
$(function(){
// $(window).scrollTop(100)
/*获取盒子距离浏览器顶部的距离*/
var top=$('.box').offset().top;
$(window).scroll(function(){
console.log($(document).scrollTop())
if($(document).scrollTop() >= top){
$('.nav').fadeIn();
}else{
$('.nav').fadeOut();
}
});
//动画版返回顶部
$('.nav').click(function(){
$('body,html').stop().animate({
scrollTop:0
});
});
});
</script>
</html>
任务发布或删除
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.5.1.min.js"></script>
<title></title>
<style>
ul {
list-style: none;
}
li {
display: none;
}
.box {
width: 300px;
border: 1px solid #ccc;
}
textarea {
border: 1px solid #ccc;
outline: none;
width: 250px;
}
</style>
</head>
<body>
<div class="box">
<textarea name="" rows="" cols="" class="shr" placeholder="请发表内容"></textarea>
<a href="javascript:" class="fb" >发布</a>
<ul class="info">
</ul>
</div>
<script type="text/javascript">
$(function(){
/*点击发布按钮 创建一个小li，放文本框和删除按钮，并且添加到ul中*/
$('.fb').on('click',function(){
/*创建li*/
var li=$('<li></li>');
/*把输入的内容和删除的a标签放入li中*/
li.html($('.shr').val() + "<a href='javascript:;'>删除</a>");
/*把li追加到ul之前的li前面*/
$('.info').prepend(li);
li.slideDown();
$('.shr').val("");
})
/*点击删除按钮，删除当前留言信息*/
$('ul').on('click','a',function(){
/*a的父元素是li，把li移除*/
/*给li添加上滑动时间后，回调函数内移除当前的a*/
$(this).parent().slideUp(function(){
$(this).remove();
})
})
})
</script>
</body>
</html>
图片懒加载和瀑布流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/pinterest_grid.js"></script>
<script src="js/pinterest_grid.js"></script>
<title></title>
<style type="text/css">
#gallery-wrapper {
position: relative;
max-width: 75%;
width: 75%;
margin: 50px auto;
}
img.thumb {
width: 100%;
max-width: 100%;
height: auto;
}
.white-panel {
position: absolute;
background: white;
border-radius: 5px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
padding: 10px;
}
.white-panel h1 {
font-size: 1em;
}
.white-panel h1 a {
color: #A92733;
}
.white-panel:hover {
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
margin-top: -5px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
</style>
</head>
<body>
<section id="gallery-wrapper">
<article class="white-panel">
<img data-lazy-src="img/1.jpg" class="thumb">
<h1><a href="#">Title 1</a></h1>
<p>Description 1</p>
</article>
<article class="white-panel">
<img data-lazy-src="img/2.jpg" class="thumb">
<h1><a href="#">Title 2</a></h1>
<p>Description 2</p>
</article>
<article class="white-panel">
<img data-lazy-src="img/3.jpg" class="thumb">
<h1><a href="#">Title 3</a></h1>
<p>Description 3</p>
</article>
<article class="white-panel">
<img data-lazy-src="img/4.jpg" class="thumb">
<h1><a href="#">Title 4</a></h1>
<p>Description 4</p>
</article>
<article class="white-panel">
<img data-lazy-src="img/5.jpg" class="thumb">
<h1><a href="#">Title 5</a></h1>
<p>Description 5</p>
</article>
<article class="white-panel">
<img data-lazy-src="img/6.jpg" class="thumb">
<h1><a href="#">Title 6</a></h1>
<p>Description 6</p>
</article>
<article class="white-panel">
<img data-lazy-src="img/7.jpg" class="thumb">
<h1><a href="#">Title 7</a></h1>
<p>Description 7</p>
</article>
<article class="white-panel">
<img data-lazy-src="img/8.jpg" class="thumb">
<h1><a href="#">Title 8</a></h1>
<p>Description 8</p>
</article>
<article class="white-panel">
<img data-lazy-src="img/9.jpg" class="thumb">
<h1><a href="#">Title 9</a></h1>
<p>Description 9</p>
</article>
<article class="white-panel">
<img data-lazy-src="img/10.jpg" class="thumb">
<h1><a href="#">Title 10</a></h1>
<p>Description 10</p>
</article>
<article class="white-panel">
<img data-lazy-src="img/11.jpg" class="thumb">
<h1><a href="#">Title 11</a></h1>
<p>Description 11</p>
</article>
<article class="white-panel">
<img data-lazy-src="img/12.jpg" class="thumb">
<h1><a href="#">Title 12</a></h1>
<p>Description 12</p>
</article>
<article class="white-panel">
<img data-lazy-src="img/13.jpg" class="thumb">
<h1><a href="#">Title 13</a></h1>
<p>Description 13</p>
</article>
<article class="white-panel">
<img data-lazy-src="img/14.jpg" class="thumb">
<h1><a href="#">Title 14</a></h1>
<p>Description 14</p>
</article>
<article class="white-panel">
<img data-lazy-src="img/15.jpg" class="thumb">
<h1><a href="#">Title 15</a></h1>
<p>Description 15</p>
</article>
</section>
</body>
<script type="text/javascript">
$(function() {
$("#gallery-wrapper").pinterest_grid({
no_columns: 2,
padding_x: 10,
padding_y: 10,
margin_bottom: 50,
single_column_breakpoint: 700
});
});
</script>
<!--图片懒加载，EasyLazyload.js一定要放到图片下面-->
<script src="js/EasyLazyload.min.js"></script>
<script>
lazyLoadInit({
/* coverColor:"blue",
coverDiv:"<h1>test</h1>",
offsetBottom:0,
offsetTopm:0,*/
showTime:1100,
onLoadBackEnd:function(i,e){
console.log("onLoadBackEnd:"+i);
}
,onLoadBackStart:function(i,e){
console.log("onLoadBackStart:"+i);
}
});
</script>
</html>
使用全屏滚动查询制作网站
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/fullpage.min.css" />
<style type="text/css">
body {
}
#menu {
position: fixed;
top: 35% !important;
right: 80px !important;
margin: 0;
padding: 0;
position: fixed;
list-style-type: none;
z-index: 70;
}
#menu li {
display: block !important;
font-size: 14px;
}
#menu a {
display: block;
margin: 10px auto;
padding: 15px;
background-color: #fff;
color: #333;
font-size: 16px !important;
text-decoration: none;
border-radius: 2px;
}
#menu .active a {
font-size: 16px !important;
color: #fff;
background-color: #539cf8;
}
.section {
text-align: center;
font: 50px "Microsoft Yahei";
color: #fff;
}
</style>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/fullpage.min.js"></script>
<script>
$(function() {
$('#dowebok').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
anchors: ['page1', 'page2', 'page3', 'page4'],
menu: '#menu'
});
});
</script>
</head>
<body>
<ul id="menu">
<li data-menuanchor="page1" class="active">
<a href="#page1">企业文化</a>
</li>
<li data-menuanchor="page2">
<a href="#page2">公司简介</a>
</li>
<li data-menuanchor="page3">
<a href="#page3">业务介绍</a>
</li>
<li data-menuanchor="page4">
<a href="#page4">联系我们</a>
</li>
</ul>
<div id="dowebok">
<div class="section">
<h3>第一屏</h3>
<p>fullPage.js — 绑定菜单演示</p>
</div>
<div class="section">
<h3>第二屏</h3>
<p>请查看左上角，点击可以控制</p>
</div>
<div class="section">
<h3>第三屏</h3>
<p>绑定的菜单没有默认的样式，你需要自行编写</p>
</div>
<div class="section">
<h3>第四屏</h3>
<p>这是最后一屏</p>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#dowebok').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
anchors: ['page1', 'page2', 'page3', 'page4'],
menu: '#menu'
});
});
</script>
</body>
</html>
页面加载弹出模态框（基于bootstrap） 模态框的id.modal();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- Button trigger modal -->
<!--<button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#exampleModal">
点击弹出
</button>-->
11
<!-- Modal -->
<div class="modal fade" id="btn" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="exampleModalLabel">通知</h2>
<!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>-->
</div>
<div class="modal-body">
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('#btn').modal();
});
</script>
</body>
</html>
强制阅读的弹出框
图片.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#colseBtn {
outline: none !important;
}
#colseBtn:hover {
background-color: #fa5151;
color: #fff;
}
</style>
</head>
<body>
<!-- Button trigger modal -->
<!--<button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#exampleModal">
点击弹出
</button>-->
11
<!-- Modal -->
<div class="modal fade" id="btn" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="background-color: #fff;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="exampleModalLabel">通知</h2>
<!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>-->
</div>
<div class="modal-body">
<p>使用颜色添加意义只提供一个视觉指示，这不会传达给需要辅助技术（如盲人、听力障碍者）的用户，也就决定了诸如屏幕阅读器并不能读出颜色本身的意义。一般推荐确保由颜色表示的信息从内容本身（例如可见文本）中显而易见，或者通过替代方法，例如隐藏在.sr-only该类中的附加文本来创造更多的辅助传达技术。
<p>使用颜色添加意义只提供一个视觉指示，这不会传达给需要辅助技术（如盲人、听力障碍者）的用户，也就决定了诸如屏幕阅读器并不能读出颜色本身的意义。一般推荐确保由颜色表示的信息从内容本身（例如可见文本）中显而易见，或者通过替代方法，例如隐藏在.sr-only该类中的附加文本来创造更多的辅助传达技术。
<p>使用颜色添加意义只提供一个视觉指示，这不会传达给需要辅助技术（如盲人、听力障碍者）的用户，也就决定了诸如屏幕阅读器并不能读出颜色本身的意义。一般推荐确保由颜色表示的信息从内容本身（例如可见文本）中显而易见，或者通过替代方法，例如隐藏在.sr-only该类中的附加文本来创造更多的辅助传达技术。
<p>使用颜色添加意义只提供一个视觉指示，这不会传达给需要辅助技术（如盲人、听力障碍者）的用户，也就决定了诸如屏幕阅读器并不能读出颜色本身的意义。一般推荐确保由颜色表示的信息从内容本身（例如可见文本）中显而易见，或者通过替代方法，例如隐藏在.sr-only该类中的附加文本来创造更多的辅助传达技术。
<p>使用颜色添加意义只提供一个视觉指示，这不会传达给需要辅助技术（如盲人、听力障碍者）的用户，也就决定了诸如屏幕阅读器并不能读出颜色本身的意义。一般推荐确保由颜色表示的信息从内容本身（例如可见文本）中显而易见，或者通过替代方法，例如隐藏在.sr-only该类中的附加文本来创造更多的辅助传达技术。 .sr-only，全称 screen reader only,意为:(仅供)屏幕阅读器,这个 class 主要用于增强 accessbility(可访问性),有时候 UI 上会出现一些仅供视觉识别的元素，比如说“菜单按钮”，只有视力正常的人才能清楚辨识这些元素的作用。而残障人士，比如弱势或盲人是不可能知道这些视觉识别元素是什么的。他们上网使用的是屏幕阅读器，也就是 screen reader（sr），屏幕阅读器需要找到能辨识的文本说明然后“读”出来给用户听。问题是图形元素怎么可能“读出来”呢？因此我们还要写上这些元素的文本说明，但是又不需要展示给普通用户看到，于是加上 sr-only 的意义就在于能保证屏幕阅读器正确读取且不会影响 UI 的视觉呈现（译者补充）。</p>
</div>
<div class="modal-footer">
<p style="text-align: center;" class="gb">请仔细阅读，<span class="miao"></span>秒后可点击右下方【关闭】按钮</p>
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="colseBtn" disabled="true">关闭</button>
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#btn').modal();
time = 30;
var timer = setInterval(function() {
if(time == -1) {
//清除定时器
clearInterval(timer);
$('.gb').css('color','#C0C0C0');
//$('.gb').hide();
$('.btn-secondary').attr('disabled',false);
} else {
$('.miao').html(time);
time--;
}
}, 1000);
});
</script>
</body>
</html>
