js变换显示图片的实例


Posted in Javascript onApril 16, 2013

开始界面如图:
js变换显示图片的实例

<head>
    <title></title>
   <script type="text/javascript">
       function UpdateImg() {
           //document.getElementById('img1').setAttribute('src', 'images/2.jpg');
           var dogandcat = document.getElementsByName('dogandcat'); //获取所有name=dogandcat的单选按钮
           for (var i = 0; i < dogandcat.length; i++) {
               if (dogandcat[i].checked == true) {
                   var value = dogandcat[i].getAttribute('value');
                   switch (value) {
                       case '2':
                           document.getElementById('img1').setAttribute('src', 'images/2.jpg');
                           break;
                       case '3':
                           document.getElementById('img1').setAttribute('src', 'images/3.jpg');
                           break;
                       case '4':
                           document.getElementById('img1').setAttribute('src', 'images/4.jpg');
                           break;
                       case '6':
                           document.getElementById('img1').setAttribute('src', 'images/6.jpg');
                           break;
                   }
               }
           }
       }
    </script>
</head>
<body>
 <img id="img1" src="images/9.jpg" width="200px" height="200px" />
    <br />
    <input type="button"  value="改变图片" onclick="UpdateImg();" />
    <br />
    <input id="Radio1" name="dogandcat" type="radio" value="2" onclick="UpdateImg();"  />忧伤的小狗
    <input id="Radio2" name="dogandcat" type="radio" value="3" onclick="UpdateImg();"/>卖萌的小狗
    <input id="Radio3" name="dogandcat" type="radio" value="4" onclick="UpdateImg();"/>愤怒的小狗
    <input id="Radio4" name="dogandcat" type="radio" value="6" onclick="UpdateImg();"/>可爱的小猫
</body>
下面是程序运行时的界面:点击不同的按钮图片是不一样的

 

js变换显示图片的实例

js变换显示图片的实例

Javascript 相关文章推荐
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 Javascript
在jQuery中 常用的选择器介绍
Apr 16 #Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 #Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 #Javascript
基于jQuery中对数组进行操作的方法
Apr 16 #Javascript
js中 关于undefined和null的区别介绍
Apr 16 #Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 #Javascript
用js实现trim()的解决办法
Apr 16 #Javascript
You might like
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
php getsiteurl()函数
2009/09/05 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
javascript 树形导航菜单实例代码
2013/08/13 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
Angular 作用域scope的具体使用
2017/12/11 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
python中的sort方法使用详解
2014/07/25 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
python flask 多对多表查询功能
2017/06/25 Python
Python元组知识点总结
2019/02/18 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
python中rb含义理解
2020/06/18 Python
Java面试题:为什么要用Java
2012/05/11 面试题
儿媳婚宴答谢词
2014/01/14 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
小学数学教学随笔
2015/08/14 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
html中两种获取标签内的值的方法
2022/06/16 jQuery