精华内容
下载资源
问答
  • JS制作网页–点击图片换背景,供大家参考,具体内容如下 网页中有四个图片,点击不同的图片,更换相对应的背景。 <!DOCTYPE html> <html lang=zh-CN> <head> <meta charset=UTF-8> <...
  • 使用JavaScript制作一个简单的网页,网页内部有四个小图片,点击不同的图片介意更换页面的背景。
  • js 点击更换背景图片

    2021-02-12 11:00:39
    <html lang="en"> <head> ... // this.src 就是我们点击图片的路径 images/2.jpg // 把这个路径 this.src 给body 就可以了 //body的背景图片 url(images/1.jpg) 更换为 '+this.src+'; } } script> body> html>
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            
            body {
                background: url(images/1.jpg) no-repeat center center;
            }
            
            .nav {
                width: 647px;
                height: 100px;
                margin: 100px auto;
                border: 1px solid #ccc;
            }
            
            img {
                width: 158px;
                vertical-align: middle;
            }
        </style>
    </head>
    
    <body>
        <div class="nav">
            <img src="images/1.jpg" alt="">
            <img src="images/2.jpg" alt="">
            <img src="images/3.jpg" alt="">
            <img src="images/4.jpg" alt="">
        </div>
        <script>
            var images = document.querySelector('.nav').querySelectorAll('img'); //获取nav下面的 所有img
            for (var i = 0; i < images.length; i++) { //循环
                images[i].onclick = function() { //images里面的第 i 个 点击事件
                    console.log(this.src);
                    document.body.style.backgroundImage = 'url(' + this.src + ')';
                    // this.src 就是我们点击图片的路径   images/2.jpg
                    // 把这个路径 this.src 给body 就可以了
                    //body的背景图片 url(images/1.jpg) 更换为 '+this.src+';
                }
            }
        </script>
    </body>
    
    </html>
    
    展开全文
  • js实现点击更换图片

    万次阅读 2014-06-17 08:45:24
    看到很多技术大牛都在写技术博客,作为刚刚入职的一名应届生,我想这是一种好习惯。... 刚刚入职Web前端开发,还有很多东西需要学习,这段时间,我主要学习javaScript脚本技术,从零开始!    
         看到很多技术大牛都在写技术博客,作为刚刚入职的一名应届生,我想这是一种好习惯。大概在一个月前有了这样的想法,但是却一直没有实施,说起来真惭愧。今天终于决定发一篇文章,作为一个新的开始。如果这文章有幸被读者读到,我倍感荣幸,希望对你有所帮助,同时也期待着跟您的交流。 
    

          刚刚入职Web前端开发,还有很多东西需要学习,这段时间,我主要学习javaScript脚本技术,从零开始!

           某些时候,见到网上点击轮换图比较帅气一点儿,所以便自己动手,把这个效果写了下,下面是源码。

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>changeImages</title>
    		<meta name="author" content="Administrator" />
    		<!-- Date: 2014-06-16 -->
    		<style type="text/css">
    			body{margin: 0;padding:0;}
    			img{width:384px;height:512px;}
    			#content{margin: 0 auto;width:384px;height:512px;}
    		</style>
    		<script>
    			var b=0;//定义全局变量,否则每次点击都会从新计数
    			function changeImages(){
    				a=document.getElementById('show');//获取目标Id
    				if(b<4){//图片张数,遍历每张图
    					a.src="light0"+b+".gif";//替换位置
    					b++;
    					}else{
    					b=0;
    					}
    				}
    		</script>
    	</head>
    	<body>
    		<div id="content">
    			<img id="show" src="light00.gif" alt="点击换图" οnclick="changeImages()">
    		</div>
    	</body>
    </html>
    

         如果你有更好的方法,欢迎一起交流。







    展开全文
  • <title>js学习 #sq{ width:400px; height:400px; background:#C25B5D;} #sq1{ width:400px; height:400px; background:blue;} ();"> function ch(){ var sq= document....
  • 原生js随机图片交换位置_点击拖动图片换位置
  • js点击实现随机更换图片

    千次阅读 2019-06-14 15:26:43
    (注意Math.floor是向下取整,可以取到0,所以图片的名称最好从0开始;) (注意Math.ceil是向上取整,可以取到1,所以图片的名称最好从1开始) <!DOCTYPE html> <html> <head lang=...

    首先在img文件夹内放6张图,注:类似于add1.jpg,add2.jpg

    然后就使用Math.random函数实现随机数

    (注意Math.floor是向下取整,可以取到0,所以图片的名称最好从0开始;)

    (注意Math.ceil是向上取整,可以取到1,所以图片的名称最好从1开始)

    <!DOCTYPE html>
    <html>
        <head lang="en">
            <meta charset="UTF-8">
            <title>点击切换图片</title>
            <!--    网页上显示一张图片,当用户点击该图片的时候,切换另一张图。
      (可以搞4 或 6张图片,用户点击的时候随机切换 
    或者 用户点击的时候 切换到下一张图片)-->
            <script type="text/javascript">
                function changePic() {
                      //随机产生1-6随机数             
                    var num = Math.ceil(Math.random() * 6);
                    //修改src路径
                    document.getElementById("sjImg").src ="add" + num + ".jpg";    
                }
            </script>
        </head>
        <body>
            <p align="center"><img  src="add1.jpg" id="sjImg"  οnclick="changePic()" /></p>
        </body>
    </html>

    然后通过点击随机切换图片

    展开全文
  • javaScript实现点击图片更换

    千次阅读 2020-04-04 13:39:45
    // 图片数据,数组管理。最大索引为 4 ,pics.length-1 let i=0; // 1. 找标签 let myPic = document.getElementById("myPic"); let up = document.getElementById("up"); let down = document.getElementById(...

    HTML:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    </head>
    
    <body>
    <img id="myPic" src="images/img1.jpg" width="400" height="300" alt=""/>
    <script>
        // 1. 找标签
        let myPic = document.getElementById("myPic");
        // 2. 事件处理函数
        let  changePic = function( event ){
           // this.src = "images/img2.jpg";
            event.currentTarget.src = "images/img2.jpg" ;
        };
        // 3. 添加事件监听
        myPic.addEventListener("click", changePic );
    </script>
    
    </body>
    </html>
    
    

    JS:

    {
        let pics = [
            "images/pic1.jpg",
            "images/pic2.jpg",
            "images/pic3.jpg",
            "images/pic4.jpg",
            "images/pic5.jpg"
        ]; // 图片数据,数组管理。最大索引为 4 ,pics.length-1
        let  i=0;
    
        // 1. 找标签
        let myPic = document.getElementById("myPic");
        let up = document.getElementById("up");
        let down = document.getElementById("down");
        // 2. 事件处理函数
        let  nextFun = function( event ){
            i++;
            if(i===pics.length){
                i=0;
            }
            myPic.src=pics[i];
        };
        let preFun= function(event){
            i--;
            if(i<0){
                i=pics.length-1;
            }
            myPic.src=pics[i];
        };
        // 3. 添加事件监听
        up.addEventListener("click", nextFun );
        down.addEventListener("click", preFun );
    }
    

    实现效果:
    在这里插入图片描述

    展开全文
  • js - 验证码点击图片换验证码

    千次阅读 2015-03-13 11:09:00
    由于直接设置src为/commons/validator.html由于缓存问题会造成图片不更换,所以需要加一个参数,让每次请求都不一样,只有加入时间参数了,这样每次刷新都是新的,就不存在缓存不更新图片问题了 ---(? 号一定加在' ...
  • JQuery实现点击图片更换图片

    万次阅读 2015-06-24 16:19:49
    项目中上传图片功能完成后,运营同事说需要有更换图片的功能,便于图片排版,好吧,不得不继续做,之前做图片上传是用的ajaxfileupload.js插件,这里就不再赘述了,实现图片更换的原理是给图片加链接,点击图片触发...
  • 点击切换一组图片,淘宝类似的一组javascript效果,代码简洁易懂
  • js点击图片更换头像,input file

    千次阅读 2017-10-24 14:23:11
    "../../jquery-1.9.1.min.js" > script > < script > $ ( "#camera" ). change ( function ( e ) { for ( var i = 0 ; i e . target . files . length ; i ++ ) { var file = e . target . files...
  • 3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来, 4.当图片隐藏的时候,图片不可变换 这就是要求,下面来看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8">...
  • js+css鼠标点击时图片放大再次点击时返回原位置。 首次发资源,希望各位多多支持,谢谢
  • 主要介绍了JavaScript实现点击出现图片并统计点击次数功能,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
  • javascript 实现点击超链接变换图片

    热门讨论 2011-08-10 10:39:32
    javascript 实现点击超链接变换图片 javascript 实现点击超链接变换图片
  • javascript实现点击网页图片,然后放大图片的效果
  • 主要介绍了基于javascript代码实现通过点击图片显示原图片的相关资料,需要的朋友可以参考下
  • js网格图片相册代码是一款可以点击换图,随机生成喵星人图,点击预览原图效果等。
  • 看到别人输入密码的时候 旁边有个小眼睛,点击后就可以把密码显示出来了,再点击又隐藏了,所以今天自己也简单的做一下.发现还是很简单就完成这个案例了. ...小眼睛是两个小图片可以成自己喜欢的.
  • 本文通过实例代码给大家介绍了通过js实现点击循环切换图片效果,需要的朋友参考下
  • js只显示一个(按钮或图片),点击隐藏旧的替换新的
  • js点击切换图片

    千次阅读 2019-06-14 20:16:14
    <script src="js.js" type="text/javascript" charset="utf-8"> <script type="text/javascript"> var content = document.getElementsByClassName('content')[0]; var imgContent = document....
  • js图片点击左右滑动

    热门讨论 2013-05-28 15:40:29
    简单、实用的javascript图片点击左右滑动
  • js特效点击图片出现

    2012-05-29 15:59:02
    javascript制作的,当鼠标点击标题,图片将会缓慢显示
  • 图片点击全屏显示JS代码
  • JS鼠标点击图片放大查看是一款基于javascript库实现的鼠标点击全屏查看图片特效。
  • 图片滚动+图片切换+鼠标点击切换图片效果JS代码实例,可执行看效果,个人收藏,供参考,javascript代码
  • js网格图片相册代码是一款可以点击换图,随机生成喵星人图,点击预览原图效果等。
  • JS鼠标点击图片放大查看是一款基于javascript库实现的鼠标点击全屏查看图片特效。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 235,982
精华内容 94,392
关键字:

js点击时换图片