不多说，直接上代码，非常基础的一个原生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. delphi SPCOMM 接收数据不完整！该如何解决

    SPCOMM 接收数据不完整!该如何解决   SPCOMM 接收数据不完整!我作了一个 读取地磅数据的程序,是用spcomm接收的! 总共有五台地磅,其他4台地磅数据读取都正常.但是有一台接收数据的时 ...

  2. ppm与mg/m3转换

    http://wenku.baidu.com/link?url=PY0Nb09VWmBDZgLvMhaHYGJyaC6YcdYAI5XTPRkxMpDHPrs3dNxskYkKmp2F0E6Sl2H5 ...

  3. Appium技术点之解决屏幕无法点击的情况————Python版本

    1.导入包: from appium.webdriver.common.touch_action import TouchAction 2.写代码 TouchAction(driver).pop(x= ...

  4. 高可用HA，高性能

    天天开发,免不了听一些技术论坛,都是专业的词汇,没听过就很陌生,记录一下. ======================================================== 高可用: ...

  5. java.io.Serializable浅析

    转自:http://www.cnblogs.com/gw811/archive/2012/10/10/2718331.html Java API中java.io.Serializable接口源码: p ...

  6. MATLAB 实用函数

    MATLAB个人工具箱(MATLAB) mymail.m 可以利用MATLAB发送邮件(支持附件和群发),非常实用的函数,适用于:耗时很长的脚本完成后通知作者:外加定时器后用于信息推送:家庭监视器紧急 ...

  7. Flex Alert的匿名回调函数如何得到正确的this

    Flex中经常使用Alert来弹出提示或确认窗口,为了方便省事,会直接用匿名函数作为回调,但有时如果要调用外部的this,你会发现匿名函数中的this无法指向外部父类,可以使用e.target获取pa ...

  8. 慕课网-安卓工程师初养成-3-3 Java中的赋值运算符

    来源:http://www.imooc.com/code/1298 赋值运算符是指为变量或常量指定数值的符号.如可以使用 “=” 将右边的表达式结果赋给左边的操作数. Java 支持的常用赋值运算符, ...

  9. Windows 消息机制

    Windows 是一个消息驱动的操作系统.一个消息由一个消息名称(UINT 类型)和两个参数(WPARAM,LPARAM)构成.当用户进行了输入或是窗口的状态发生改变时,系统会发送消息到某一个窗口.例 ...

  10. 写给自己的Java程序员学习路线图

    恩,做开发的工作已经三年多了,说起来实在是惭愧,自己的知识树还像一棵小草一样,工作中使用到了许多的知识和技术,不过系统性不够.根基不牢.并且不够深入!当然,慢慢的我也更加的清楚,我需要学习一些什么样的 ...