raoul2000/yii2-bgswitcher-widget

本扩展是jQuery背景图片切换插件的一个包装器

维护者

详细信息

github.com/raoul2000/yii2-bgswitcher-widget

源代码

问题

安装: 107

依赖项: 0

建议者: 0

安全: 0

星标: 1

关注者: 4

分支: 1

开放问题: 0

语言:JavaScript

类型:yii2-extension

1.0.0 2014-06-26 20:41 UTC

Requires

BSD-3-Clause 9e197673b36e54bdcec7112272cca8b7115ae8a8

  • Raoul <raoul.boulard.woop@gmail.com>

imagejquerypluginextensionbackgroundyii2

This package is not auto-updated.

Last update: 2024-09-24 06:36:42 UTC

README

本扩展是jQuery背景图片切换插件的一个包装器

安装

安装此扩展的首选方式是通过composer。

运行以下命令之一

php composer.phar require --prefer-dist raoul2000/yii2-bgswitcher-widget "*"

或

"raoul2000/yii2-bgswitcher-widget": "*"

将以下内容添加到您的composer.json文件的require部分。

使用方法

一旦安装了扩展，假设我们的3个图片存储在@webroot/images/background中，只需通过以下代码使用即可

<?php
	use raoul2000\widget\bgswitcher\BgSwitcher;
	
	BgSwitcher::widget([
		'selector' => '#targetId',
		'pluginOptions' => [
			'images' => [
				'images/background/image1.jpg',
				'images/background/image2.jpg',
				'images/background/image3.jpg',
				'http://placehold.it/350x150'   // this image is remote
			]
		]
	]);
?>

<div id="targetId" class="cover-bg" style="width:100%;height:250px;">
	<p>some text here ... </p>
</div>

以下是应用于目标容器的CSS样式示例

.cover-bg {
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

请参阅官方BgSwitcher页面以获取完整文档。您还可以查看Github项目页面。

如果这个插件没有说服您，请查看Backstretch插件

许可证

yii2-bgswitcher-widget在BSD 3-Clause许可证下发布。有关详细信息，请参阅附带LICENSE.md文件。