UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

超简单的背景循环插件JoynBackground

所属分类：UI-背景

 58832  635  查看评论 (21)
分享到微信朋友圈
X
超简单的背景循环插件JoynBackground ie兼容6
 查看演示  立即下载

使用方法：

  1. 引用任何一个版本的jquery文件。

  2. 将JoynBackground.css和JoynBackground.js引入文档中。

  3. JS部分

$(document).ready(function(){
    JoynBackground(2,10000); //运行（动画类型，时间）
    //场景动画类型：1拉近 2拉远 3幻灯片显示 
})

4.DIV部分

<!-- 背景[就这么简单] -->
<div id="JoynBackground">
<img src="图片地址" name="1"/>
        <img src="图片地址2" name="2"/>
        ……<!--多少张都可以系统会自动一张一张往下读-->
</div>
<!-- 背景 -->

下下来看一眼就懂了，超级简单……

所有版本浏览器都可以使用……


相关插件-背景
查看更多

基于canvas的星空效果

 基于canvas的星空粒子效果（代码注释全！）
  背景
 71322  404

首页大屏背景图平滑切换

 首页大屏背景图平滑切换
  背景
 38765  388

京东产品详细页图片放大效果

 京东商城详细页产品图片列表以及放大镜效果 兼容ie6+,谷歌,火狐
  背景
 49860  499

jQuery全屏背景插件Vegas2

 网页全屏背景jQuery插件 Vegas2，它和其它背景插件不同之处就是带有幻灯片功能。幻灯片的切换有多种风格，如旋转、渐隐、左右等方式，切换的时候还有进度条显示。
  背景
 41268  493

讨论这个项目（21）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ?Forever? 0
    2018/12/17 16:42:31
    ? 0
    2018/11/13 21:30:08
    骚年，你渴望力量吗？ 0
    2018/7/19 14:34:29
    这种插件就需要怒赞啊 回复
    ? 0
    2017/11/10 21:25:12

    好好看可以给份不 ，42741361@qq.com

        你再靠近我报警！0
        2018/6/21 16:28:26
        还要吗
        我一把把把手把住了0
        2018/7/18 17:40:22
        兄弟，靠你了1755386338@qq.com
    回复
    丶 0
    2017/6/11 12:31:32
    暮色渐浓 0
    2017/6/10 22:35:44

    那么这个怎么作网页背景呢，div块是直接显示在网页其他东西前面把其他东西都遮住了

    回复
    0.01 0
    2016/12/28 15:12:26

    感觉好好用的样子

    回复
    ※潇洒哥.... 0
    2016/12/23 21:12:06
    zhan19911028 0
    2016/12/20 16:12:09

    切换图片时感觉 很刺眼，怎么破

    回复
    河北小王爷88 0
    2016/12/2 11:12:51
    而且随着拉近 手机端网页可以横向滚动了怎么破？
        microsoftvs1
        2016/12/2 12:12:32

        那样的话直接CSS就可以搞定了，写了个小事例，自己改改就行了

        <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
	<style>
	.aa{ width: 200px; height: 200px; background-color: aqua; margin-left: auto; margin-right: auto; margin-top: 20%; }
	#animation{
		-webkit-animation:pulse 10s .2s ease both;
		-moz-animation:pulse 10s .2s ease both;
		-webkit-animation:pulse 10s .2s 1000 ease-in normal none ;	
	}
	@-webkit-keyframes pulse{
		0%{-webkit-transform:scale(1)}
		50%{-webkit-transform:scale(1.5)}
		100%{-webkit-transform:scale(1)}
	}
	@-moz-keyframes pulse{
		0%{-moz-transform:scale(1)}
		50%{-moz-transform:scale(1.5)}
		100%{-moz-transform:scale(1)}
	}
	</style>
</head>

<body>
	<div id="animation" class="aa"></div>	
</body>
</html>
        河北小王爷880
        2016/12/2 14:12:41
        多谢，刚才用js写好了，换成你这个css3的了
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复