精华内容
下载资源
问答
  • jQuery点击切换图片,点击背景图片切换代码。
  • 下面小编就为大家带来一篇js实现点击切换checkbox背景图片的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 点击颜色切换背景颜色和点击图片切换背景图片 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术:vis JavaScript 作者:彭嘉豪 撰写时间:2021:5:17 ...

    点击颜色切换背景颜色和点击图片切换背景图片

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    开发工具与关键技术:vis JavaScript

    作者:彭嘉豪

    撰写时间:2021:5:17

     

    点击颜色切换背景颜色

    在style里设置颜色的值之后用jq获取

     

     

     

    Jq代码

     

    Ready页面加载事件,获取所有button按钮,绑定点击事件。

    定义一个color。getComputedStyle 获取属性值。

    这样可以获取到我们所点击的按钮对应的颜色。

    最后获取到body设置背景颜色为我们获取到的颜色属性。

     

     

     

    =======================================================================================

    同上,我们可以用getComputedStyle 获取到图片属性,实现切换背景图片。

     

     

     

    设置div用来设置图片。

     

    给每个div设置背景图片。

     

    jq部分

    Ready页面加载,获取到所有的图片div,绑定click点击事件。

     

    定义url也是使用getComputedStyle 方法,获取到图片url属性。

    获取到body设置背景图片为我们获取到的url属性。

     

    展开全文
  • 目标需求:点击前收藏的心形是...分析:通过两幅图片的来回切换实现空心和实心 方法如下: function imgchange(img){ img.src = img.src.match('no') ? 'img/yes.png':'img/no.png'; } 点击事件传入this,判断...

    目标需求:点击前收藏的心形是空心的,点击后变成实心的小红心,再次点击后小红心变回空心

    分析:通过两幅图片的来回切换实现空心和实心

    方法如下:

            function imgchange(img){
                img.src = img.src.match('no') ? 'img/yes.png':'img/no.png';
            }
    

    点击事件传入this,判断当前的图片路径中是否含有"no",然后根据情况分别赋值。

    也可以判断其完整的src来实现切换:

            function imgchange(img){
                var mysrc=img.getAttribute('src');
                if(mysrc == "img/no.png")
                {
                    img.src = "img/yes.png";
                }
                else
                {
                    img.src = "img/no.png";
                }
            }
    

    注:此处的mysrc如果获取的为img.src时,可能会出现以file://开头的路径,如下图所示。 所以最好还是使用上述的两种方法。

    展开全文
  • 屏幕部分图片,点击中间的小图片,会变换背景图片 html布局代码: <ul class="box"> <li><img src="images/1.jpg" alt=""></li> <li><img src="images/2.jpg" alt=""&...

    屏幕部分图片,点击中间的小图片,会变换背景图片

     

    html布局代码:

      <ul class="box">
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
        </ul>

    css修饰代码:

    <style>
            *{
                margin: 0;
                padding: 0;
            }
            li{
                list-style: none;
            }
            body{
                background: url(images/1.jpg) no-repeat;
                background-size: 100%;
            }
            .box{
                margin: 100px auto;
                width: 410px;
            }
            .box li{
                float: left;
                margin: 0 1px;
                cursor: pointer;
            }
            .box img{
                width: 100px;   
            }
    
        </style>

    jscript部分代码:

    <script>
            var imgs = document.querySelector('.box').querySelectorAll('img');
            for (var i = 0; i < imgs.length; i++){
                imgs[i].onclick=function(){
                    document.body.style.backgroundImage='url(' +this.src+')';
                }
                // this.src 就是我们点击图片的路径   images/2.jpg
                    // console.log(this.src);
                    // 把这个路径 this.src 给body 就可以了
            }
        </script>

    全部代码:

    <!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>
            *{
                margin: 0;
                padding: 0;
            }
            li{
                list-style: none;
            }
            body{
                background: url(images/1.jpg) no-repeat;
                background-size: 100%;
            }
            .box{
                margin: 100px auto;
                width: 410px;
            }
            .box li{
                float: left;
                margin: 0 1px;
                cursor: pointer;
            }
            .box img{
                width: 100px;   
            }
    
        </style>
    </head>
    <body>
        <ul class="box">
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
        </ul>
    
        <script>
            var imgs = document.querySelector('.box').querySelectorAll('img');
            for (var i = 0; i < imgs.length; i++){
                imgs[i].onclick=function(){
                    document.body.style.backgroundImage='url(' +this.src+')';
                }
                // this.src 就是我们点击图片的路径   images/2.jpg
                    // console.log(this.src);
                    // 把这个路径 this.src 给body 就可以了
            }
        </script>
    </body>
    </html>

     

    展开全文
  • 在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现。如图,在输入用户名和密码后,用户需要选择是否记住密码图片背景为白色表示未勾选状态,背景为蓝色表示...

    在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现。如图,在输入用户名和密码后,用户需要选择是否记住密码

    3430c38cbb075fd9eced3b8ceb0c8353.png

    图片背景为白色表示未勾选状态

    3179ccdbab53948f6b0c29b4d605e130.png,背景为蓝色表示勾选状态 

    0122432e60b80dda8f617fe59f60a89b.png

    HTML源码如下:

    1

    2 记住密码3

    其中checkbox 默认为勾选状态。

    设置样式,CSS代码如下:

    1 .check{

    2 text-align:right;

    3 font-size:24px;

    4 height:50px;

    5 width:150px;

    6 background: url(img/btn_1.png) left center no-repeat;

    7 }

    8 .checkbox{

    9 width:50px;

    10 height:50px;

    11 vertical-align:middle;

    12 filter:alpha(opacity=0);

    13 -moz-opacity:0;

    14 -khtml-opacity:0;

    15 opacity:0;

    16 }

    17 label{

    18 vertical-align:middle;

    19 }

    将checkbox透明度设为0,再以背景图片来代替复选框就能得到带有勾选图片的效果。默认为记住密码的勾选状态,btn_1.png 即为背景为蓝色的勾选图片。值得注意的是,将 input 标签与 label 标签同时加上 vertical-align: middle; 属性才能实现文字与复选框垂直居中对齐。

    接下来实现单击切换checkbox背景图片的效果,1.9版本以下的 jQuery 里的 toggle() 方法可以直接实现切换:

    1 toggle(objs) {2 $(objs).each(function(){3 if ($(this).is(':hidden')) $(this).show(); else $(this).hide();4 });5 }

    然而 jQuery 1.9及以上版本已经删除了该方法,因此可以用原生 javascript 来实现,具体代码如下:

    $(document).ready(function(){var flag = 1;

    $(".check").click(function(){if(flag == 1){

    $(".check").css("background","url(img/btn_1.png) left center no-repeat");

    flag= 0;

    }else{

    $(".check").css("background","url(img/btn_2.png) left center no-repeat");

    flag= 1;

    }

    })

    });

    其中 btn_2.png 为背景为白色的未勾选图片。

    至此,点击复选框,就可实现背景图片的任意切换。

    展开全文
  • 在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现。如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态,背景为蓝色...
  • 今天来分享一下鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码。最后的效果如下:Html代码部分:图片轮播效果制作_赵一鸣随笔博客Css代码部分:*{margin:0px;padding:0px}...
  • 在项目开发中经常会有一些按钮需要点击切换背景图片的,也就是所谓的选中状态一般我们用到的切换方法如下 UIButton * but = [[UIButton alloc]initWithFrame:CGRectMake(100, 100, 100, 100)]; [but ...
  • 主要介绍了js实现网页随机切换背景图片的方法,涉及数组、随机函数与css样式的调用技巧,非常具有实用价值,需要的朋友可以参考下
  • 如图,点击不同的按钮切换不同的背景图。初来乍到没东西悬赏,求大牛们解答一下![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/1.gif)![图片说明]...
  • 如何也同时切换背景音乐? ``` var a=new Array("images/04.jpg","images/05.jpg","images/06.jpg"); var b=new Array("music/01.mp3","music/02.mp3","music/03.mp3"); var i=0; var h=0; var n=0; ...
  • JavaScript切换背景图片(并使)背景栏保持和背景色调相似 话不多说直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度换肤</title&...
  • 利用js点击事件从而做到:点击小图切换背景大图 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客: 全新的界面设计 ,...
  • js代码 [removed] function switchbox(a) { a == 1 ? $(".slide.slide3 .arrowcontainer").show() : $(".slide.slide3 .... 这是一款简单实用的jQuery点击按钮切换网页背景图片代码,背景图片跟按钮风格随便换。
  • CSS3实现的点击图片下方按钮,文字的背景会出现切换效果
  • JS背景图片切换

    2020-10-14 20:05:54
    Js实现背景图片切换(单线程问题) 实现目标: 点击页面中间的小图片,页面的背景就会变成相应的图片样式 思路 点击图片,获取到对应的图片的li元素 因为图片的名字是从1开始顺序命名的,所以可以通过获取的li元素...
  • charset=UTF-8"> 点击切换背景颜色title> <style type="text/css"> *{ margin: 0px; padding: 0px; border: 0px; } #ht{ width: 200px; height: 200px; background-color: orange; } button{ outline-style: none; ...
  • 切换背景图片

    2019-08-03 17:32:31
    <script src="common.js"> var imgObjs=my$("mask").children;//获取的所有的子元素 //循环遍历所有img,注册点击事件 for(var i=0;i;i++){ imgObjs[i].onclick=function () { document.body.style.background...
  • js实现点击图片切换背景css3

    千次阅读 2015-01-21 14:25:40
    CSS3 Full Background Slider    html,body {  height: 100%;  }  /*设置背景图片全屏显示,并且居中*/  img.bg {  min-height: 100%;  
  • 因为新的Homepage老用一个背景图片太过于单一,所以准备随机切换背景图片,动手制作一个js脚本1、准备好需要切换的图片,不要太大也不要太小,太大会加载缓慢,太小会影响质量,可以用https://tinypng.com/压缩一下2...
  • <script src="common.js"> var imgObjs=my$("mask").children;//获取的所有的子元素 //循环遍历所有img,注册点击事件 for(var i=0;i;i++){ imgObjs[i].onclick=function () { document.body.style.background...
  • 在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现。如图,在输入用户名和密码后,用户需要选择是否记住密码图片背景为白色表示未勾选状态,背景为蓝色表示...
  • 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>
  • <script> var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg", "http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_d...
  • 利用js实现鼠标切换控件背景图片

    千次阅读 2016-09-20 09:04:59
    js控制鼠标经过控件改变背景图片点击控件改变背景图片

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,378
精华内容 7,751
关键字:

js点击切换背景图片