鼠标点击更换背景图片

最新推荐文章于 2023-02-18 14:57:17 发布
最新推荐文章于 2023-02-18 14:57:17 发布
阅读量2.3k 收藏 4
点赞数
文章标签： c# xhtml python
原文链接：http://www.cnblogs.com/shanlu0000/p/11260800.html
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }
        body{
            background:url(8.jpg)  top center;
        }
        div{
            width:100%;
            height:150px;
            background-color: pink;
            text-align:center;
            padding-top:50px;
        }
        div img{
            cursor:pointer;

        }



    </style>

    <script>
        window.οnlοad=function()
        {
            var p1=document.getElementById("p1");
            p1.οnclick=function(){
            document.body.style.backgroundImage="url(images/3.jpg)";
             }
            var p2=document.getElementById("p2");
            p2.οnclick=function(){
                document.body.style.backgroundImage="url(images/4.jpg)";
            }
            var p3=document.getElementById("p3");
            p3.οnclick=function(){
                document.body.style.backgroundImage="url(images/5.jpg)";
            }
        }
    </script>

</head>
<body>
    <div>
        <img src="3.jpg" alt=""   width="150px"  id="p1"/>
        <img src="4.jpg" alt=""   width="150px"  id="p2"/>
        <img src="5.jpg" alt=""   width="150px"  id="p3"/>
    </div>
</body>
</html>

　　每张图片一点击，整个文档的背景图片就会更换为所点击的图片

　　注意，获取body元素 ： document.body

转载于:https://www.cnblogs.com/shanlu0000/p/11260800.html

a63438840
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript点击按钮切换图片实例
猿码互联
05-16 961
属性来切换图片，方法二通过切换图片元素的 CSS 类来改变图片的样式。你可以根据自己的需求选择适合的方法来实现切换图片的效果。有多种方法可以使用 JavaScript 点击按钮切换图片。方法二：通过切换 CSS 类来改变图片的样式，使用多张图片的背景图来实现切换效果。方法一：使用一个数组保存多张图片的源文件，通过改变图片元素的。方法一通过改变图片元素的。在这两种方法中，我们通过点击按钮调用。函数被调用，并检查当前图片的源文件是。来改变图片的源文件。在这个示例中，我们使用。，然后进行相应的切换。
jQuery鼠标点击切换背景图片代码.zip
11-22
本资源"jQuery鼠标点击切换背景图片代码.zip"显然是一个使用jQuery实现的简单功能，即当用户点击某个元素时，页面背景图片会进行切换。这个功能在网页设计中常用于创建交互性更强的用户体验。 首先，我们来了解一下...
html+js实现切换图片（点击按钮切换）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
07-02 1万+
效果图 实现点击按钮切换图片的效果 具体代码 <!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-sca..
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
未休的博客
02-18 3万+
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
纯CSS实现图片自动切换，鼠标点击切换相结合
smily_forever的博客
07-06 7248
纯CSS实现图片自动切换，鼠标点击切换相结合 图片自动切换实现原理：使用一个div并设置溢出隐藏来只显示一次一张图片，同时设置另一个div（总图片div），尺寸为所有图片横排的总尺寸宽高，作为动画顺序播放，然后使用css3动画，通过对div（总图片div）进行位移，从而达到显示不同的图片，每次偏移一个图片的宽度，即可显示下一张图片。5张图片，需要切换4次。 鼠标实现图片切换原理：通过设置每个超链接的宽度高度，并使用position定位到指定位置，编写每一个超链接的动画来分别切换相应图片的位置，使用hover
html图片重叠鼠标点击更换,html实现点击预览图切换图片方法
weixin_32122595的博客
05-30 2669
1.javascript实现的效果循环浏览所有图像，并为每个图像插入一个元素thumb-bar，将图像嵌入页面中。将onclick处理程序附加到每个内部，thumb-bar 以便在单击它们时在displayed-img 元素中显示相应的图像。将onclick处理程序附加到，以便在单击该处理程序时将变暗效果应用于完整尺寸的图像。再次单击它时，再次消除了暗化效果。2、html、css和javascri...
PHP 鼠标单击显示图片,JavaScript_js鼠标点击图片切换效果代码分享，本文实例讲述了js鼠标点击图 - phpStudy...
weixin_39894255的博客
04-12 181
js鼠标点击图片切换效果代码分享本文实例讲述了js鼠标点击图片切换效果。分享给大家供大家参考。具体如下：实现原理很简单，其实是多张图片叠加起来，点击图片后依次赋予图片一个class，使其看起来在表面而已，点击图片，可以实现图片的不断切换效果。运行效果图： -------------------查看效果------------...
jQuery实现的鼠标点击切换背景图片特效源码.zip
11-07
在这个名为"jQuery实现的鼠标点击切换背景图片特效源码.zip"的压缩包中，我们可以期待找到一个利用jQuery来实现的背景图片切换效果的代码示例。 在网页设计中，动态切换背景图片可以提升用户体验，增加视觉吸引力。...
js实现背景图片感应鼠标变化的方法
10-24
这种交互效果不仅可以应用于背景颜色的改变，也可以扩展到背景图片的切换。例如，你可以预先准备两组或更多的背景图片，然后在鼠标事件中通过设置`background-image`属性来更换图片。 请注意，上述代码中的`...
js鼠标点击图片切换效果实现代码
10-23
在本文中，我们将探讨如何使用JavaScript（JS）来实现一个鼠标点击图片切换的效果。这个示例展示了一个菜单，当用户点击不同的汽车品牌（如迈瑞宝、索纳塔8、K5），对应的下拉列表会显示汽车的相关信息，如报价、...
在html中三个图片切换,轻松搞定网页中的图片切换
weixin_34646820的博客
06-09 1万+
生活中经常看到，像新浪等很多门户网站的首页都有滚动图片的展示，如下图所示：某网站首页滚动切换图片这样不但可以减少文字的单一、乏味，而且可以直观内容，更好的吸引用户。那在我们做软件系统时，是否也可以首页中加入滚动图片呢？答案是肯定的。今天就给大家介绍三种类似的展现方式。实现方式这些滚动展现方式，主要用到了我们平常学习到的网页HTML、样式CSS和JavaScript等知识。在具体实现时，需要结合实际...
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
10-23
今天主要给大家分享一段js和css代码组合实现鼠标点击按钮图片切换，图片自动切换，点击左右按钮图片切换三种效果，代码非常简单，需要的朋友一起来学习吧
js 实现 鼠标放到图片上会显示另外一张图片
03-31
js 实现 鼠标放到图片上会显示另外一张图片! 值得下载看看!资源免费,大家分享!!
HTML鼠标点击或悬停图片轮换效果
10-08
在页面中实现鼠标点击图片轮换的效果，在左边或者下边还有图片的缩略图显示，还可以设置图片轮换的样式，像PPT中类似的效果，如果想实现鼠标悬停的效果的话，可以写一个hover样式就可以了。
JavaScript HTML图片切换
Tml的博客
04-23 2393
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片切换</title> <style type="text/css"> *{ margin:0; padding:0; } #outer{ width:500px; margin:50px auto; padding: 10px; backgroun.
点击切换图片实现
qq_44875218的博客
12-13 3215
我用的Vue+js，在html页面中实现的一个点击可以进行切换图片。实现也很简单，没学过也可以直接用。效果如下： 点击左右两边箭头就能实现 首先你需要在html中加入这句 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> 我放在了head中。 然后就可以开始搞了，代码如下： <body> <div id="mask"> <d
HTML点击图片更换图片
Ruyand的博客
06-17 6022
HTML点击图片更换图片 大体思路：双点击img图片时，跳出文件选择器，过滤掉文件或文本之类的； 只能找到：图片，选择好图片后，显示到img标签。 <body> <div style="display: none" id="upPortraitDiv"> <div> <input type="file" hidden name="portrait" id="upPortrait"><%--头像上传文本框--%> </div>
使用HTML实现图片切换/轮播
热门推荐
赵至柔的博客
03-08 8万+
1、需求分析 实现中国天气网中全国降水量预报图的切换、轮播。点击图中左下方的长方形按钮可以切换三个时段降水量的预报图，点击图中左下方的播放按钮自动轮播三张预报图。 2、代码实现 HTML &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &...
html css js焦点图轮播 鼠标点击时显示相应图片
最新发布
05-30
要实现鼠标点击时显示相应图片的焦点图轮播，可以在JS部分添加事件监听器，监听每个控制按钮的点击事件，然后根据当前点击的按钮的索引值来切换轮播项。 以下是一个示例代码： ``` const sliderItems = document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值