`

js实现点击图片切换另一图片,再次点击恢复

 
阅读更多
<script>
function change_pic(){
var imgObj = document.getElementById("pic");
var Flag=(imgObj.getAttribute("src",2)=="1.png")
imgObj.src=Flag?"2.png":"1.png";
}
</script>
<img src="1.png" class="pic_size" id="pic" onClick="change_pic()">

后面的参数2是指其属性。如果你改成1或3,你就可以看到不同的效果了!
说白了参数是2就是指页面上获取页面上原始的效果!
分享到:
评论

相关推荐

    JS实现图片切换

    JavaScript(简称JS)是一种轻量级的脚本...总之,JavaScript实现图片切换是网页动态效果的基础,熟练掌握这一技能有助于提升网页的互动性和用户体验。通过不断的实践和优化,你可以创建出更加丰富多样的图片切换效果。

    h5实现点击图片,放大当前图片并轮播图片

    为了提供更好的用户体验,可以在图片切换、放大和缩小过程中添加平滑的过渡动画,如使用CSS的`transition`属性或JavaScript的`requestAnimationFrame`进行动画处理。 6. **响应式设计**: 为了确保在不同设备和...

    js+css鼠标点击时图片放大再次点击时返回原位置

    本文将详细介绍如何利用JavaScript(简称js)和CSS技术实现一个常见的交互功能:当鼠标点击图片时,图片放大;再次点击时,图片返回原位置。这个功能在很多网站上都有应用,如产品展示、相册浏览等场景。 首先,...

    jquery 点击图片放大,再点击缩小(针对同一张图片)

    现在,我们将编写jQuery代码来实现点击图片放大和缩小的功能。在`&lt;script&gt;`标签内或外部链接的JS文件中,加入以下代码: ```javascript $(document).ready(function() { var isZoomed = false; $('#magnify')....

    原生JS实现隐藏显示图片 JS实现点击切换图片效果

    在本文中,我们将深入探讨如何使用原生JavaScript来实现隐藏显示图片以及点击切换图片的效果。这个功能对于网页交互设计来说非常实用,可以让用户通过简单的点击操作来改变页面内容,提高用户体验。 首先,我们需要...

    图片点击放大缩小js代码

    "图片点击放大 js代码" 是一种常见的实现方法,它允许用户通过点击小的缩略图来查看大图,再次点击则返回原来的缩略图状态,提供了一种便捷的大小图切换体验。这种功能对于产品展示、摄影网站或者任何需要详细查看...

    jquery实现图片循环播放,点击切换到下一张图片

    以上代码实现了一个简单的图片循环播放和点击切换功能。用户可以点击小图片查看大图,同时大图会按照设定的时间间隔自动切换。当用户点击小图片时,自动切换会被暂停,直到再次点击。注意替换 `src` 和 `data-big` ...

    原生JS代码简单的渐隐渐现图片切换效果

    在本文中,我们将深入探讨如何使用原生JavaScript实现一个简单的渐隐渐现图片切换效果。这个效果常见于网站上的轮播图或者动态展示区域,它能够为用户带来平滑、流畅的视觉体验。 首先,我们需要了解渐隐渐现效果的...

    点击放大图片、再次点击缩小

    标题“点击放大图片、再次点击缩小”所描述的是一个典型的图片查看器应用或者功能,它具有与QQ查看图片相似的交互体验。用户首次点击图片时,图片会放大以供更细致地查看,再次点击则会恢复原大小。这种设计旨在提供...

    js图片嵌套点击放大特效

    在这个"js图片嵌套点击放大特效"的项目中,我们将探讨如何使用JavaScript来实现一个功能,即当用户点击图片时,图片能够以某种放大效果显示,提供更丰富的视觉体验。 首先,我们需要理解HTML结构。在网页中,图片...

    jquery手动自动图片切换.rar

    《jQuery实现手动自动图片切换详解》 在网页设计中,图片切换效果是常见的交互元素,可以增强用户体验,吸引用户注意力。本教程将深入探讨如何利用jQuery库实现手动和自动的图片切换功能,让网页的视觉展示更加生动...

    点击按钮使图片旋转

    在IT领域,尤其是在网页开发和用户界面设计中,"点击按钮使图片旋转"是一个常见的交互功能,它提升了用户体验,使得用户能够以直观的方式查看或操作图像。这个功能通常结合JavaScript、CSS3以及HTML来实现,这三种...

    图片轮播,自动轮播,点击暂停

    再次点击则可以重新启动定时器,恢复轮播。 接下来,我们关注"简单轻巧,可直接导入使用,无需其他操作"这部分描述。这可能指的是该组件设计简洁,代码结构清晰,容易集成到现有项目中。对于开发人员来说,这意味着...

    特效相册,特效图片切换

    【特效相册,特效图片切换】是一个利用jQuery技术实现的动态相册功能,它提供了吸引人的视觉效果,以及方便的播放和暂停控制。在网页设计和开发中,这样的功能能够提升用户体验,使得相册展示更加生动有趣。接下来,...

    基于touch.js+zepto.js开发的移动端图片查看器,基本实现图片左右滑动,双指缩放,双击缩放.zip

    5. 动画效果:在图片切换和缩放过程中,加入平滑的过渡动画,提高用户体验。 6. 图片加载优化:预加载相邻图片,避免用户在滑动时出现明显的延迟。 7. 兼容性处理:考虑到不同设备和浏览器的差异,可能需要进行兼容...

    javascript经典特效---图片显示特效.rar

    4. 图片缩放:点击图片后,图片放大显示在页面中央,再次点击恢复原状。这种效果可以通过改变图片CSS样式(如width和height属性)来完成。 5. 图片裁剪与旋转:JavaScript库如Cropper.js可以实现图片的裁剪和旋转,...

    jquery手机幻灯片点击弹出图片手指滑动切换代码

    通过以上知识点的运用,可以构建出一个功能完善的jQuery手机幻灯片组件,实现点击弹出图片以及手指滑动切换的效果。在实际开发中,还需要考虑性能优化,避免过度渲染和不必要的计算,以确保在各种设备上都能流畅运行...

    js图片轮换

    总结来说,JavaScript图片轮换技术是通过JavaScript操作DOM和定时器实现的,可以通过数组存储图片路径,定时切换图片源。添加过渡效果和暂停功能能提升用户体验。对于更复杂的应用,可以考虑使用专门的图片轮换插件...

    带停顿 的 js 图片滚动 上下

    在JavaScript(JS)编程中,实现图片的上下滚动效果是一种常见的需求,特别是在网站设计和开发中。"带停顿的js图片滚动上下"这个标题暗示了我们正在处理一个具有暂停功能的图片滚动特效,这样的功能使得用户在浏览时...

    Jquery实现图片全屏显示插件

    在这个场景下,我们可以利用jQuery来实现一个图片点击后全屏显示的功能。下面我们将详细探讨如何实现这一功能,并学习相关的jQuery知识点。 1. **jQuery 基础** 在开始之前,我们需要确保页面已经引入了 jQuery 库...

Global site tag (gtag.js) - Google Analytics