页面背景图轮播之backstretch

最新推荐文章于 2024-03-21 09:56:55 发布

酒鬼馋猫

最新推荐文章于 2024-03-21 09:56:55 发布

阅读量1k

点赞数

分类专栏：前端文章标签：前端框架

本文链接：https://blog.csdn.net/y00zilong/article/details/89057118

版权

前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Backstretch是一款简单的jQuery插件，可以帮助你给网页添加一个动态的背景图片，可以自动调整大小适应屏幕的尺寸，当然这样做的缺点是当图片尺寸比屏幕小的时候,图片会因为自动延伸而变形，所以我们可以使用高分辨率大尺寸的图片做背景,更重要的是支持图片的自动切换。

index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<html>
<head>
</head>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="jquery/jquery-3.2.1.min.js"></script>
<!-- <script src="https://cdn.bootcss.com/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
 -->
 <script src="jquery/jquery.backstretch.js"></script>
 <script type="text/javascript"></script>
<script type="text/javascript">
 $(function(){
	 $(".container").css({opacity:0.8});/*设置class=container这个div里面字的透明度。越小，透明度越高*/
	 $.backstretch(["image/img4.jpg","image/img5.jpg","image/img6.jpg"],
			 {duration:3000,fade:750});/*fade750是设置页面切换的快慢*/
	 
 });
</script>
<body style="font-size:30px;">

<div class="container">
Backstretch是一款简单的jQuery插件，可以帮助你给网页添加一个动态的背景图片，
可以自动调整大小适应屏幕的尺寸，当然这样做的缺点是当图片尺寸比屏幕小的时候,
图片会因为自动延伸而变形，所以我们可以使用高分辨率大尺寸的图片做背景,更重要的是支持图片的自动切换。

</div>

  <a href="pages/a.jsp">点击这儿去页面a</a>

</body>
</html>

a.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<html>
<head>
</head>
<script src="../jquery/jquery-3.2.1.min.js"></script>
<script src="../jquery/jquery.backstretch.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
 $(function(){
	 $(".container").css({opacity:0.8});/*设置class=container这个div里面字的透明度。越小，透明度越高*/
	 $.backstretch(["../image/img4.jpg","../image/img5.jpg","../image/img6.jpg"],
			 {duration:3000,fade:750});/*fade750是设置页面切换的快慢*/
	 
 });
</script>
<body style="font-size:30px;">
<div class="container">
Backstretch是一款简单的jQuery插件，可以帮助你给网页添加一个动态的背景图片，
可以自动调整大小适应屏幕的尺寸，当然这样做的缺点是当图片尺寸比屏幕小的时候,
图片会因为自动延伸而变形，所以我们可以劲量使用高分辨率大尺寸的图片做背景,更重要的是支持图片的自动切换。

</div>
</body>
</html>

酒鬼馋猫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
页面背景图轮播之backstretch

Backstretch是一款简单的jQuery插件，可以帮助你给网页添加一个动态的背景图片，可以自动调整大小适应屏幕的尺寸，当然这样做的缺点是当图片尺寸比屏幕小的时候,图片会因为自动延伸而变形，所以我们可以使用高分辨率大尺寸的图片做背景,更重要的是支持图片的自动切换。index.jsp<%@ page language="java" contentType="text/ht...
复制链接

扫一扫