Emlog网站自定义背景,自动切换

  • 内容
  • 相关

网站自定义背景,自动切换让你的网站别出一格。

网站自定义背景,自动切换

需用用到的JQuery

Animte CSS动画集可选

HTML主体部分

HTML

<div id = “showbox” class = “set_bg-images” > </a> <i class = “fa fa-cogs” > </ i> 修改壁纸</ div>   
 
    <div id = “bg-images_tanchu” > 
 
   <div id = “changebg” class = “changebg” >  
 
    <DIV 类= “tiphead” > 设置背景图片<a ID = "kaiguan"> <I 类= “FA FA-倍” 风格= “ 浮动:右; 颜色:#333 ” > </ i>的</A> </ DIV>    
 
    <div class = “tipbody” style = “ padding-top :0px ; ” > <ul id = “imgul” >    
 
    <LI 的onclick = “ JavaScript的:文件。体。式。将backgroundImage = 'URL(https://bcsup.sinaapp.com/source/images/bg/1.jpg)' ; ” > <I> </ i>的< / LI> 
 
    <LI 的onclick = “ JavaScript的:文件。体。式。将backgroundImage = 'URL(https://bcsup.sinaapp.com/source/images/bg/2.jpg)' ; ” > <I> </ i>的< / LI> 
 
    <LI 的onclick = “ JavaScript的:文件。体。式。将backgroundImage = 'URL(https://bcsup.sinaapp.com/source/images/bg/3.jpg)' ; ” > <I> </ i>的< / LI> 
 
    <LI 的onclick = “ JavaScript的:文件。体。式。将backgroundImage = 'URL(https://bcsup.sinaapp.com/source/images/bg/4.jpg)' ; ” > <I> </ i>的< / LI> 
 
    <LI 的onclick = “ JavaScript的:文件。体。式。将backgroundImage = 'URL(https://bcsup.sinaapp.com/source/images/bg/5.jpg)' ; ” > <I> </ i>的< / LI> 
 
    <LI 的onclick = “ JavaScript的:文件。体。式。将backgroundImage = 'URL(https://bcsup.sinaapp.com/source/images/bg/6.jpg)' ; ” > <I> </ i>的< / LI> 
 
    <LI 的onclick = “ JavaScript的:文件。体。式。将backgroundImage = 'URL(https://bcsup.sinaapp.com/source/images/bg/7.jpg)' ; ” > <I> </ i>的< / LI> 
 
    <LI 的onclick = “ JavaScript的:文件。体。式。将backgroundImage = 'URL(https://bcsup.sinaapp.com/source/images/bg/8.jpg)' ; ” > <I> </ i>的< / LI> 
 
    </ UL> </ DIV>
 
    </ DIV>
 
    </ DIV>

CSS

。set_bg-images {
 
    font-family :\ 5FAE \ 8F6F \ 96C5 \ 9ED1 ,\ 5b8b \ 4f53 ;
 
    text-align :center ;
 
    border-radius :5px ; 
 
    边框:0px ;
 
    背景色:RGB (92 ,184 ,92 ); 
 
    -webkit-box-shadow :5px 5px 10px #2F582F ;     
 
    box-shadow :5px 5px 10px #2F582F ;     
 
    font-size :40px ; 
 
    宽度:320px ; 
 
    身高:60px ; 
 
    保证金:自动;
 
    z-index :500 ; 
 
}
 
。changebg {
 
    宽度:720px ; 
 
  身高:320px ; 
 
  最高:50%; 
 
    左:50%;
 
    保证金: - 200px - 360px ; 
 
  位置:绝对;
 
  z-index :9999 ;
 
  display :none ;
 
  border-radius :8px ; 
 
  背景:RGB (255 ,255 ,255 ); 
 
  -moz-opacity :0.9 ;
 
  filter :alpha (opacity = 90 );
 
  不透明度:0.9 ;
 
  箱阴影:2px的5像素15像素RGBA (0 ,0 ,0 ,0.8 );   
 
}
 
。开关{
 
  显示:块
 
}
 
。changebg > div {
 
  位置:相对;
 
  溢出:隐藏;
 
  填充:10px ; 
 
}
 
。changebg 。tiphead {
 
  边框底部:1px 实心绿色; 
 
  font-size :20px ; 
 
  font-family :\ 5FAE \ 8F6F \ 96C5 \ 9ED1 ,\ 5b8b \ 4f53 ;
 
}
 
 
 
。changebg ul {
 
 
 
}
 
。changebg ul li {
 
  宽度:140px ; 
 
  身高:100px ; 
 
  浮动:左;
 
  保证金:10px 15px 15px 2px ;    
 
  显示:内联;
 
  位置:相对;
 
  背景颜色:绿色;
 
}
 
。checkit {
 
  位置:绝对; bottombottom :6px ; rightright :8像素;  
 
  颜色:#0c0 ; 
 
}
 
。changebg ul li :nth-child (1 ){ background :url (https://bcsup.sinaapp.com/source/images/bg/tmp/1.jpg )}
 
。changebg ul li :nth-child (2 ){ background :url (https://bcsup.sinaapp.com/source/images/bg/tmp/2.jpg )}
 
。changebg ul li :nth-child (3 ){ background :url (https://bcsup.sinaapp.com/source/images/bg/tmp/3.jpg )}
 
。changebg ul li :nth-child (4 ){ background :url (https://bcsup.sinaapp.com/source/images/bg/tmp/4.jpg )}
 
。changebg ul li :nth-child (5 ){ background :url (https://bcsup.sinaapp.com/source/images/bg/tmp/5.jpg )}
 
。changebg ul li :nth-child (6 ){ background :url (https://bcsup.sinaapp.com/source/images/bg/tmp/6.jpg )}
 
。changebg ul li :nth-child (7 ){ background :url (https://bcsup.sinaapp.com/source/images/bg/tmp/7.jpg )}
 
。changebg ul li :nth-child (8 ){ background :url (https://bcsup.sinaapp.com/source/images/bg/tmp/8.jpg )}
 
。bg-images_tanchu { 宽度:100%; 身高:100%; 位置:固定; 顶部:0 ; 左:0 ; z-index :9997 ;

JS

$ (“#showbox” )。click (function (){  
 
        $ (“#bg-images_tanchu” )。addClass (“bg-images_tanchu” );
 
        $ (“#changebg” )。addClass (“kaiguan” );
 
        $ ('#changebg' )。addClass (“flipInX animated” );
 
     setTimeout (function (){
 
        $ ('#changebg' )。removeClass (“flipInX” );
 
        },800 );
 
 
 
    });
 
$ (“#kaiguan” )。click (function (){  
 
    $ ('#changebg' )。addClass (“flipOutX animated” );
 
     setTimeout (function (){
 
        $ ('#changebg' )。removeClass (“flipOutX” );
 
        $ (“#bg-images_tanchu” )。removeClass (“BG-images_tanchu” );
 
        $ (“#changebg” )。removeClass (“kaiguan” );
 
        },800 );
 
 
 
    });
 
$ ('#imgul> li' )。click (function (){
 
    $ ('li' )。找(“我” )。removeClass (“fa fa-check-circle fa-2x checkit” );
 
    $ (这)。找(“我” )。addClass (“fa fa-check-circle fa-2x checkit” );
 
});


原文地址:http://www.aeink.com/135.html


本文标签:

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

本文链接:Emlog网站自定义背景,自动切换 - https://www.jqlab.cn/post-939.html

发表评论

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