input:focus {...} //当input元素获得焦点时就会套用这个样式
也就是说当input元素失去焦点就会恢复为原来的样式。因此只需给同一类元素设置默认样式和获得焦点时的样式即可实现你的目的。
<head><meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
body,ul,li{margin:0padding: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">
$(function(){
var $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>
鼠标移入要做的事情mouseover
鼠标移出要做的事情mouseout
<head>
<meta charset="UTF-8">
<title>鼠标移入移出</title>
<style type="text/css">
.box{
width: 200px
height: 200px
background-color: gold
margin: 100px auto 0
}
.son{
width: 100px
height: 100px
background-color: green
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
/*进入子元素也触发*/
/*$('#div1').mouseover(function() {
$(this).animate({marginTop: 50})//.stop()
})
$('#div1').mouseout(function() {
$(this).animate({marginTop: 100})//.stop()
})*/
/*进入子元素不触发*/
/*$('#div1').mouseenter(function() {
$(this).stop().animate({marginTop: 50})//
})
$('#div1').mouseleave(function() {
$(this).stop().animate({marginTop: 100})//
})*/
/*通过hover（mouseenter+mouseleave）实现简写*/
$('#div1').hover(function() {
$(this).stop().animate({marginTop: 50})
}, function() {
$(this).stop().animate({marginTop: 100})
})
})
</script>
</head>
<body>
<div id="div1" class="box">
<div class="son"></div>
</div>
</body>
创建一个子元素 促使鼠标移入到子元素才能移动
是由于时间mouse影响
则要使用mouseenter和mouseleave进行改变
也可以运用hover简化
autofocus
表单元素的值发生变化
<head>
<meta charset="UTF-8">
<title>input框事件</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// //一开始就获取焦点，相当于设置了autofocus自动获取焦点了（HTML5 新增表单控件属性）
// $('#txt01').focus()
// //文本框获取焦点的时候（有光标闪烁的时候）
// $('#txt01').focus(function() {
// alert('focus')
// })
// //失去焦点的时候（光标离开的时候）
// $('#txt01').blur(function() {
// alert('blur')
// })
// //输入框内容发生变化的时候，失去焦点后触发，可用于注册时验证用户名是否已存在
// $('#txt01').change(function() {
// alert('change')
// })
//松开键盘按键就触发
$('#txt01').keyup(function() {
alert('keyup')
})
})
</script>
</head>
<body>
<input type="text" id="txt01">
</body>
<head>
<meta charset="UTF-8">
<title>jQuery其他事件</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
// // JS原生写法
// window.onload = function(){
// }
// / /jQuery写法，等同于上面写法
// $(window).load(function(){
// })
// //ready的写法
// $(document).ready(function(){
// })
// //ready的简写
// $(function(){
// })
// 窗口改变尺寸的时候，会高频触发
$(window).resize(function() {
console.log('3')
})
</script>
</head>
<body>
<div id="div1"></div>
</body>
鼠标移入要做的事情mouseover
鼠标移出要做的事情mouseout
