无缝滚动
<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;
width:1000px;
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">
$(function(){
var $ul = $('#slide ul');
var left = 0;
var deraction = 2;//每次滚动的距离
var timer = setInterval(move,30);
$ul.html($ul.html() + $ul.html());//HTML是获取ul标签中夹的内容
function move() {
left -= deraction;
if(left < -500){
console.log('22');
left = 0;
}
if(left > 0){
console.log('33');
left = -500;
}
$ul.css({left:left});
}
$('#btn1').click(function () {
console.log('44');
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>
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#text01').focus(function () {
alert('获取焦点');
});//网页显示获取焦点
$('#text01').blur(function () {
alert('失去焦点');
});
// $('#txt01').focus();
//自动获取焦点
// $('#txt01').change(function () {
// alert('值变了');
// // change 表单元素的值发生变化 失去焦点才会被触发
// }) //检测用户名是否存在 用户名全部输完才会检测 高频触发
$('#txt01').keyup(function () {
alert('键盘松开了');
//松开键盘会弹出 输入字母就会弹出
});
$(document).ready(function () {
//DOM 加载完成
});
$(function () {});//简写
window.onload = function(){};//原生js写法
$(window).load(function () {
//元素加载完成
});
$(window).resize(function () {
console.log('窗口尺寸变化了');
//浏览器窗口尺寸改变
})//高频触发工具 手机端用的较多
})
</script>
</head>
<body>
<input type="text" id="txt01" autofocus>
<!--autofocus 页面自动获取焦点-->
</body>
bind绑定事件
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// $('#btn').click(function () {
//只能绑定click事件
// })
$('#btn').bind('click mouseover',function () {
alert('hello');//鼠标移入弹出hello
//绑定多个事件 绑定click事件和mouseover事件
$(this).unbind('mouseover');
//解除绑定事件
})
})
</script>
<body>
<input type="button" value="按钮" id="btn">
</body>
自定义事件
$(function(){
//自定义事件只能使用bind的方式进行绑定
//通过trigger来触发
$('#btn1').bind('hello',function () {
alert('hello!');
});
$('#btn2').click(function () {
$('#btn1').trigger('hello');
});//点击按钮2时'hello'会被trigg触发
$('#btn1').trigger('hello');
}) //直接触发
<input type="button" value="按钮" id="btn1">
<input type="button" value="按钮" id="btn2">
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// $('#div1').mouseover(function () {
// $(this).stop().animate({marginvTop:50});
// })鼠标移入 移入子元素会触发 事件发生在谁身上 $(this)就是谁
// $('#div1').mouselout(function () {
// $(this).stop().animate({marginvTop:100});
// })鼠标离开 离开子元素会触发 会记录鼠标移入移出的次数 stop会将之前没有做完的结束,开始新的动画
// $('#div1').mouseenter(function () {
// $(this).stop().animate({marginvTop:50});
// })鼠标进入 子元素不触发
// $('#div1').mouseleave(function () {
// $(this).stop().animate({marginvTop:100});
// })鼠标离开子元素不触发
//简写mouseenter mouseleave
$('#div1').hover(function () {
$(this).stop().animate({marginvTop: 50});
//鼠标移入时
}, function(){
$(this).stop().animate({marginvTop:100});
//鼠标移出时
});
});
</script>
<body>
<div id="div1" class="box">
<div class="son"></div>
</div>
</body>
