html5设置全屏背景图片缩小切换轮播代码 - 代码效果 - YouDove

登陆便民

html5设置全屏背景图片缩小切换轮播代码

>首页 -> 社会专题 -> 代码效果 2015-10-26 来源:dove 作者:佚名【大中小】浏览:900次评论:0条

html5设置background-size属性让背景图片缩小切换轮播代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery背景无限循环缩放特效</title>

<link rel="stylesheet" href="daima/htmquanping/css/style.css" type="text/css" />
</head>
<body>

<header class="htmleaf-header">
	<div class="content">
		<div id="logo">
			<span class="color-1">鸽子网</span>
			<span class="color-2"></span>
		</div>
		<h1>jQuery背景无限循环缩放特效</h1>
	<div>
</header>

<script type="text/javascript" src="daima/htmquanping/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="daima/htmquanping/js/jquery.mkinfinite.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('header').mkinfinite({
		maxZoom:       1.4,
		animationTime: 4000,
		imagesRatio:   (960 / 720),
		isFixedBG:     true,
		zoomIn:        true,
		imagesList:    new Array(
			'daima/htmquanping/images/fbhXHkX.jpg',
			'daima/htmquanping/images/4qAcQij.jpg',
			'daima/htmquanping/images/VALX13b.jpg',
			'daima/htmquanping/images/POCVm4y.jpg',
			'daima/htmquanping/images/ixm5rIY.jpg'
		)
	});
});
</script>

</body>
</html>

提示：您也可以先修改部分代码再运行！

您看到此篇文章时的感受是：

Tags：用

责任编辑：佚名

【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

更多

上一篇：实现各种 CSS3 文本动画效果

下一篇：jQuery带分页的图片翻牌切换轮播..

最新文章

[代码效果]网页变黑色CSS代码2019-04-07

[代码效果]皮影客和优芽制作互..2018-07-06

[代码效果]满屏出现的烟花效果2018-01-20

[代码效果]网页对联代码2018-01-12

[代码效果]CSS排版页面实例代码2017-12-28

[代码效果]waterfall自适应瀑布..2017-03-10

[代码效果]手机屏幕尺寸测试—..2016-12-28

[代码效果]iframe去边框、无边..2016-07-16

[代码效果]历史今天择吉皇历代码2016-07-15

[代码效果]历史今天寿星万年历..2016-07-15

热门文章

[代码效果]CSS jquery实现Div底..2010-07-12

[代码效果]微软首页竖向TAB滑动..2011-02-11

[代码效果]一个带标号的CSS文章..2011-02-20

[代码效果]CSS垂直，水平居中2011-02-20

[代码效果]学习JS瀑布流的简单..2011-02-20

[代码效果]一个高宽自适用100%,..2011-02-20

[代码效果]Div透明代码，透明的..2011-02-20

[代码效果]网页Div层拖动，拖拽..2011-02-20

[代码效果]单行显示新历、农历..2011-03-06

[代码效果]横式图片幻灯代码2011-03-06

推荐文章

[代码效果]html5设置全屏背景图..2015-10-26

[代码效果]CSS+JS折角广告代码2016-01-16

[代码效果]几种常见的DIV边框样..2016-02-04

[代码效果]js容错脚本2012-01-30

[代码效果]jQuery点击后高亮背..2016-05-29

[代码效果]jquery标签支持图文..2014-10-10

[代码效果]仿Windows垂直调整代..2015-10-08

[代码效果]纯HTML+CSS打造轮播图2011-12-28

[代码效果]纯CSS下拉菜单代码2014-10-08

[代码效果]CSS 布局:40个教程、..2014-04-07

论坛互动
讨论留言

MAIL：gnlt@Dovechina.com
正在线上：

任何你想说的