手风琴特效练习

最新推荐文章于 2024-11-01 15:19:31 发布

yunshenriluo

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量471

点赞数

分类专栏： jquery应用文章标签： jquery html 前端学习笔记

本文链接：https://blog.csdn.net/yunshenriluo/article/details/78287551

版权

jquery应用专栏收录该内容

0 篇文章 0 订阅

订阅专栏

准备宽高相同的大图片5张，和jquery-1.11.1.min.js

<!DOCTYPE html> <!--声明文档类型 网页 DTD HTML5向下兼容所有老版本-->
<html><!--网页结构开始的地方 圈地 -->
	<head><!--设置网页基本信息 负责对外通信的区域 给机器看的-->
		<meta charset="utf-8" /><!--设置编码格式 支持中文的万国码 gb2312 gbk -->
		<title>拉萨手风琴特效</title><!--设置标题 -->
		<meta name="keywords" content="web前端" /><!--设置关键词 方便搜索引擎搜索 seo优化-->
		<meta name="description" content="这里是web前端" /><!--设置描述信息 免费的广告位 方便搜索引擎搜索 seo优化-->
		<style>/*H5 DTD 规定了页面会自动查找适合的type类型，不必再定义    统一存放页面上元素的样式 军火库*/
			*{/*通配符选择器 选择所有标签*/
				margin: 0px;/*清除默认外边距*/
				padding: 0;/*清除默认内边距*/
			}
			li{/*标签选择器*/
				list-style: none;/*清除列表指示器 清除小圆点*/
			}
			html,body{
				height: 100%;/*继承浏览器高度*//*继承html高度*/
			}
			body{
				position: relative;/*相对定位 参考系 不动如山 父爱如山*/
			}
			
			.bg-box{/*类选择器.+类名{}*/
				position: absolute;/*绝对定位 谁动谁儿子 父相子绝*/
				top: 0;
				left: 0;
				width: 100%;/*属性名称：属性值（单位）;*/
				height: 100%;
				
			}
			.bg-box img{/*inline-block:行内块级元素 默认对齐方式*/
				display: block;/*转换为块级元素 清除默认对齐属性*/
				width: 100%;
				height: 100%;
			}
			#wrap{/*id选择器 #+id名称{}*/
			    position: absolute;
			    width: 1090px;
			    height: 429px;
			    /*使此div居中方法一：
			     *top: 50%;
			    left: 50%;
			    margin-top: -214.5px;
			    margin-left: -545px;*/
			   top: 0;
			   left: 0;
			   right: 0;
			   bottom: 0;
			   margin: auto;
			    border: 1px solid #222;/*边框 粗细 样式 颜色*/
			}
			#wrap ul li div{
				width: 100px;
				height: 429px;
				background:rgba(0,0,0,.5);
			}
			#wrap ul li div p{
				padding: 40px 40px;/*内边距 上下 左右*/
				color: #fff;
				
			}
			#wrap ul li{
				float: left;/*浮动：左浮动*/
				width: 100px;
				height: 429px;
				background: url(img/1.jpg);
			}
			#wrap ul li:nth-child(2){
				background: url(img/2.jpg);
			}
			#wrap ul li:nth-child(3){
				background: url(img/3.jpg);
			}
			#wrap ul li:nth-child(4){
				width: 789px;
				background: url(img/4.jpg);
			}
		</style>
	</head>
	<body><!--网页内容开始的地方，给人看的 -->
		<div class="bg-box">
			<img src="img/1.jpg" width="789" height="429" alt="test"/>
		</div>
		<div class="bg-box">
			<img src="img/2.jpg" width="789" height="429" alt="test"/>
		</div>
		<div class="bg-box">
			<img src="img/3.jpg" width="789" height="429" alt="test"/>
		</div>
		<div class="bg-box">
			<img src="img/4.jpg" width="789" height="429" alt="test"/>
		</div>
		<div id="wrap">
			<ul>
				<li>
					<div>
						<p>我的个人拉萨之旅 | | 故事之城</p>
					</div>
				</li>
				<li>
					<div>
						<p>我的个人拉萨之旅 | | 故事之城</p>
					</div>
				</li>
				<li>
					<div>
						<p>我的个人拉萨之旅 | | 故事之城</p>
					</div>
				</li>
				<li>
					<div>
						<p>我的个人拉萨之旅 | | 故事之城</p>
					</div>
				</li>
			</ul>
		</div>
		<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
		<script>
			
			var $li = $('#wrap ul li');
			var $bg = $('.bg-box');
			$li.hover(function(){
				//做什么事情
				var index = $(this).index();//存储下标
				$bg.eq(index).fadeIn(300).siblings('.bg-box').fadeOut(300)
				$(this).stop().animate({
					width:'789px'
				},500).siblings('li').stop().animate({
					width:'100px'
				},500)
			})
		</script>
	</body>
</html>

小总结：
/*
			 * JavaScript 基于原型的动态解释性脚本语言
			 * 1.响应用户交互 事件
			 * 2.操作dom元素 增删改查 改变元素样式
			 * 3.前后端交互 数据结构   验证提高效率
			 *     ajax      json     正则表达式
			 * 4.开发框架 mvvm mvc mvp vue angular node
			 */
			/*
			 * 鼠标移动到某一个li上 这个li的宽度变为789px，其余的li宽度变为100px
			 *   元素li
			 *   事件 移入事件
			 *   行为 宽度变化(动画)
			 *  $() 用于选取页面上元素的方法
			 *  =   赋值给
			 *  var 创建鱼篓
			 *  $li 表示所有li节点的元素名称
			 *  
			 *  谁   在什么时候 ||触发了什么事件 谁做了什么事情
			 *  $li        鼠标移动.hover()    function(){}
			 *  .stop() 终止动画序列
			 *  .animate() 动画
			 *  .siblings() 兄弟元素
			 */
<!--
	html
	div+css
	
	div 盒子模型 划分区域的结构标签 结构
	
	css 修饰页面上的元素 宽度 高度 边框 位置
	
	id命名 唯一的 身份证号码一样
	
	class 类名 选择同一类的标签统一设置样式
	
	ul>li 无序列表
	img 四要素
	    src 绝对路径
	    width 属性 图片本身的宽度
	    height 属性 图片本身的高度
	    alt 提示信息 爬虫检索
	    
	position 定位
	   相对定位 参考系 不动的 爸爸 relative
	   绝对定位 运动物   动的  儿子 absolute
	   越在后面声明定位的标签 越在最上层
	定位元素和非定位元素浮动方式完全不同
	在css样式中所有小数点省略0，节省代码