【码歌】jQuery事件，完成个人相册

最新推荐文章于 2023-07-06 09:13:33 发布

码歌大大

最新推荐文章于 2023-07-06 09:13:33 发布

阅读量131

点赞数 1

分类专栏：前端必会文章标签：码歌 jQuery 前端实例

本文链接：https://blog.csdn.net/u014332333/article/details/88692036

版权

前端必会专栏收录该内容

11 篇文章 0 订阅

订阅专栏

开篇寄语：

弱的时候，坏人最多。这个世界的温柔，来自于你的强大。

所谓自由，不是随心所欲，而是自我主宰。

起源上一篇

今天，我们一起来完成jQuery未完结的内容，最后再用一个实例一起完成案例。

五、jQuery事件

1、加载事件

ready()类似于onload()事件，ready()可以写多个，按顺序执行。

$(document).ready(function(){
   
});

等价于

$(function(){
   
});

等价于

window.onload = function() {

};

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>jQuery加载事件</title>
</head>

<body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// 页面加载时就会调用 等价于 onload()
// 第一种
$(document).ready(function() {
console.log('第一种...页面加载时就会调用');
});

// 第二种
$(function() {
console.log('第二种...页面加载时就会调用');
});

// 第三种
function init_page() {
console.log('第三种...页面加载时就会调用');
}

$(init_page);
$(document).ready(init_page);
</script>
</body>

</html>

2、绑定事件

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(selector).bind(eventType[,eventData], handler(eventObject));

eventType：是一个字符串类型的事件类型，就是你所需要绑定的事件。这类类型可以包括如下：

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,mousedown, mouseup,

mousemove, mouseover, mouseout, mouseenter, mouseleave,change, select, submit, keydown,

keypress, keyup, error。

[, eventData]：传递的参数，格式：{名:值, 名2:值2}

handler(eventObject)：该事件触发执行的函数

绑定事件可以使用三种方式来实现，分别是bind()，click具体的事件类型，on()，下面就让我们一起来学习一下三种绑定事件的方式。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>jQuery绑定事件</title>
</head>

<body>
<div id="dv" style="display: none;">是时候展示真正的技术了！</div>
<button id="btn" type="button">测试单个事件按钮</button>

<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script type="text/javascript">
function show() {
alert('我是一个警告框！');
}

// ---------------------绑定单个事件--------------------
// js方式实现绑定事件
document.getElementById('btn').onclick = show;

document.getElementById('btn').onclick = function() {
alert('不好意思我又来了！');
}

// jQuery方式实现绑定事件 第一种
// 通过事件类型，对应函数
$('#btn').bind('click', function() {
alert('jQuery方式绑定事件！');
});

$('#btn').bind('click', show);

// jQuery方式实现绑定事件 第二种
// 通过具体的事件类型，对应函数
$('#btn').click(function() {
alert('jQuery方式绑定事件第二种方式！');
});

$('#btn').click(show);

// jQuery方式实现绑定事件 第三种 推荐的方式
// 利用事件代理，只在document上注册事件，内存占用小，绑定事件快。
$('#btn').on('click', function() {
alert('jQuery方式绑定事件第三种方式！');
});

$('#btn').on('click', show);
</script>
</body>

</html>

注意：事件绑定推荐大家使用第三种，内存占用小，绑定事件快。

六、案例练习：个人相册网站

模拟各大网站的首页轮播效果，开发属于自己的个人相册轮播网站。

效果图

模拟各大网站的首页轮播效果，开发属于自己的个人相册轮播网站，学生分别展示个人相册成果。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>个人相册网站</title>
<!-- 引入外部css文件 -->
<link rel="stylesheet" href="css/album.css" />
</head>

<body>
<h1>个人相册网站</h1>
<div id="albumSlide">
<!-- 图片盒子 -->
<div class="img">
<ul>
<li><img id="img1" src="img/Joey_Wong1.jpg" /></li>
<li><img id="img2" src="img/Joey_Wong2.jpg" /></li>
<li><img id="img3" src="img/Joey_Wong3.jpg" /></li>
<li><img id="img1" src="img/Joey_Wong4.jpg" /></li>
<li><img id="img2" src="img/Joey_Wong5.jpg" /></li>
</ul>

<!-- 上一张和下一张 -->
<div class="prev" id="prev">&#xe60f;</div>
<div class="next" id="next">&#xe60e;</div>
</div>

<!-- 导航盒子 -->
<div class="nav">
<ul>
<li class="currentNav">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>

<!-- 引入外部js文件 -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/album.js" ></script>
</body>
</html>

album.css

/* 采用什么编码解析文件 */
@charset "utf-8";

/*
* 设置整个body的样式
*/
body {
background: black;/* 背景色黑色 */
/* 超出body范围的内容隐藏，可以注释掉这行代码，在#albumSlide中添加会实现另一种相册效果 */
/*overflow: hidden;*/
}

/*
* 设置个人相册网站的标题样式
*/
h1 {
font-size: 50px;/* 字体大小 */
margin: 20px;/* 设置外间距 */
color: white;/* 字体颜色 */
text-align: center;/* 居中 */
}

/* ----------------------相册图片 begin----------------------- */
/*
* 设置albumSlide盒子的样式
*/
#albumSlide {
/* 背景色矢车菊蓝，布局时使用 */
/*background: cornflowerblue;*/
width: 1000px;/* 宽 */
height: 500px;/* 高 */
position: relative;/* 子标签相对于父标签定位 */
margin: 0 auto;/* 设置外间距 */
/* 超出盒子范围的内容隐藏，可以注释掉这行代码，在body中添加会实现另一种相册效果 */
overflow: hidden;
}

/*
* 设置albumSlide盒子里的所有li的样式
*/
#albumSlide ul li {
list-style: none;/* 去除无序列表的默认样式 */
}

/*
* 设置albumSlide盒子里的img盒子里的所有li的样式
* 设置albumSlide盒子里的img盒子里的所有li里的图片样式
*/
#albumSlide .img ul li,
#albumSlide .img ul li img {
position: absolute;/* 使用绝对定位，相对于其父标签定位 */
top: 0px;/* 最顶部开始 */
width: 100%;/* 宽和父标签的宽一致 */
height: 100%;/* 高和父标签的高一致 */
}

/*
* 可以使用jQuery动态生成多个图片left样式的代码
*/
/*
#img1 {left: 0px;}
#img2 {left: 1000px;}
#img3 {left: 2000px;}
#img4 {left: 3000px;}
#img5 {left: 4000px;}
*/

/*
* 设置albumSlide盒子里的img盒子里的所有li的样式
*/
#albumSlide .img ul li {
left: 0px;/* 最左部开始 */
}
/* -----------------------相册图片 end------------------------ */

/* ---------------------上一张 下一张 begin--------------------- */
/*
* 开放字体格式(第三方固定格式)
*/
@font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_208314_2l9oi1sn4hmh1tt9.woff') format('woff');
}

/*
* 设置上一张下一张的样式
*/
.prev,
.next {
position: absolute;/* 使用绝对定位，相对于其父标签定位 */
font-family: "iconfont";/* 开放字体格式 */
font-size: 60px;/* 字体大小 */
top: 230px;/* 从顶部开始移动250px */
opacity: 0.6;/* 透明效果级别 */
color: white;/* 字体颜色 */
cursor: pointer;/* 鼠标变手势 */
}

/*
* 鼠标移动至上一张下一张后改变的样式
*/
.prev:hover,
.next:hover {
opacity: 1;/* 透明效果级别 */
}

/*
* 设置上一张的样式
*/
.prev {
left: 10px;/* 左边开始移动10px */
}

/*
* 设置下一张的样式
*/
.next {
right: 10px;/* 右边开始移动10px */
}
/* ---------------------上一张 下一张 end--------------------- */

/* ---------------------底部导航 begin---------------------- */
/*
* 设置导航的样式
*/
.nav {
width: 100%;/* 宽和父标签的宽一致 */
text-align: center;/* 居中 */
position: absolute;/* 使用绝对定位，相对于其父标签定位 */
bottom: 5px;/* 从底部开始移动5px */
}

/*
* 设置导航盒子里的li的样式
*/
.nav ul li {
list-style: none;/* 去除无序列表的默认列表样式 */
width: 15px;/* 宽15px */
height: 15px;/* 高15px */
border-radius: 50%;/* 边框变圆 */
background: gray;/* 背景色灰色 */
opacity: 0.6;/* 透明效果级别 */
margin: 0 5px;/* 设置外边距 */
display: inline-block;/* 类似于导航栏的效果 */
font-size: 0;/* 字体大小 */
cursor: pointer;/* 鼠标变手势 */
transition: all 0.5s;/* 动画效果执行所耗时间 */
}

/*
* 设置当前导航选中的样式
*/
.nav .currentNav {
background: white;/* 背景色白色 */
}
/* ---------------------底部导航 end---------------------- */

码歌大大

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【码歌】jQuery事件，完成个人相册

开篇寄语：弱的时候，坏人最多。这个世界的温柔，来自于你的强大。所谓自由，不是随心所欲，而是自我主宰。起源上一篇今天，我们一起来完成jQuery未完结的内容，最后再用一个实例一起完成案例。五、jQuery事件1、加载事件ready()类似于onload()事件，ready()可以写多个，按顺序执行。$(document).r...
复制链接

扫一扫

专栏目录