精华内容
下载资源
问答
  • vue项目鼠标移入,图片切换 图片路径切换 UI想要鼠标移入,图片切换的效果。 html <div> <img class = "prev pointer" :src="prevImg" alt="" @click='change("prev")' @mouseenter="changeImageSrc(1,...

    vue项目鼠标移入,图片切换 图片路径切换

    UI想要鼠标移入,图片切换的效果。

    html
    <div>
        <img class = "prev pointer" :src="prevImg" 
              alt="" @click='change("prev")'
              @mouseenter="changeImageSrc(1, 'hover')" 
              @mouseleave="changeImageSrc(1, '')">
        <div class = "content> 11111 </div>
        <img class = "next pointer" :src="nextImg"
              alt="" @click='change("next")'
              @mouseenter="changeImageSrc(2, 'hover')" 
              @mouseleave="changeImageSrc(2, '')">
    </div>
    
    js
    data() {
      return {
        prevImg: '../../../static/img/halo/arrowlf.png',
        nextImg: '../../../static/img/halo/arrowri.png',
      };
    },
    methods: {
    	changeImageSrc (key, way) {
            let hoverStr = way === 'hover' ? '_h' : ''
            switch (key) {
              case 1:
                this.prevImg = require(`../../../static/img/halo/arrowlf${hoverStr}.png`)
                break
              case 2:
                this.nextImg = require(`../../../static/img/halo/arrowri${hoverStr}.png`)
                break
           }
       },
    },
    
    展开全文
  • 我设置了三个Button按钮 点击Button1切换图片点击Button2切换图片同时Button1恢复原来图片 点击Button1切换图片Button2恢复原来图片
  • listview 头部切换图片2

    热门讨论 2012-11-08 22:50:26
    listview 头部HeaderView 可以切换图片,模拟网易,新浪,百度新闻客户端效果.
  • android左右滑动切换图片

    热门讨论 2013-04-24 10:49:55
    能够实现android左右滑动切换图片效果,滑动时下方的小白点也跟着滑动
  • javaScript鼠标点击切换图片

    千次阅读 2019-10-13 16:12:33
    java Script 鼠标点击切换图片 1.首先提前准备一组图片 ; (鼠标点击开关切换图片) 切换开关图片和灯泡图片(点击开关显示开关时间) 2.图片放入body中 设置样式 (id=“div05” 接收点击和关闭的时间的输出) 3....

    java Script 鼠标点击切换图片
    1.首先提前准备一组图片 ; (鼠标点击开关切换图片)
    切换开关图片和灯泡图片(点击开关显示开关时间)
    在这里插入图片描述
    2.图片放入body中 设置样式 (id=“div05” 接收点击和关闭的时间的输出)
    在这里插入图片描述
    3.编写鼠标点击事件(直接在js中设置判断点击事件)
    1.获取图片id 设置样式为 div02.style.display = “none”; 不在显示中显示图标
    在这里插入图片描述
    2.设置点击时 每个图片的样式(display 是否显示)
    在这里插入图片描述
    4.设置点击开关时时间的显示函数(在点击开关时调用)输出在id=“div05” 中
    在这里插入图片描述
    5.显示效果和代码
    在这里插入图片描述
    演示
    在这里插入图片描述

    展开全文
  • 小程序 切换图片

    千次阅读 2020-04-30 21:38:52
    点击切换图片 <view data-flag="{{flag}}" data-num="1" class="list-menu list-menu1 {{_num==1?'active':''}}" bindtap="menuClick"> <image wx:if="{{flag}}" src="/images/my/quanbu.png"></...
    点击切换图片
    
    
    <view data-flag="{{flag}}" data-num="1" class="list-menu list-menu1 {{_num==1?'active':''}}" bindtap="menuClick">
    <image wx:if="{{flag}}" src="/images/my/quanbu.png"></image>
    <image wx:else src="/images/my/daishouhuo.png"></image>
    </view>
    <view data-flag="{{!flag}}" data-num="2" class="list-menu list-menu2 {{_num==2?'active':''}}" bindtap="menuClick">
    <image wx:if="{{flag}}" src="/images/my/daishouhuo.png"></image>
    <image wx:else src="/images/my/faifukuan.png"></image>
    </view>
    
    定义变量
    
    flag: "true”,
    
    menuClick: function (e) {
    var aaa = e.currentTarget.dataset.flag;
    var bbb = e.currentTarget.dataset.num
    console.log(bbb);
    if (bbb == 1) {
    aaa = true
    } else {
    aaa = false
    }
    
    this.setData({
    flag: aaa
    })
    },
    .list-top view {
    margin: 0rpx 20rpx;
    font-size: 30rpx;
    width: 100rpx;
    height:50rpx;
    line-height:50rpx;
    background: #ccc;
    text-align: center;
    border-radius: 10rpx;
    }
    
    .list-top view image {
    width: 100rpx;
    height:50rpx;
    }
    
    展开全文
  • //切换图片 but1.setBackgroundResource(R.drawable.qq1); 全部代码: public class MainActivity extends AppCompatActivity { int a = 1; @Override protected void onCreate(Bundle savedInstanceState) { ...

    Android 点击按钮切换图片

    效果如图:
    在这里插入图片描述
    点击后:
    在这里插入图片描述
    主要代码:

    //切换图片
    but1.setBackgroundResource(R.drawable.qq1);
    

    全部代码:

    public class MainActivity extends AppCompatActivity {
        int a = 1;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            final Button but1 = findViewById(R.id.but1);
    
            but1.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    a++;
                    if(a%2==0){
                        but1.setBackgroundResource(R.drawable.qq1);   //切换图片
                    }else{
                        but1.setBackgroundResource(R.drawable.qq2);   //切换图片
                    }
                }
            });
    
        }
    }
    
    
    展开全文
  • JavaScript实现点击切换图片

    千次阅读 2019-08-08 22:59:43
    记录一下实现点击切换图片时遇到的不是问题的问题(想笑) <script> //点击切换图片 var i=0; document.getElementById("img1").onclick=function () { var img= document.getElementById("img1"); ...
  • 鼠标经过时切换图片

    千次阅读 2019-07-19 00:22:43
    ** 鼠标悬停时切换图片 ** css部分: html部分:
  • vue导航点击切换图片

    千次阅读 2019-03-04 18:36:45
    之前发过一篇用for循环出来三个按钮的切换图片的方法。有兴趣的可以看下https://blog.csdn.net/qq_42221334/article/details/81630634,现在介绍的是未用for循环的方法,因之前别人写好的代码,功能没做出来我这里给...
  • 实现点击图片下标切换图片

    千次阅读 2015-11-12 17:31:22
    1、html文本: 点击图片下标切换图片 div> 1 2 3 4 2、CSS脚本: *{ margin:0px; padding:0px; } li { display: inline-block; width: 20px; height: 20px; margin: 0px 2px; bo
  • JS实现单击切换图片

    2021-02-06 09:52:09
    JS实现单击切换图片 前言 讲明一点,这是小编参照书上的代码写的,希望读者不要随意转载。 参考代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&...
  • WPF 切换图片动画效果Demo

    热门讨论 2010-09-28 16:54:42
    WPF 切换图片动画效果 Demo 在同一个Image控件中,改变Source属性时动画实现
  • cocos creator点击按扭键去切换另一个节点的图片,有点类似heml5中的轮播图 对于一个小白来说这一切真的都太难啦! 1.创建一个脚本。 2.在图片的节点上绑定刚刚的脚本,并... 3.保存编译之后就可以切换图片了。 ...
  • js实现点击随机切换图片

    千次阅读 2019-03-06 15:09:00
    **js实现点击随机切换图片 首先在img文件夹上放入十张图片 然后就使用Math.random函数实现随机数 实现点击之后随机切换图片(注意Math.floor是向下取整,可以取到0,所以图片的名称最好从0开始) ...
  • 想用Qt在开发板上实现滑动切换图片,以前用过C语言写过,不过现在要用Qt实现,查阅了相关网页博客,发现大多数都是点击实现图片切换或自动切换,但这不太符合开发板的应用场景,于是就记录一下滑动切换图片的开发...
  • android 点击切换图片 适合初学者,没什么好说的,很简单,不过方法我觉得挺精妙的。 1、添加图片 气死我了,选下面那个会报错 activity_main xml background是设置背景图片。 2、设置点击事件和创建Button...
  • js鼠标经过切换图片

    千次阅读 2017-08-18 16:26:42
    js鼠标经过切换图片 window.onload = function () { //获取图片 var img = document.getElementById("img"); //鼠标经过图片 img.onmouseover = function () {
  • js切换图片的闪屏问题

    千次阅读 2019-07-12 15:29:59
    切换图片闪屏是因为图片没有加载完,所以等加载后再切换图片就好了,主要语句: var img = new Image(); img.src = "xxx.jpg"; img.onload = function () { //内容... } 修改前: $('.bs1').hover(function()...
  • Android ImageView之切换图片

    千次阅读 2017-09-28 09:38:13
    Note_ChangeImage:android中ImageView切换图片,主要是ImageView的setImageBitmap和setImageDrawable方法。● setImageBitmap使用外部图片 ● setImageDrawable使用drawable资源
  • 需求:底部导航切换页面,同时切换图片。底部为公共组件 组件代码: <div class="weui-tabbar"> <a href="javascript:;" class="weui-tabbar__item " v-for="(i,index) in tabs" :key="index" :...
  • 使用Android Studio 切换图片

    千次阅读 2018-11-07 11:50:23
    由于今天老师要求我们使用Android Studio制作电子相册,但我个人还不太会了解具体的详细步骤,所以根据先前所学知识,写了个利用Android Studio 切换图片,新手上路,请多指教。 一、思维导图: 二、项目 1.创建...
  • Android studio实现左右滑动切换图片

    千次阅读 2020-05-17 17:28:42
    切换图片首先要使用到图片切换器ImageSwitcher 先了解一下ImageSwitcher 1.ImageSwitcher的重要属性: android:inAnimation:切入图片时的效果。 android:outAnimation:切出图片时的效果。  以上两个属性在XML中...
  • 我要做一个图片轮播加按钮渐变切换图片,打开自动播放渐变切换图片,点击按钮也渐变切换图片。 现在做的是根据这个链接做的,但点击按钮时不能实现前后显示图片的淡入淡出。...请知道的朋友告诉详细制作过程,我在网上...
  • JS实现点击button按钮切换图片

    万次阅读 多人点赞 2018-08-10 12:07:14
    JS实现点击button按钮切换图片 放暑假在家打算学习html/css/js制作网页,只有html/css的一些基础。实现效果如图: 这个网页很简单,是用Dreamweaver写的,但是是通过自己做的,算是对JS的一个入门案列。 最初的...
  • 显示效果都不错,可是手感就不一样了,百度最棒,网易还行,新浪就操作很不好,这里我说的是滑动切换图片.自己可以测试一下.不得不说牛叉的公司确实有哦牛叉的道理. 下面我简单的介绍下实现方法:其实就是listview...
  • 点击按钮切换图片

    千次阅读 2018-04-16 20:22:31
    点击按钮切换图片:&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script ...
  • DOM切换图片

    2018-09-10 21:45:51
    简单图片切换 完成简单的图片切换: (小白心得,大神勿喷) 在body里设置img标签,设置id,再设置两个按钮,(上一个)、(下一个) 在head里设置script标签,通过DOM来控制上下翻图片 1.先获取到两个button,...
  • android利用ImageView点击按钮切换图片

    千次阅读 2019-11-14 22:00:38
    android利用ImageView点击按钮切换图片 本文章中采用ImageView中的setDrawable方法 setImageDrawble使用drable资源 布局文件:在layout目录下的activity_main.xml下编写 导入图片:复制粘贴到drable目录下方 ...
  • 微信小程序点击图片切换图片

    万次阅读 2019-04-19 13:25:08
    实现的效果图 ...2 使用数据传递当拿到图片的时候更换图片即可. 看下代码 2中方式:xml <view class="intro"> <image catchtap='open_tap' wx:if="{{isShow}}" src="/images/icon_flashli...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,296
精华内容 12,118
关键字:

切换图片