JS特效第110弹：jQuery按需加载图片及锚点定位效果

马coder

于 2024-01-26 18:00:00 发布

阅读量320

点赞数 5

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_38343072/article/details/135375634

版权

jQuery按需加载图片及锚点定位、返回顶部，先来看看效果：

一部分关键的代码如下：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="js/idex.js"></script>
	<script src="js/animate.js"></script>
	<script src="js/function.js"></script>
	<title>按需加载</title>
	<style>
		body{background-color: #3c3a3a}
     .head{
     	width: 800px;
     	height: 380px;
     	background: #ccc;
     	margin:0 auto 20px;
     }
     .floor{
     	width:800px;
     	height: 500px;
     	background-color:#3c3a3a;
     	margin:50px auto;	
     	text-align: center;
     }
     .foot{
		width: 800px;
     	height: 380px;
     	background: #ccc;
     	margin:0 auto 20px;
     }
     .jump{
     	width: 80px;
     	height: 350px;
         	position: fixed;
         	top:30%;left:20px;
         	cursor: pointer;
     }
     .item{
		 color: #cacaca;
     	width: 100%;
     	height: 69px;
     	background-color: #666;
     	border-bottom: 1px solid #3c3a3a;
     	text-align: center;
     	line-height: 69px;
     }
     .back{
          width: 40px;
          height: 40px;
          background:#ccc;
          box-shadow: 0px 3px 10px rgba(0,0,0,0.6);
          text-align: center;
          line-height: 40px;
          font-size: 14px;
          position: fixed;
          right: 45px;bottom:55px;
          display: none;
          cursor: pointer;
     }
     .search{
          width: 200px;
          height: 100px;
          background-color: #e4e4e4;
          text-align: center;
          line-height: 100px;
          position: fixed;
          left:0;top:-200px;
     }
	</style>
</head>
<body>
     <div class="search">搜索栏</div>
     <div class="back">顶部</div>
	<div class="head">这是头部</div>
	<div class="floor">
		<img src="" alt="" imgpath="http://www.jq22.com/img/cs/500x300-1.png">
	</div>
	<div class="floor">
		<img src="" alt=""imgpath="http://www.jq22.com/img/cs/500x300-2.png">
	</div>
	<div class="floor">
		<img src="" alt=""imgpath="http://www.jq22.com/img/cs/500x300-3.png">
	</div>
	<div class="floor">
		<img src="" alt=""imgpath="http://www.jq22.com/img/cs/500x300-4.png">
	</div>
	<div class="floor">
		<img src="" alt=""imgpath="http://www.jq22.com/img/cs/500x300-5.png">
	</div>
	<div class="foot">这是底部</div>
	<div class="jump">
		<div class="item">1</div>
		<div class="item">2</div>
		<div class="item">3</div>
		<div class="item">4</div>
		<div class="item">5</div>
	</div>
</body>
</html>

全部代码：jQuery按需加载图片及锚点定位效果