2019-04-11

事件冒泡

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>事件冒泡</title>

<style type="text/css">

.grandfather{

width: 300px;

height: 300px;

background-color: green;

position: relative;

}

.father{

width: 200px;

height: 200px;

background-color: gold;

}

.son{

width: 100px;

height: 100px;

background-color: red;

position: absolute;

left: 0;

top: 400px;

}

</style>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(function(){

$('body').click(function() {

alert(4);

});

$('.grandfather').click(function() {

alert(3);

});

$('.father').click(function() {

alert(2);

});

$('.son').click(function(event) {//event代表当前事件

alert(1);

// console.log(event);//显示很多属性，其中clientX、clientY就是点击的坐标

// alert("X轴坐标：" + event.clientX);

// //阻止事件冒泡

// event.stopPropagation();

//合并阻止操作：把阻止冒泡和阻止默认行为合并

return false;

});

//阻止右键菜单

$(document).contextmenu(function(event){

// //阻止默认行为（原来右键能弹出菜单，阻止后无法弹出）

// event.preventDefault();

//合并阻止

return false;

})

})

</script>

</head>

<body>

<div class="grandfather">

<div class="father">

<div class="son"></div>

</div>

</div>

</body>

</html>

定时器弹框

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>定时器弹框</title>

<style type="text/css">

.pop_con{

display: none;/*默认不显示，用定时器显示*/

}

.pop{

width: 400px;

height: 300px;

background-color: #fff;

border: 1px solid #000;

position: fixed;/*使用固定定位*/

left: 50%;/*左上角位于页面中心*/

top: 50%;

margin-left: -200px;/*让div向左偏移半个宽度、向上偏移半个高度，使div位于页面中心*/

margin-top: -150px;

z-index: 9999;/*弹窗在最前面*/

}

/*遮罩样式*/

.mask{

position: fixed;

width: 100%;

height: 100%;

background-color: #000;

left: 0;

top: 0;

/*设置透明度30%，兼容IE6、7、8*/

opacity: 0.3;

filter: alpha(opacity=30);

z-index: 9990;/*遮罩在弹窗后面*/

}

</style>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(function(){

$('#btn').click(function() {

$('#pop').show();

return false;

});

$('#shutoff').click(function() {

$('#pop').hide();

});

//点弹框以外的地方，也能让弹框消失

$(document).click(function(){

// setTimeout(function(){

// $('#pop').hide();

// },2000);

$('#pop').hide();

});

$('.pop').click(function() {

return false;

});

//阻止默认行为（原来超链接可跳转到百度，阻止后无法跳转）

$('#link1').click(function() {

return false;

});

})

</script>

</head>

<body>

<h1>首页标题</h1>

<p>页面内容</p>

<a href="http://www.baidu.com" id="link1">百度网</a>

<input type="button" name="" value="弹出" id="btn">

<div class="pop_con" id="pop">

<div class="pop">

<h3>提示信息！</h3>

<a href="#" id="shutoff">关闭</a>

<input type="text" name="">

</div>

<!-- 遮罩层 -->

<div class="mask"></div>

</div>

</body>

</html>

事件委托

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>事件委托</title>

<style type="text/css">

.list{

list-style: none;

}

.list li{

height: 30px;

background-color: green;

margin-bottom: 10px;

color: #fff;

}

</style>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(function(){

/*

给每个li绑定事件，一共绑定了8次，性能不高

$('.list li').click(function() {

alert($(this).html());

});

*/

/*

事件委托：方法delegate，只绑定一次事件，冒泡触发

参数：

selector选择器：写入ul下面的所有要发生事件的元素，多个元素用空格隔开，例如‘li a span’

eventType事件

function要执行的操作

$('.list').delegate('li', 'click', function() {

//$(this)指发生事件的子集，即每个li

alert($(this).html());

//全部取消委托

$('.list').undelegate();

});

})

</script>

</head>

<body>

<ul class="list">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

</ul>

</body>

</html>

幻灯片

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>幻灯片</title>

<link rel="stylesheet" type="text/css" href="css/reset.css" />

<link rel="stylesheet" type="text/css" href="css/slide.css">

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript" src="js/slide.js"></script>

</head>

<body>

<div class="center_con">

<div class="slide fl">

<ul class="slide_pics">

<li><a href=""><img src="images/slide01.jpg" alt="幻灯片" /></a></li>

<li><a href=""><img src="images/slide02.jpg" alt="幻灯片" /></a></li>

<li><a href=""><img src="images/slide03.jpg" alt="幻灯片" /></a></li>

<li><a href=""><img src="images/slide04.jpg" alt="幻灯片" /></a></li>

</ul>

<div class="prev"></div>

<div class="next"></div>

<ul class="points">

<!-- 动态创建小圆点

<li class="active"></li>

<li></li>

<li></li>

<li></li> -->

</ul>

</div>

</div>

</body>

</html>

CSS

body,ul{

margin:0;

padding:0;

}

ul{list-style:none;}

.pages_con{

position:fixed;

left:0;

top:0;

width:100%;

overflow:hidden;

}

.pages{

height:600px;/*每个屏幕高度都不相同，先给个预设值600*/

position:relative;

}

.page1{ background-color:orange;}

.page2{ background-color:lightgreen;}

.page3{ background-color:cyan;}

.page4{ background-color:pink;}

.page5{ background-color:lightblue;}

.points{

width:16px;

height:176px;

position:fixed;

right:20px;

top:50%;

margin-top:-88px;

}

.points li{

width:13px;

height:13px;

margin:16px 0;

border-radius:50%;

border:1px solid #666;

cursor:pointer;

}

.points li.active{

background-color:#666;

}

.main_con{

width:900px;

height:400px;

position:absolute;

left:50%;

top:50%;

margin-left:-450px;

margin-top:-200px;

}

.main_con .left_img{

width:363px;

height:400px;

float:left;

position:relative;

left:-50px;

opacity:0;

filter:alpha(opacity=0);

/*css3过渡动画：所有属性同时变 时长 运动曲线 延迟*/

transition:all 1000ms ease 300ms;

}

.main_con .right_info{

width:500px;

height:300px;

margin-top:50px;

float:right;

font-family:'Microsoft Yahei';

font-size:20px;

line-height:50px;

color:#666;

text-indent:2em;

text-align:justify;

position:relative;

right:-50px;

opacity:0;

filter:alpha(opacity=0);

transition:all 1000ms ease 300ms;

}

.moving .main_con .left_img{

left:0;

opacity:1;

filter:alpha(opacity=100);

}

.moving .main_con .right_info{

right:0;

opacity:1;

filter:alpha(opacity=100);

}

.main_con .right_img{

width:522px;

height:400px;

float:right;

position:relative;

top:-50px;

opacity:0;

filter:alpha(opacity=0);

transition:all 1000ms ease 300ms;

}

.main_con .left_info{

width:350px;

height:300px;

margin-top:50px;

float:left;

font-family:'Microsoft Yahei';

font-size:20px;

line-height:50px;

color:#666;

text-indent:2em;

text-align:justify;

position:relative;

bottom:-50px;

opacity:0;

filter:alpha(opacity=0);

transition:all 1000ms ease 300ms;

}

.moving .main_con .right_img{

top:0;

opacity:1;

filter:alpha(opacity=100);

}

.moving .main_con .left_info{

bottom:0;

opacity:1;

filter:alpha(opacity=100);

}

.main_con .center_img{

width:611px;

height:337px;

position:absolute;

left:50%;

margin-left:-305px;

bottom:-50px;

opacity:0;

filter:alpha(opacity=0);

transition:all 1000ms ease 300ms;

}

.moving .main_con .center_img

{

bottom:0;

opacity:1;

filter:alpha(opacity=100);

}

JS

$(function(){

var $li = $('.slide_pics li');

var $prev = $('.prev');

var $next = $('.next');

// alter($li.)

var len = $li.length;

// 当前是4张图片

var nextli = 0;

// 将要运动过来的li

var nowli = 0;

//将要离开的li

var timer = null;

// 定时器循环播放

$li.not(':first').css({left:600});

// 除第一个li，都是定位到右侧

// 动态创建小圆点

$li.each(function(index(){

// 创建li

var $sli = $('<li></li>');

// 第一个li添加选中的样式

if(index == 0){

$sli.addClass('active');

}

// 将i添加到ul中

$sli.appendTo('.points');

})

$points = $('.points li');

$points.click(function(){

nextli = $($(this).index();

// 当点击当前张的小圆点时，不做任何操作，防止跳变得Bug

if(nextli == nowli){

return;

}

move();

$(this).addClass('active').siblings().removeClass('active')

})

$prev.click(function() {

nextli--;

move();

// 改变圆点样式

$points.eq(nextli).addClass('active').siblings().removeClass('active')

});

$next.click(function() {

nextli++;

move();

// 改变圆点样式

$points.eq(nextli).addClass('active').siblings().removeClass('active')

});

$('.slide').mouseenter(function(event) {

ClearInterval(timer);

});

$('.slide').mouseleave(function(event) {

timer = setInterval(autoplay,3000);

});

// 定时器循环自动播放

timer = setInterval(autoplay,3000);

// 自动播放的逻辑与点击下一张是相同的

function autoplay(){

nextli++;

move();

// 改变圆点样式

$points.eq(nextli).addClass('active').siblings().removeClass('active')

}

function move(){

// 走到第一张，再继续走时

if(nextli < 0){

nextli = len -1;

// 将要来的是最后一张

nowli = 0;

$li.eq(nextli).css({left:-600})

// 把最后一张定位到左侧，准备

$li.eq(nowli).stop().animate({left:600});

//离开地第一张走到右侧

$li.eq(nextli).stop().animate({left:600});

// 进入的最后一张走进来

nowli = nextli;

return;

// 小边代码是正常情况的，极端情况下不执行，直接返回

}

// 走到最后一张，再继续走时

if(nextli >len -1){

nextli =0;

// 将要来的是第一张

nowli = len -1;

// 要离开的最后一张

$li.eq(nextli).css({left:600})

// 把第一张定位到右侧，准备

$li.eq(nowli).stop().animate({left:-600});

//离开地最后一张走到左侧

$li.eq(nextli).stop().animate({left:600});

// 进入的最后一张走进来

nowli = nextli;

return;

// 小边代码是正常情况的，极端情况下不执行，直接返回

}

if(nextli>nowli){

$li.eq(nextli).css({left:600});

// 当前张要离开

$li.eq(nowli).stop().animate({left:-600});

}else{

$li.eq(nextli).css({left:-600});

$li.eq(nextli).stop().animate({left:600});

nowli = nextli;

}

//要进入

$li.eq(nextli).stop().animate({left:0});

nowli = nextli;

}

})

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,817评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,329评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,354评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,498评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,600评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,829评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,979评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,722评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,189评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,519评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,654评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,329评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,940评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,762评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,993评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,382评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,543评论 2赞 349

推荐阅读更多精彩内容

  • snapshot-1.0.0.js
    "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,028评论 0赞 2
  • ace admin calendar页面日历显示为中文
    找到fullcalendar.js， 找到代码为 isRTL：false，这句话 输入以下几句 monthName...
    迷你小小白阅读 1,646评论 0赞 1
  • Web端---常用的特效
    1. tab列表折叠效果 html: 能源系统事业部 岗位名称： 工作地点 岗位名...
    lilyping阅读 1,843评论 0赞 1
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,449评论 1赞 45
  • 生活
    哦，原谅我说起了脏话 这狗日的生活 有时候明媚的让你想大声呼喊 有时候乌云能把人埋葬 让你恨不能把一切砸烂 无常无...
    关中月阅读 143评论 0赞 1