简单特效-切换背景图片

HTML代码：

  <! DOCTYPE html>
     <head>
          <title></title>
          <meat charset="utf-8">
      </head>
     <body>
              <div class="toggle">
                 <img src="images/">
                 <img src="images/">
                 <img src="images/">
              </div>
    </body>
    </html>

　CSS样式表代码：

   div.toggle img{width:200px;height:180px; float:right};
   body{background-image:url()};

　　javascript代码：

    var toggle=document.getElementsByTagName("img");
    var body=document.getElementsByTagName("body") ;

             toggle.onclick=function(){
                body[0].style.backgroundImage="url(this.getAttribute(url))";
       }

　　

时间： 2024-10-07 12:58:51

简单特效-切换背景图片的相关文章

一个简单且丑陋的js切换背景图片基础示例

不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS范例</title> <script type="text/javascript"> function changeBg()

CSS实现的鼠标经过链接切换背景图片实例代码

CSS实现的鼠标经过链接切换背景图片实例代码:很多导航栏都有这样的效果,当鼠标滑过的时候能够实现背景图片的切换,算是一个比较好的效果吧,也算是对导航栏最基本的美化了.代码实例如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="

淡入淡出(折叠效果)and点击切换背景图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

点击切换背景图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

button点击切换背景图片的问题

我做了个UIButton的扩展,代码如下: #import <UIKit/UIKit.h> @interface CheckBoxButton : UIButton @property (nonatomic,assign) BOOL isChecked; @end 我通过下面代码来实现点击后切换图片,但是并不能达到效果 if (button.isChecked) { self.collectionButton.imageView.image = [UIImage imageNamed:@&qu

hover 切换背景图片路径

#glass{ width: 42px; height: 38px; border: 1px solid #dfdfdf; position: absolute; background:url(../images/z-hear-search.png) no-repeat center; background-color: #fff;} #glass:hover{ /*color: #fff;*/ border:1px solid #1e88e5; background:url(../images

js设置随机切换背景图片

<script> var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_default.png", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/111223

点击之后变色，还切换背景

1,新建xml文件存放到drawble目录下 切换颜色 <?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@color/black" android:state_checked="t

切换背景图像综合练习题

练习题: 根据所学知识,使用CSS3知识,实现背景图片的切换效果(不依赖js,点击小图切换大的背景图) 任务 给每个列表定义不同的背景颜色 提示:使用结构伪类选择器:nth-of-type() 设置缩略图外形效果 提示:使用伪元素::after制作圆形效果 1.给每个缩略图设置不同的图片 提示:使用伪结构选择器:nth-of-type(),并且配合::after 2.给每个缩略图添加透明度蒙板效果 提示:使用伪类选择器::before给缩略图添加蒙板效果 3.鼠标悬浮在缩略图上时,修改缩略图上蒙