不多说，直接上代码，非常基础的一个原生js切换元素背景图片范例

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>原生JS范例</title>

<script type="text/javascript">

function changeBg(){

    var domobj = document.getElementById('bg');//获取dom元素

    var bgsrc_a = domobj.getAttribute("data-bg1");

    var bgsrc_b = domobj.getAttribute("data-bg2");

    domobj.style.backgroundImage='url('+bgsrc_b+')';

    //两属性位置互换

    domobj.setAttribute('data-bg1',bgsrc_b);

    domobj.setAttribute('data-bg2',bgsrc_a);

}

</script>

<style type="text/css">

#bg{ width:200px; height:80px; background-repeat:no-repeat; background-image:url(http://www.yilewan.com/resource/images/logo.png);}

</style>

</head>

<body>

<a href="javascript:;" onclick="changeBg();">点击切换</a>

<hr />

<div id="bg" data-bg1='http://www.yilewan.com/resource/images/logo.png' data-bg2='http://www.58game.com/resource/images/logo_58game.png'></div>

</body>

</html>

一个简单且丑陋的js切换背景图片基础示例的更多相关文章

  1. 网页html随机切换背景图片

    首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量. 在script中将这些图像编为一个数组,便于调用.数组的长 ...

  2. WPF 渐隐渐现切换背景图片

    最近学习WPF,尝试着自己做一些小玩意,也遇到了一些问题,于是整理记录以便日后查阅. 我们都知道WPF可以实现一些很炫的效果,然而有时候为达到这个目的却并不是一件很容易的事情.比如:在软件中我希望能够 ...

  3. JQuery插件supersized.js实现背景图片淡入浅出

    淡入浅出的网站背景图片切换,其实是引用了JQuery插件supersized,效果很炫吧.其实这个插件功能很强大,可以做很多图片类的效果.这些需要等待我们自己去探索. 下面是这个效果的代码只有一行: ...

  4. 一款js控制背景图片平铺

    背景图片的平铺方法有很多种,纯色背景,渐变背景,图片背景,今天讲的是移动端的图片背景~~~~ <style> html,body{;;} .body{background: url(ima ...

  5. 一个简单的3D范例，是在别人基础上面整理的。

    一个简单的范例,是在别人基础上面整理的.原来的例子,框图太乱了,没有条理感. http://pan.baidu.com/s/1eQTyGCE

  6. 从一个简单例子来理解js引用类型指针的工作方式

    <script> var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined conso ...

  7. js切换背景颜色

    我将全部的代码上传到了github,你可以下载查看 <!-------change the background color--------------> <script> f ...

  8. 一个简单的观察者模式的JS实现

    这不是原创文章,主要是写给自己看的.原文比较详细容易让人,我提取最简单最好理解的部分,便于我以后用到.参考http://www.cnblogs.com/TomXu/archive/2012/03/02 ...

  9. 记一个简单的webpack.config.js

    module.exports = { entry: './basic/app.js', output: { path: './assets/', filename: '[name].bundle.js ...

随机推荐

  1. 20145305《JAVA程序设计》实验二

    实验内容 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握UML建模 4.熟悉S.O.L.I.D原则 5.了解设计模式 实验要求 1.没有Linux基础的同学 ...

  2. Java List循环(转)

    List有三种循环方式: 分别是经典的for循环,迭代器(list.iterator()),foreache循环(和C#相同哦) 测试代码如下: public static void main(Str ...

  3. [kuangbin带你飞]专题九 连通图

        ID Origin Title   76 / 163 Problem A POJ 1236 Network of Schools   59 / 177 Problem B UVA 315 Ne ...

  4. C++primer 练习13.39

    13.39 编写你自己版本的StrVec,包括自己版本的reserve,capacity(参见9.4节,第318页)和resize(参见9.3.5节,第314页) 13.40 为你的StrVec类添加 ...

  5. Altium designer 原理图库快速创建

    Altium designer 原理图库快速创建,原来都没发现用这个功能,最近查了一下很好用,就是通过Excel编写管脚名称再直接导入就可以了,很方便的. 1.首先在Excel创建填好对应管脚名称. ...

  6. jBox 弹出窗口中焦点设置问题

    jBox  是一个不错的组件库,可以用来比较简单地弹出窗口. 我希望在 jBox 弹出窗口之后,自动将焦点设置到子窗口的某个输入框中,可是发现并不容易. 在 jBox 2.3 中,提供了如下的增强. ...

  7. CPPUTest 单元测试框架(针对 C 单元测试的使用说明)

    CPPUTest 虽然名称上看起来是 C++ 的单元测试框架, 其实它也是支持测试 C 代码的. 本文主要介绍用CPPUTest来测试 C 代码. (C++没用过, 平时主要用的是C) C++相关的内 ...

  8. 【LeetCode】6. ZigZag Conversion 锯齿形转换

    题目: 思路: 以图为例:s={'A','B','C','D','E','F','G','H'.....} 1.先不考虑中间元素F.G.H.N...,每一行前后元素在数组中对应下标相差size=2*n ...

  9. asp.net 播放flash

    注意3点: 1.路径,swf播放器对应的是当前页面的路径,flv视频对应的是swf播放器的路径2.路径中不能出现中文3.IIS设置,IIS站点属性中的HTTP头->MIME添加MIME影射关系, ...

  10. EXTJS 密码确认与验证

    extjs 框架是一个非常优秀的前端框架,提供了丰富的功能与炫丽的界面展示,在用 extjs 创建表单时,特别是在注册或修改密码的时候,要对密码进行确认,这里就密码确认一致性验证和大家分享自己的心得与 ...