收藏
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.1.min.js">//引入JQ，必须</script>
<title>12.18学习记录</title>
<style>
* {
margin: 0; /*设置外边距*/
padding: 0; /*设置内边距*/
list-style: none; /*取消li默认样式*/
overflow: hidden; /*设置超出不显示*/
}
div {
width: 42.5%; /*设置盒子宽度用JS调用宽度设置高度*/
margin: 0 auto; /*设置盒子水平居中*/
background-color: #36d900; /*设置盒子默认背景色*/
margin-top: 10%; /*设置盒子距离顶部*/
}
ul li {
float: left; /*设置图片浮动，归入文档流*/
}
li {
width: 200px; /*设置li宽度*/
height: 200px; /*设置高度*/
padding-left: 1.5px; /*设置图片距左距离*/
border: 1px solid #2084e6; /*设置图片边框*/
}
</style>
</head>
<body>
<div id="box">
<ul>
<li id="img1"><img src="images/1.jpg" name="img1" width="200px" alt="我是第一个"></li>
<li id="img2"><img src="images/2.jpg" width="200px" alt="我是第二个"></li>
<li id="img3"><img src="images/3.jpg" width="200px" alt="我是第三个"></li>
<li id="img4"><img src="images/4.jpg" width="200px" alt="我是第四个"></li>
<li id="img5"><img src="images/5.jpg" width="200px" alt="我是第五个"></li>
<li id="img6"><img src="images/6.jpg" width="200px" alt="我是第六个"></li>
<li id="img7"><img src="images/7.jpg" width="200px" alt="我是第六个"></li> </ul>
</div>
<script>
var style = document.querySelector('div').style.backgroundColor = 'yellow' //改变DIV的样式背景色
$(document).ready(function(){
$('#box').css('height',$('#box').css('width'));//让DIV高随宽变化
})
$(document.images[0]).mouseenter(function () { //设置第一张图片鼠标移入移除效果
$(this).hide(1000)
})
.mouseleave(function () {
$(this).show(1000)
})
$(function () { //设置第二张图点击消失
$(document.images[1]).click(function () {
$(this).animate({ //通过改变元素，对元素应用动画
opacity:'0.5',
height:'0px',
width:'0px'
});
})
})
$(function ($) { //设置第三张图圆形
$(document.images[2]).css({
'border-radius': '50%',
})
})
$(document.images[3]).on('click',function () { //设置第四张图点击缓慢消失
$(this).toggle(2000)
})
$(document.images[3]).off() //移除document.images[3]上的所有事件
</script>
</body>
</html>未实现效果li的ID没有使用上，off移除单个事件没实现，使用的全部事件移除，图片资源放下边了
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
