jQuery + CSS 实战——典型例子详细教学解析

本文为chenmeiqi原创,转载请标明出处~


1、开关switch实现

效果

如图,实现一开关效果,鼠标点击可切换状态:

思路

  • 两种状态,on和off
  • off时,背景灰色,左边圆深灰色,右边圆与背景同色以实现隐藏
  • on时,背景绿色,右边圆白色,左边圆与背景同色以实现隐藏
  • 初识时状态为off,为整个开关绑定一个click事件,用来toggleClass(交换on和off)

代码 

<style>
	.switch 
	{
		display: flex;
		border: solid 1px #aaa;
		width: 62px;		
		height: 32px;
		background: #ccc;
	}

	.button 
	{
		margin: 2px;
		width: 28px;
		height: 28px;
		cursor: pointer;
	}

	.round
	{
		border-radius: 16px;
	}

	.off
	{
		background: #ddd;
	}

	.off div:first-child {
		background: #aaa;
	}

	.off div:last-child {
		background: transparent;
	}

	.on
	{
		background: #3a7;
	}

	.on div:first-child {
		background: transparent;
	}

	.on div:last-child {
		background: #fff;
	}
</style>

<script src="jquery.js"></script>

<script>
	$(document).ready( function () {
		$(".button").click( function() {
			$(".switch").toggleClass("on", "off");
		});
	});
</script>

<div class="switch round off">
	<div class="button round"></div>
	<div class="button round"></div>
</div>

 

2、list鼠标交互列表(纯CSS实现)

效果

如图,鼠标放上时列表会有颜色、形状的变化

思路

  • :hover实现鼠标悬浮
  • :first-child、:last-child选中第一个孩子和最后一个孩子

代码

版本1:

<style>
	* {
		font-family: "Calibri";
		font-size: 1.05em;
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		width: 20em;
	}

	li div:first-child {
		padding: .5em 0 0 1em;
		width: 1.5em;
		height: 2em;
		border: solid 1px red;
		border-radius: 2em;
		color: red;
		transition: all 0.5s ease-in-out;
	}

	li div:last-child {
		position: relative;
		top: -2em;
		left: 3em;
		width: 8em;
	}

	li:hover div:first-child {
		width: 8.5em;
		text-align: left;
		color: white;
		background: red;
	}

	li:hover div:last-child {
		color: white;
	}
</style>

<div>
	<ul>
		<li><div>1</div><div>apple</div></li>
		<li><div>2</div><div>orange</div></li>
		<li><div>3</div><div>pear</div></li>
	</ul>
</div>

版本2:(flex实现)

<style >
	ul,li{
		list-style: none;
		margin: 0;
		padding: 0;
	}

	li{
		position: relative;
		left: 0;
		display: flex;

	}

	li div:first-child
	{
		display: flex;
		text-indent: 1.2rem;
		align-items: center;
		width: 3rem;
		height: 3rem;
		color: orange;
		border: solid 2px orange;
		border-radius: 2rem; /*所有的边长*/

		transition: all 0.5s ease-in-out;
		
	}

	li div:last-child
	{
		display: flex;
		align-items: center;
		height: 3rem;
		position: absolute;;
		left:4rem;
	}

	li:hover div:first-child
	{
		background: crimson;
		color:white;
        width: 10rem;
	}

	li:hover div:last-child
	{		
		color:white;
	}

</style>

<div>
	<ul>
		<li><div>1</div> <div>apple</div></li>
		<li><div>2</div> <div>orange</div></li>
		<li><div>3</div> <div>pear</div></li>
	</ul>
</div>

 

3、动态交互菜单栏

效果

如图,点击主菜单栏menu item时会展开子菜单栏,并收起其它菜单栏:

思路

  • 自定义属性parent
  • 点击添加类active并下拉,同时上滑原有active类
  • .attr获取元素id,[parent=${id}]进行判断,实现点击哪个menu item,就展开它对应的子菜单

代码

<style>
	*{
		font-family: "Segoe UI Light";
		font-size:1.2rem;	   /*150%,百分比存在问题,跟屏幕大小有关*/
	}
	ul,li{
		list-style: none;
		margin:0;
		padding: 0;
	}

	.menu{
		width: 16rem;
		background: crimson;
	}

	li{
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;		/*光标由插入改为可点*/
	}

	.menu > li{		/*menu下直接的li子元素*/
		height: 2.5rem;
		color: white;
	}

	.submenu > li{		/*menu下直接的li子元素*/
		height: 2rem;
		color: white;
		font-size: 1rem;
		background: #f08890;
	}

	.submenu{
		display: none;
	}
</style>

<script src="jquery.js"></script>
<script>
	$(function(){
		$(".menu>li").click(function(){
			$(".active").slideUp();
			var id =$(this).attr("id");
			$(`.submenu[parent=${id}]`).addClass("active").slideDown();
		});
	});
</script>
<div>
	<ul id="main" class="menu">
		<li id="p1">menu item1</li>
			<ul class="submenu" parent="p1">	<!--parent是自定义的属性-->
				<li>submenu1 item1</li>
				<li>submenu1 item2</li>
				<li>submenu1 item3</li>
			</ul>
		<li id="p2">menu item2</li>
			<ul class="submenu"  parent="p2">
				<li>submenu2 item1</li>
				<li>submenu2 item2</li>
				<li>submenu2 item3</li>
				<li>submenu2 item4</li>
			</ul>
		<li id="p3">menu item3</li>
			<ul class="submenu"  parent="p3">
				<li>submenu3 item1</li>
				<li>submenu3 item2</li>
				<li>submenu3 item3</li>
			</ul>
	</ul>
</div>

 

4、交互动态导航栏

效果

如图,点击的导航栏呈现橙色,并且下方会显示其对应的段落内容;

鼠标悬停的导航栏呈天蓝色;

没有任何操作的导航栏呈浅绿色。

思路

  • 初始时显示第一段(即设置为active),其它设置为none
  • .hover 设置颜色变化
  • event.preventDefault() 阻止缺省事件
  • .attr获取属性,展现导航栏对应的段落内容,同时隐藏其它段落。

代码 

<style>
	*{
		font-family: "Segoe UI Light";
		font-size:1.2rem;	   /*150%,百分比存在问题,跟屏幕大小有关*/
	}
	ul,li{
		list-style: none;
		margin:0;
		padding: 0;
	}
	a{
		text-decoration: none;
	}

	.tab>ul{	/*使仅对导航有效*/
		display: flex;
	}

	.tab>ul a{		/*为a而不是li做样式,因为可点击的是a元素,让它去找父元素很麻烦*/
		display: flex;
		align-items: center;
		padding:0 1.5rem;
		height: 3rem;
		color: white;
		background: lightgreen;
	}
	.tab>ul a:hover{
		background: skyblue;
	}

	.tab>div{
		display: none;
	}

	.tab>div.active{
		display: block;
	}

	.tab>ul a.active{
		background: orange;
	}
</style>

<script src="jquery.js"></script>
<script>
	$(function(){
		$(".tab>ul a").click(function(event){
			 event.preventDefault();	//阻止缺省事件

			$(".tab>ul a.active").removeClass("active");
			$(this).addClass("active");

			$(".tab>div.active").removeClass("active").hide();

			var id=$(this).attr("href");
			$(`.tab>div[id=${id}]`).addClass("active").show();
		});
	});
</script>

<div class="tab">
	<ul>
		<li><a href="p1" class="active">Paragraph1</a></li>
		<li><a href="p2">Paragraph2</a></li>
		<li><a href="p3">Paragraph3</a></li>
	</ul>
    <div id="p1" class="active">
        Harry Potter is a series of seven fantasy novels written by the British author J. K. Rowling. The series, named after the titular character, chronicles the adventures of a young wizard, Harry Potter, and his friends Ronald Weasley and Hermione Granger, all of whom are students at Hogwarts School of Witchcraft and Wizardry. The main story arc concerns Harry's quest to overcome the Dark wizard Lord Voldemort, who aims to become immortal, conquer the wizarding world, subjugate non-magical people, and destroy all those who stand in his way, especially Harry Potter.
    </div>
    <div id="p2">
        Since the release of the first novel, Harry Potter and the Philosopher's Stone, on 30 June 1997, the books have gained immense popularity, critical acclaim, and commercial success worldwide.[2] The series has also had some share of criticism, including concern for the increasingly dark tone. As of July 2013, the book series had sold between 400 and 450 million copies, making it the best-selling book series in history, and had been translated into 73 languages.[3][4] The last four books consecutively set records as the fastest-selling books in history, with the final instalment selling approximately 11 million copies in the United States within the first twenty-four hours of its release.
    </div>
    <div id="p3">
        A series of many genres, including fantasy, coming of age, and the British school story, (with elements of mystery, thriller, adventure, and romance), it has many cultural meanings and references.[5] According to Rowling, the main theme is death.[6] There are also many other themes in the series, such as prejudice and corruption.[7]
    </div>
</div>

 

5、换肤系统

效果

如图,通过点击“change theme”即可实现换肤。

思路

  • :root 设置颜色变量
  • 两种主题 .themered, .themeblue 分别设置不同的color1、color2
  •  text-align: justify 设置文字对齐
  • linear-gradient(to bottom,var(--color1) 30%,var(--color2))  设置渐变
  • event.preventDefault() 阻止缺省事件
  • toggleClass 交换两类

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
    :root {
        --turquoise: #1abc9c;
        --greensea: #16a085;

        --emerald: #2ecc71;
        --nephritis: #27ae60;

        --river: #3498db;
        --hole: #2980b9;

        --asphalt: #34495e;
        --midnight: #2c3e50;

        --sunflower: #f1c40f;
        --orange: #f39c12;

        --cloud: #ecf0f1;
        --silver: #bdc3c7;

        --alizarin: #e74c3c;
        --pome: #c0392b;
    }

    .themered{
        --color1:var(--alizarin);
        --color2:var(--midnight);
    }

    .themeblue{
        --color1:var(--river);
        --color2:var(--nephritis);
    }

    article{
        font-family: "Segoe UI Light";
        font-size: 1.25rem;
        padding: 2rem;
        text-align: justify;
        color: white;
        background: linear-gradient(to bottom,var(--color1) 30%,var(--color2))
        /*background: linear-gradient(to bottom,red,green);*/
    }
</style>
</head>
<body>
    <script src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        $("a").click(function(e){
            e.preventDefault();
            $("article").toggleClass("themered themeblue");
        });
    });
    </script>

<a href="#">change theme</a>

<article class="themeblue">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
    <p>Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend.</p>
    <p>Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.</p>
    <p>Etiam eget dui. Aliquam erat volutpat. Sed at lorem in nunc porta tristique. Proin nec augue. Quisque aliquam tempor magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac magna.</p>
</article>
</body>
</html>

 

6、动画标题效果(纯CSS实现)

效果

如图,当鼠标悬停到左侧圆圈上时,会有动画效果;当鼠标离开时,同样有离开的动画效果。

思路

  • 同样设置了颜色变量,设置了三种颜色类.red、.blue、.green。注意这种方法,修改时非常方便。
  • fr 表示剩余填充
  • 圆圈position设置为relative,动画出来的横条position设置为absolute,并设置横条相对于圆圈的位置
  • transform-origin: 6rem 2rem  设置横条旋转中心; transform:rotate(-90deg)  设置横条旋转角度
  • opacity设置透明度,初始时其值设为0,即全透明
  • transition: all .6s ease-in-out   动画,渐入渐出
  • boxshadow设置阴影
  • 圆圈同样设置动画(鼠标悬停阴影变化)
  • .c .a:hover+.b   + 号 表示紧邻

代码

<style>
:root {
    --turquoise: #1abc9c;
    --greensea: #16a085;

    --emerald: #2ecc71;
    --nephritis: #27ae60;

    --river: #3498db;
    --hole: #2980b9;

    --asphalt: #34495e;
    --midnight: #2c3e50;

    --sunflower: #f1c40f;
    --orange: #f39c12;

    --cloud: #ecf0f1;
    --silver: #bdc3c7;

    --alizarin: #e74c3c;
    --pome: #c0392b;
}

.red{
    --bk1:var(--alizarin);
    --bk2:var(--asphalt);
}

.blue{
    --bk1:var(--river);
    --bk2:var(--pome);
}

.green{
    --bk1:var(--emerald);
    --bk2:var(--greensea);    
}

body{
    text-align: center;
    font-family: "Segoe UI Light";
    font-size: 1.25rem;

}

.page{
    margin: auto;
    display: flex;
    width: 90%;

}

aside{
    width: 8rem;
}

article{
    /*width: 8rem;*/
    width: 1fr;
    text-align: justify;
    padding: 2rem 3rem;
}

.c{
    position: relative;
    margin: 4rem 0;
}

.c .a{
    position: relative; /*为了显示出来,位置也要设置为相对*/
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8rem;
    height: 8rem;
    color: white;
    background: var(--bk1);
    border-radius: 50%;
    box-shadow: 0 6px 8px rgba(0,0,0,.3);   /*  阴影*/
    transition: all .6s ease;
}

.c .b{
    display: flex;
    align-items: center;
    justify-content: flex-end;  /*右对齐*/
    position: absolute;
    top: 2rem;
    left: -2rem;
    width: 25rem;
    height: 4rem;
    padding-right: 2rem;
    color: white;
    background: var(--bk2);
    border-radius: 2rem;
    transform-origin: 6rem 2rem;    /*旋转中心*/
    transform:rotate(-90deg);       /*旋转角度*/
    opacity: 0; /*初始不透明度为0(即全透明)*/
    transition: all .6s ease-in-out;

}

.c .a:hover{
     box-shadow: 0 6px 16px rgba(0,0,0,.4);   /*  阴影*/
}

.c .a:hover+.b{     /*+表示紧邻*/
    opacity: .9;
    transform: rotate(0);

}
</style>

<body>
    <div class="page">
        <aside>
            <div class="c red">
                <div class="a">News</div>
                <div class="b">What's new in our campus</div>
            </div>
            <div class="c blue">
                <div class="a">Event</div>
                <div class="b">What happened recently</div>
            </div>
            <div class="c green">
                <div class="a">Story</div>
                <div class="b">Tell you our stories</div>
            </div>
        </aside>
        <article>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            <p>Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend.</p>
            <p>Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.</p>
            <p>Etiam eget dui. Aliquam erat volutpat. Sed at lorem in nunc porta tristique. Proin nec augue. Quisque aliquam tempor magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac magna.</p>
        </article>
    </div>
</body>

 

相关推荐
1. 2款jQuery图片自动切换常用广告代码 2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery仿flash产品图片多角度展示特效代码 8. jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9. jquery仿flash的图片幻灯片播放特效实例完整版 10. jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载 11. jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载 12. jQuery仿动感flash自动滚动图片切换广告插件 13. jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14. jquery仿苏宁易购商城产品图片全方位展示功能 15. jquery制作漂亮按钮示例打包 16. jQuery动态切换网页背景的大块图片的导航栏代码 17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20. jQuery大气banner带时间线自动播放的焦点图轮番切换代码 21. jquery定时自动切换banner广告图片动画插件示例 22. jquery实现LightBox图片点击放大效果的图片盒子插件 23. jQuery实现slider图片滚动,单个滚动,成组滚动示例 24. jQuery实现产品图片循坏旋转的代码 25. jQuery实现动态图文分组排序切换源码 26. jQuery实现图片3D旋转特效插件 v1.1版本下载 27. jQuery实现图片3D立体感的前后轮番展示特效 28. jQuery实现图片取景器仿相机拍照功能的插件photoShoot 29. jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30. jquery实现图片可拖动展示的实例下载 31. jQuery实现拖动滚动条的缩略图排列插件下载 32. jQuery实现焦点图片Flash自动平滑渐变效果 33. jQuery实现鼠标移到链接提示显示图片功能插件 34. jquery实现鼠标经过链接放大图片特效代码 35. jquery实用Banner大图片横向切换效果 36. jquery实用产品图片展示动感切换效果源码 37. jquery平滑交换真彩色的图片逐渐变为黑白图像的代码 38. jquery异步加载图片的插件jqGalScroll下载 39. jquery微型相册插件Micro Image Gallery下载 40. jQuery把图片放大及变亮特效插件下载 41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) 47. jquery版自动滚动图片动画特效插件可处理图片JSON数据源 48. jQuery电子商务网站产品展示插件之仿苏宁易购商城产品图展示特效 49. jquery相册播放器插件实现无序图片列表转换成有序并播放 50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery贴图旋转及缩放插件下载 56. jquery门户网站首页全屏弹性伸缩至小屏的广告代码(非常实用) 57. jQuery黑色动感Ajax无刷新动态分组图片效果代码 58. jquery黑色风格左右带箭头的图片浏览控制插件下载 59. jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60. jQuery鼠标移上小图显示大缩略图功能
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页