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 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;

}

})

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,054評論 0贊 2
  • 找到fullcalendar.js， 找到代碼為 isRTL：false，這句話 輸入以下幾句 monthName...
    迷你小小白閱讀 1,735評論 0贊 1
  • 1. tab列表折疊效果 html: 能源系統事業部 崗位名稱： 工作地點 崗位名...
    lilyping閱讀 1,900評論 0贊 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標準。 注意：講述HT...
    kismetajun閱讀 27,749評論 1贊 45
  • 哦，原諒我說起了臟話 這狗日的生活 有時候明媚的讓你想大聲呼喊 有時候烏云能把人埋葬 讓你恨不能把一切砸爛 無常無...
    關中月閱讀 153評論 0贊 1