• 贾静雯晒咘咘新造型刘海超萌 细数明星家的高颜值女儿 2019-03-20
  • 我的世界杯记忆|新华社许基仁:办世界杯圆球迷梦 2019-03-20
  • 马克思学说是符合人类社会发展规律的真理,后人的所谓“马克思主义”只有符合人类社会发展规律才是真理,否则便是谬误。 2019-03-14
  • 2018年最强拼假攻略出炉 最多可连休16天 2019-03-14
  • 镇江市人大常委会召开会议 表决通过人事任免 2019-03-01
  • 一语惊坛(6月7日):祝考生旗开得胜! 2019-02-22
  • 过年如何时尚返乡  12种男版围巾系法送给你 2019-02-22
  • 纯js实现网页动态大图背景效果

    • 内容
    • 相关

    广西福彩快乐双彩 www.ibze.net 效果呢大家看演示,,亲测是兼容大部分浏览器。。

    在注册登录页面用上还是很不错的哦。。

    演示地址:我查看演示

    下面就是完整的代码

    <!DOCTYPE html>
    
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>动态背景代码</title>
    <meta name="keywords" content="小洋,资源网,我爱搜,我爱搜罗,我爱网,吾爱,52搜罗,爱q资源网,小k娱乐网,爱搜索,小新娱乐网,小刀娱乐网,吾爱分享,吾爱共享">
    
    </head>
    <body >
    	
    <!--navbar end-->  
    <script src="https://www.wuiso.cn/00/jquery-1.8.2.min.js"></script>
    <script src="https://www.wuiso.cn/00/supersized.3.2.7.min.js"></script>
    <script type="text/javascript">
    
    jQuery(function($){
    
        $.supersized({
    
            // Functionality
            slide_interval     : 4000,    // Length between transitions
            transition         : 1,    // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
            transition_speed   : 1000,    // Speed of transition
            performance        : 1,    // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
    
            // Size & Position
            min_width          : 0,    // Min width allowed (in pixels)
            min_height         : 0,    // Min height allowed (in pixels)
            vertical_center    : 1,    // Vertically center background
            horizontal_center  : 1,    // Horizontally center background
            fit_always         : 0,    // Image will never exceed browser width or height (Ignores min. dimensions)
            fit_portrait       : 1,    // Portrait images will not exceed browser height
            fit_landscape      : 0,    // Landscape images will not exceed browser width
    
            // Components
            slide_links        : 'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
            slides             : [    // Slideshow Images
                                     {image : '//image2.sina.com.cn/dongman/upload/45/1141/20060102/486/97331/97338.jpg'},
                                     {image : '//img02.tooopen.com/images/20140319/sy_57067992248.jpg'},
                                     {image : '//img.t.388g.com/27/images/201611/1479881738640498.jpg'},
    								 {image : '//p3.so.qhimgs1.com/t010063d68aff17c943.jpg'}
                           ]
    
        });
    
    });</script>
    	
    	<style type="text/css">
    	<!--主要的css-->
    .login-container{margin:10% auto 0 auto}
    		.member {
        background: rgba(66, 65, 65, 0.49);
        z-index: 1;
        position: relative;
        padding: 5% 8%;
    }.topBar {
    			display:none;
    }
    .register-container{margin:0 auto 0 auto;    padding: 30px 0 120px 0;
        max-width: 380px;
        width: 96%;
        margin: 0 auto;
    }
    .register-tis {    line-height: 42px;
        margin: 15px auto 0px;
        padding: 0 15px;
        border: 1px solid #00BCD4;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0);
        color: #00BCD4;}
    
    	img { border:none; }
    	
    	#supersized {  display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
    		#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
    			#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }	/*Speed*/
    			#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }			/*Quality*/
    		
    		#supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
    		#supersized a { width:100%; height:100%; display:block; }
    			#supersized li.prevslide { z-index:-20; }
    			#supersized li.activeslide { z-index:-10; }
    				#supersized li.image-loading img{ visibility:hidden; }
    			#supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }
    
    
    #supersized img { max-width: none !important }
    
    </style>
    
     
    
    
    </body></html>

    热度:2142° 评分:8.7 发布时间: 2018年9月1日

    本文标签:

    版权声明:若无特殊注明,本文皆为《小洋vier》原创,转载请保留文章出处。

    本文链接:纯js实现网页动态大图背景效果 - //www.ibze.net/post-1085.html

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    ?
  • 贾静雯晒咘咘新造型刘海超萌 细数明星家的高颜值女儿 2019-03-20
  • 我的世界杯记忆|新华社许基仁:办世界杯圆球迷梦 2019-03-20
  • 马克思学说是符合人类社会发展规律的真理,后人的所谓“马克思主义”只有符合人类社会发展规律才是真理,否则便是谬误。 2019-03-14
  • 2018年最强拼假攻略出炉 最多可连休16天 2019-03-14
  • 镇江市人大常委会召开会议 表决通过人事任免 2019-03-01
  • 一语惊坛(6月7日):祝考生旗开得胜! 2019-02-22
  • 过年如何时尚返乡  12种男版围巾系法送给你 2019-02-22