无缝滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
body,ul,li{margin:0;padding:0}
ul{list-style:none;}
.slide{
width:500px;
height:100px;
border:1px solid #ddd;
margin:20px auto 0;
position:relative;
overflow:hidden;
}
.slide ul{
position:absolute;/相对于slide进行绝对定位/
width:1000px;/比slide宽度大一倍，做这种连续滚动效果的时候，要在后面把内容复制一份/
height:100px;
left:0;/可以改变该值让其动起来/
top:0;
}
.slide ul li{
width:90px;
height:90px;
margin:5px;
background-color:#ccc;
line-height:90px;
text-align: center;
font-size:30px;
float:left;
}
.btns{
width:500px;
height:50px;
margin:10px auto 0;
}
</style>
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
ul = $('#slide ul');
var left = 0;
var deraction = 2;//每次滚动的距离
//内容为两套li
$ul.html($ul.html() + $ul.html());
//反复循环定时器，30ms动一下可以看起来比较平滑
var timer = setInterval(move, 30);
function move(){
left -= deraction;
//当第2套li完全显示出来的时候，整个移回原点重新移动，实现向左连续滚动
if(left < -500){
left = 0;
}
//瞬间跳回，实现向右连续滚动
if(left > 0){
left = -500;
}
$ul.css({left: left});
}
$('#btn1').click(function() {
deraction = 2;
});
$('#btn2').click(function() {
deraction = -2;
});
$('#slide').mouseover(function() {
clearInterval(timer);
});
$('#slide').mouseout(function() {
timer = setInterval(move,30);
});
})
</script>
</head>
<body>
<div class="btns">
<input type="button" name="" value="向左" id="btn1">
<input type="button" name="" value="向右" id="btn2">
</div>
<div class="slide" id="slide">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
事件冒泡
<!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">
('body').click(function() {
alert(4);
});
('.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">
.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>
节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点操作</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $span = $('<span>span元素</span>');
var $p = $('<p>p段落元素</p>');
var $h = $('<h1>页面标题</h1>');
/*插入子元素*/
//div中插入span和p（末尾追加）
// $('#div1').append($span);
// $('#div1').append($p);
// 把span和p插入div中
$span.appendTo('#div1');
$p.appendTo('#div1');
//把子元素插入到父元素（前面追加）
// $('#div1').prepend($span);
// $('#div1').prepend($p);
// $span.prependTo('#div1');
// $p.prependTo('#div1');
//在div前边插入兄弟h1标题
// $('#div1').before($h);
$h.insertBefore('#div1');
//在后边插入兄弟元素
//after()
//insertAfter()
//删除p标签
$p.remove();
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
网友评论