不多说，直接上代码，非常基础的一个原生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. SVN版本管理trunk及branch相关merge操作

    先说说什么是branch.按照Subversion的说法,一个branch是某个development line(通常是主线也即trunk)的一个拷贝,见下图: branch存在的意义在于,在不干扰t ...

  2. Dede cms文章内容管理系统安全漏洞!如何有效防止DEDE织梦系统被挂木马安全设置

    第一.安装Dede的时候数据库的表前缀,最好改一下,不要用dedecms默认的前缀dede_,可以改成ljs_,随便一个无规律的.难猜到的前缀即可. 第二.后台登录一定要开启验证码功能,将默认管理员a ...

  3. C++学习32 重载new和delete运算符

    内存管理运算符 new.new[].delete 和 delete[] 也可以进行重载,其重载形式既可以是类的成员函数,也可以是全局函数.一般情况下,内建的内存管理运算符就够用了,只有在需要自己管理内 ...

  4. cvs 用法

    CVS使用指南 1 概念 CVS是Client/Server结构的并行版本控制系统. 资源库(repository) 存在于服务器上,所有版本的数据仓库.可以把它想象成一个数据库服务器. 模块 (mo ...

  5. grunt构建前端自动化的开发环境

    废话不多说.直奔主题. 1.安装node. 别问为什么.如果你不知道,说了你还是不知道. 别问怎么安装,自己去百度. 2.安装grunt_CLI. 安装完node,并且安装成功了,后.下载grunt_ ...

  6. 编写一个go gRPC的服务

    前置条件: 获取 gRPC-go 源码 $ go get google.golang.org/grpc 简单例子的源码位置: $ cd $GOPATH/src/google.golang.org/gr ...

  7. Python 的 List 要印出 中文 編碼

    Python 的 List 如果有中文的話, 會印出 \xe4\xb8… 等等的編碼, 要如何印出中文呢(如下範例)? (Debug 方便查看) View Raw Code? >>> ...

  8. Objective-C 2.0的运行时编程

    Objective-C 2.0 的运行时环境叫做Morden Runtime,iOS 和Mac OS X 64-bit 的程序都运行在这个环境,也就是说Mac OS X 32-bit 的程序运行在旧的 ...

  9. Android Studio 修改 包名 package name

    我们的包名中含有Nav,造成声音不能正常出来:需要改包名,但 android studio 改包名原来还是比较麻烦的,不过现在简单多了: 第一步,直接打开 AndroidManifast.xml 文件 ...

  10. Jmeter命令行方式启动

    在性能测试过程中,我们常常遇到这样的问题,使用Jmeter的GUI界面进行大并发量的性能测试时,界面容易卡死,无法继续进行性能测试.通过使用命令行方式启动jmeter是一个不错的方式.下面就简单介绍一 ...