JavaScript动态修改图片的代码

最新推荐文章于 2023-08-15 15:45:06 发布
原创 最新推荐文章于 2023-08-15 15:45:06 发布 · 1.3k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了如何使用JavaScript实现按钮点击触发动态修改图片源的功能，包括HTML、CSS、JavaScript的基本应用，以及如何通过修改DOM元素的src属性实现图片的动态加载。

通过document.getElementById("pic").src="pattern.png"; 

来修改照片的来源即可

<html>
<body>
<input type="button" value = "切换图片" onclick="changepic()"/>

<img id= "pic" src="ss1.jpg" />
<script>
function changepic()
{
  document.getElementById("pic").src="pattern.png"; 
}
</script>
</body>
</html>


dusea
关注
利用javascript实现图片动态的放大和缩小
04-18
NULL 博文链接：https://lfl2011.iteye.com/blog/1841115
保持原比例不变改变图片大小的JS,很好用,有实例
04-14
resizepic.js就是我整理的可保持原比例不变改变图片大小的JS,很好用,有实例index.htm。 原图显示（534 X 800） onload="AutoResizeImage(0,0,this) 1.按宽度250压缩,不限制高度 按比例压缩 onload="AutoResizeImage(250,0,this)" 2.按高度250压缩,不限制宽度 按比例压缩 onload="AutoResizeImage(0,250,this)" 3.按高度250宽度250 按比例压缩 onload="AutoResizeImage(250,250,this)" 4.高宽不等比例压缩 （400 X 512）,此时高度不变，会自动按高度的比例压缩。 onload="AutoResizeImage(400,512,this)" 5.高宽不等比例压缩 （300 X 600）,此时宽度不变，会自动按宽度的比例压缩。 onload="AutoResizeImage(300,600,this)" 6.如果图片本来的高度和宽度小于压缩的最大高度和宽度，则不会拉大显示图片（按原图显示） 原图444 x 207,压缩为 500 x 600,将保持原图显示 onload="AutoResizeImage(500,600,this)"
javascript DOM编程艺术 案例之局部图片文本更新
normol的博客
10-26 905
局部刷新 *{ margin:0; padding: 0; text-decoration: none; } .main{ width: 950px; height: 460px; background-color: #ccc; margin-top: 110px; margin-right: auto; margin-left: auto; }
在js中写html更改图片,关于html：使用JavaScript更新图片src？
weixin_39522103的博客
05-31 881
我有一张图像(img.png)，其内容在组合框更改后也会更改。问题是，当我更改页面上的组合框时，图像的内容不会更改。我试图像这样使用JavaScript：function SwitchPic(pic) {pic.src ="img.png";}img标签是：组合框标记为：Select a Number:abc第一次更改选项时它起作用，但是当我重新更改选项时，它保持图像不变。我该如何解决？您的函数没...
javascript之动态更改图片
03-12 1328
Ajax-6: Magic Hat <!-- function ShowRabbit() { var imgHat = document.getElementById("topHad"); var imgNew = document.createElement("img"); var imgParent = imgHat.parentNod
JavaScript---常用元素的属性操作(点击图片修改src属性)
weixin_45904557的博客
05-01 3087
操作dom可以改变元素里的内容,还可以改变很多属性 举个栗子: img的src属性,a连接的href属性,还有一些id alt title等等 举个栗子: 修改img元素属性 src <button type="button" id="mm1">第一张漂亮妹妹</button> <button type="button" id="mm2">第二张漂亮妹妹</button> <img src="img/04.png"> .
分享116个JS图片代码，总有一款适合您
zy0412326的专栏
02-08 1283
js
使用js动态修改图片src路径的方法代码
热门推荐
徊忆羽菲
06-12 2万+
使用js动态修改图片src路径的方法代码 <!DOCTYPE html> <html> <head> <script> function changeSrc() { document.getElementById("qipa250Image").src="hackanm.gif"; } </script> </head> &...
轮播图以及js中修改图片的src
笑倾尘的博客
09-05 676
js代码 <script> var items = document.getElementsByClassName('list-item'); var arrowl = document.getElementById('arrow-l'); var arrowr = document.getElementById(...
JS 实现图片上下张切换
FemaleHacker的博客
01-16 1514
文章目录JS 实现图片上下张切换body中相关设置css样式简单设置js主要部分效果图图片素材原图完整代码 JS 实现图片上下张切换 思路：利用js切换图片，即修改img标签中的src属性即可。 body中相关设置 文本提示块（提示当前图片为第几张，共几张图片） 图片块（放置图片） 两个按钮（切换上下张按钮） <body> <div id='outer'> <p id='info'></p> <img src="img/1.png" alt
js实现首页图片的轮播效果
伯兰的博客
07-13 2573
在大多数的网站里面首页都会有一个图片轮播的效果，而我们开发者要实现这种效果要么是使用第三方插件，要么是使用js自己写函数来实现这种效果，而我自己就是自己写js来实现这种效果，首先，我们来看一下最终完成的效果： 这个就是最终实现的效果，下面我们来分析一下原理，我们打开一个拥有这种效果的网页，然后按f12，然后选中那个div，就可以看到下面这种效果： 我们可以看到，这上
php图片预先加载,html实现图片预加载的分析（附代码）
weixin_32151313的博客
03-13 204
这篇文章给大家介绍的内容是关于html实现图片预加载的分析(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。很多时候，我们在写html页面的时候，当需要在页面中加入图片时，我们很自然地把图片直接用标签放在了里面，这本来是没有多大问题的。但是当图片数量很多的时候，问题就来了。Html页面在被解析器解析的时候要不断去寻找图片的路径去加载图片，而这些图片不一定所以都会被用户通过触...
证件照片裁剪处理工具.zip
06-19
用于证件照片的制作裁剪处理，可修改照片的尺寸，更换背景等功能 照片处理分为：一寸照生成器、二存照生成器、公务员照片处理器、照片审核
rails4 ，用js改变div的背景图片
beslow的专栏
03-21 993
rails4 图片路径设在了 app/assert/images/下，其下有1.jpg和2.jpg 在css样式中可以用 background-image：url(“1.jpg”);   问题是如果在js中想改变这个背景图片，换成2.jpg，js中如果这样写：document.getElementById( "indexCover" ).style.backgroundImage = "url
图片批量导入
qlynick的专栏
08-15 444
以下是js文件里 import，export的时候简化加载文件的方法。import过来的对象，当做一个目录来使用。根据文件名称调取该目录的文件。
【JQuery】动态加载的图片如何实现LazyLoad
sky 胡萝卜星星
10-20 1万+
JQuery.lazyload.js是个专门用来做图片延迟加载的插件，当然网上有对它吐槽的，有各种不屑的，他们那是前端大牛，我等只能用用大牛提供插件的可没那能耐，碰巧有人在论坛问动态加载的图片怎么应用lazyload效果，其实我会说在此之前我从来没用过这个插件么…… 通过nuget下载lazyload.js，然后搜索该插件的用法，其实网上中文的用法说明都千篇一律，可我需要了解的东西也都知道了
js改变标签得属性
在行进路上的博客
10-10 760
<img src="images/bk.gif" width="1003" height="362" id="tes" /> var rrr = document.getElementByIdx_x("tes"); rrr.src = "images/kk.jpg"; 注意：js必须写在后面，否则遍历返回null
JavaScript的功效
WMJ_wmj75的博客
03-12 184
javascript功效和一些要注意事项
coco2d js 修改预加载，使用自定义图片
chuanyu的专栏
08-21 1281
cocos studio 版本： V2.3.1.2 cocos2d  js版本： V3.6.1 1.在线将png图片转成Base64 http://imgbase64.duoshitong.com/ 2.代码 3.浏览器效果
js修改.css文件,js 动态修改css文件的方法
weixin_39978444的博客
08-04 566
js 动态修改css文件的方法_.find(document.styleSheets[4].cssRules,function(cssRule){if(cssRule.selectorText && cssRule.selectorText.indexOf(".navbar-fixed-top2")>-1){cssRule.style.position="";cssRule....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值