超简单的背景循环插件JoynBackground

所属分类:UI-背景

 17507  199  查看评论 (15)
超简单的背景循环插件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>
<!-- 背景 -->

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

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


相关插件-背景

jQuery单页/全屏滚动插件onepage-scorll

jQuery单页/全屏滚动插件onepage-scroll,支持垂直滚动外还支持横向滚动。
  背景
 21482  214

绘制切线图插件Tangents

该草图采用沿着贝塞尔路径 随机运动并沿切线连接运动点
  背景
 17851  64

基于canvas的星空效果

基于canvas的星空粒子效果(代码注释全!)
  背景
 19766  68

JQUERY网页背景幻灯片-BGSTRETCHER

今天我要给大家介绍的这款插件可以允许我们设置动态的背景图片,我们只需要准备一张大图或一组大图,bgStretcher 会自动让图片适应整个网页,并且循环背景图片。
  背景
 22161  61

讨论这个项目(15)回答他人问题或分享插件使用方法奖励jQ币

    ? 0
    2017/11/10 21:25:12

    好好看可以给份不 ,42741361@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的了
    回复
    河北小王爷88 0
    2016/12/2 11:12:01
    这个我如果就需要一张图拉远再拉近一直循环怎么改呢 回复
    紫泪儿 0
    2016/11/23 15:11:46
    非常好。。棒棒哒 回复
    BarcelonaLeo 0
    2016/11/23 9:11:49
    效果非常棒,下载了 回复
取消回复