JS实例（五）网页背景图片切换

最新推荐文章于 2023-09-17 21:08:17 发布

weixin_34402408

最新推荐文章于 2023-09-17 21:08:17 发布

阅读量490

点赞数 1

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/suvllian/articles/5409343.html

版权

　　最近做的一个前端的东西，最主要的问题就是实现点击图片切换网页的背景，想想就应该把背景图片切换的问题总结一下。

　　首先关于导致背景图片切换的事件不一定是点击，还可以是自动切换，或者鼠标经过等事件。还有很多引申的实例。

　　下面步入正题：

　　先讲讲我实现网页背景图片的方法：

　　首先在HTML中添加想要设置的背景图片，把想要显示的display属性设为正常的，不想要显示的display属性设为none。我想，这应该有一个好处就是在网页加载时，就把所有的图片已经加载了，只是要不要显示的问题。

<div id="fix1" class="fix"> <img src="images/5.jpg" width="100%" height="100%"></div>
<div id="fix2" class="fix1"> <img src="images/1.jpg" width="100%" height="100%"></div>
<div id="fix3" class="fix"> <img src="images/2.jpg" width="100%" height="100%"></div>

.fix1{
            position: fixed;
            width: 100%;
            height: 100%;
            top: 102px;    
        }
.fix{
            position: fixed;
            width: 100%;
            height: 100%;
            top: 102px;
            display: none;       
        }

　　第二步就是使用DOM获取小图片的节点。

var obj1 = document.getElementById('fix1');
var obj2 = document.getElementById('fix2');
var obj3 = document.getElementById('fix3');

　　第三步就是在小图片被点击时触发事件，改变对应的display属性，这样就可以切换背景图片。

pic1.onmouseover =function(){
    obj1.className = "fix1";
    obj2.className = "fix";
    obj3.className = "fix";
    }

　　这样就实现了一个简单的背景图片的切换，主要就是设置两种CLASS属性，在鼠标点击时，将CLASSNAME变化，从而改变样式。实现改变背景图片的方法。

　　之前我也试过其他的方法，直接获取DOM节点，改变STYLE；将图片存在数组中，点击触发事件，背景图片直接换成数组中对应的链接；直接在标签中添加onclick事件。

　　但是试过了都不行，可能是我有些地方写错了，这些方法应该都是可用的。

　　再说一下常用的在网页中添加背景图片的方法：

　　1、直接在BODY属性中添加：

<body background="images.jpg">

　　2、在CSS中链接：

background:url('images.jpg');

　　或者：

background-image:url(图片地址);

　　3、在JavaScript中添加

转载于:https://www.cnblogs.com/suvllian/articles/5409343.html

weixin_34402408

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实例（五）网页背景图片切换

　　最近做的一个前端的东西，最主要的问题就是实现点击图片切换网页的背景，想想就应该把背景图片切换的问题总结一下。　　首先关于导致背景图片切换的事件不一定是点击，还可以是自动切换，或者鼠标经过等事件。还有很多引申的实例。　　下面步入正题：　　先讲讲我实现网页背景图片的方法：　　首先在HTML中添加想要设置的背景图片，把想要显示的display属性设为正常的，不想要显示的display...
复制链接

扫一扫