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代表當(dāng)前事件

alert(1);

// console.log(event);//顯示很多屬性，其中clientX、clientY就是點(diǎn)擊的坐標(biāo)

// alert("X軸坐標(biāo)：" + event.clientX);

// //阻止事件冒泡

// event.stopPropagation();

//合并阻止操作：把阻止冒泡和阻止默認(rèn)行為合并

return false;

});

//阻止右鍵菜單

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

// //阻止默認(rèn)行為（原來(lái)右鍵能彈出菜單，阻止后無(wú)法彈出）

// event.preventDefault();

//合并阻止

return false;

})

})

</script>

</head>

<body>

<div class="grandfather">

<div class="father">

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

</div>

</div>

</body>

</html>

定時(shí)器彈框

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>定時(shí)器彈框</title>

<style type="text/css">

.pop_con{

display: none;/*默認(rèn)不顯示，用定時(shí)器顯示*/

}

.pop{

width: 400px;

height: 300px;

background-color: #fff;

border: 1px solid #000;

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

left: 50%;/*左上角位于頁(yè)面中心*/

top: 50%;

margin-left: -200px;/*讓div向左偏移半個(gè)寬度、向上偏移半個(gè)高度，使div位于頁(yè)面中心*/

margin-top: -150px;

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

}

/*遮罩樣式*/

.mask{

position: fixed;

width: 100%;

height: 100%;

background-color: #000;

left: 0;

top: 0;

/*設(shè)置透明度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();

});

//點(diǎn)彈框以外的地方，也能讓彈框消失

$(document).click(function(){

// setTimeout(function(){

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

// },2000);

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

});

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

return false;

});

//阻止默認(rèn)行為（原來(lái)超鏈接可跳轉(zhuǎn)到百度，阻止后無(wú)法跳轉(zhuǎn)）

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

return false;

});

})

</script>

</head>

<body>

<h1>首頁(yè)標(biāo)題</h1>

<p>頁(yè)面內(nèi)容</p>

<a id="link1">百度網(wǎng)</a>

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

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

<div class="pop">

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

<a href="#" id="shutoff">關(guān)閉</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(){

/*

給每個(gè)li綁定事件，一共綁定了8次，性能不高

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

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

});

*/

/*

事件委托：方法delegate，只綁定一次事件，冒泡觸發(fā)

參數(shù)：

selector選擇器：寫入ul下面的所有要發(fā)生事件的元素，多個(gè)元素用空格隔開，例如‘li a span’

eventType事件

function要執(zhí)行的操作

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

//$(this)指發(fā)生事件的子集，即每個(gè)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">

<!-- 動(dòng)態(tài)創(chuàng)建小圓點(diǎn)

<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;/*每個(gè)屏幕高度都不相同，先給個(gè)預(yù)設(shè)值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過(guò)渡動(dòng)畫：所有屬性同時(shí)變 時(shí)長(zhǎng) 運(yùn)動(dòng)曲線 延遲*/

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;

// 當(dāng)前是4張圖片

var nextli = 0;

// 將要運(yùn)動(dòng)過(guò)來(lái)的li

var nowli = 0;

//將要離開的li

var timer = null;

// 定時(shí)器循環(huán)播放

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

// 除第一個(gè)li，都是定位到右側(cè)

// 動(dòng)態(tài)創(chuàng)建小圓點(diǎn)

$li.each(function(index(){

// 創(chuàng)建li

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

// 第一個(gè)li添加選中的樣式

if(index == 0){

$sli.addClass('active');

}

// 將i添加到ul中

$sli.appendTo('.points');

})

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

$points.click(function(){

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

// 當(dāng)點(diǎn)擊當(dāng)前張的小圓點(diǎn)時(shí)，不做任何操作，防止跳變得Bug

if(nextli == nowli){

return;

}

move();

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

})

$prev.click(function() {

nextli--;

move();

// 改變圓點(diǎn)樣式

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

});

$next.click(function() {

nextli++;

move();

// 改變圓點(diǎn)樣式

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

});

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

ClearInterval(timer);

});

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

timer = setInterval(autoplay,3000);

});

// 定時(shí)器循環(huán)自動(dòng)播放

timer = setInterval(autoplay,3000);

// 自動(dòng)播放的邏輯與點(diǎn)擊下一張是相同的

function autoplay(){

nextli++;

move();

// 改變圓點(diǎn)樣式

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

}

function move(){

// 走到第一張，再繼續(xù)走時(shí)

if(nextli < 0){

nextli = len -1;

// 將要來(lái)的是最后一張

nowli = 0;

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

// 把最后一張定位到左側(cè)，準(zhǔn)備

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

//離開地第一張走到右側(cè)

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

// 進(jìn)入的最后一張走進(jìn)來(lái)

nowli = nextli;

return;

// 小邊代碼是正常情況的，極端情況下不執(zhí)行，直接返回

}

// 走到最后一張，再繼續(xù)走時(shí)

if(nextli >len -1){

nextli =0;

// 將要來(lái)的是第一張

nowli = len -1;

// 要離開的最后一張

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

// 把第一張定位到右側(cè)，準(zhǔn)備

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

//離開地最后一張走到左側(cè)

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

// 進(jìn)入的最后一張走進(jìn)來(lái)

nowli = nextli;

return;

// 小邊代碼是正常情況的，極端情況下不執(zhí)行，直接返回

}

if(nextli>nowli){

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

// 當(dāng)前張要離開

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

}else{

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

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

nowli = nextli;

}

//要進(jìn)入

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

nowli = nextli;

}

})

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 229,117評(píng)論 6贊 537
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,860評(píng)論 3贊 423
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人，你說(shuō)我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 177,128評(píng)論 0贊 381
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我，道長(zhǎng)，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,291評(píng)論 1贊 315
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 72,025評(píng)論 6贊 410
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 55,421評(píng)論 1贊 324
  • 城市分裂傳說(shuō)
    那天，我揣著相機(jī)與錄音，去河邊找鬼。 笑死，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,477評(píng)論 3贊 444
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 42,642評(píng)論 0贊 289
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 49,177評(píng)論 1贊 335
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,970評(píng)論 3贊 356
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,157評(píng)論 1贊 371
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,717評(píng)論 5贊 362
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,410評(píng)論 3贊 347
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,821評(píng)論 0贊 28
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,053評(píng)論 1贊 289
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,896評(píng)論 3贊 395
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,157評(píng)論 2贊 375

推薦閱讀更多精彩內(nèi)容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,042評(píng)論 0贊 2
  • 找到fullcalendar.js， 找到代碼為 isRTL：false，這句話 輸入以下幾句 monthName...
    迷你小小白閱讀 1,709評(píng)論 0贊 1
  • 1. tab列表折疊效果 html: 能源系統(tǒng)事業(yè)部 崗位名稱： 工作地點(diǎn) 崗位名...
    lilyping閱讀 1,883評(píng)論 0贊 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HT...
    kismetajun閱讀 27,565評(píng)論 1贊 45
  • 哦，原諒我說(shuō)起了臟話 這狗日的生活 有時(shí)候明媚的讓你想大聲呼喊 有時(shí)候?yàn)踉颇馨讶寺裨?讓你恨不能把一切砸爛 無(wú)常無(wú)...
    關(guān)中月閱讀 151評(píng)論 0贊 1