qq_39105121
Maylor
2017-06-27 09:51
采纳率: 100%
浏览 1.5k

jquery一张图片怎样实现鼠标滑到不同位置显示另一种样式和实现功能

比如鼠标滑到绿色部分,就显示带勾的那个,并将背景全部换成绿色的,急求图片说明图片说明图片说明图片

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • github_38542747
    澹台云夜 2017-06-27 10:39
    已采纳

    css部分,没怎么弄

    <style>
            #container{
                width: 100%;
                height: 1000px;
            }
            .bg{
                width: 50px;
                height: 50px;
                float: left;
            }
            .bgC{
                width: 50px;
                height: 50px;
                float: left;
                display: none;
            }
        </style>
    
    

    主要核心是把当前的style给container

    <div id="container">
            <div class="bgChanges">
                <div class="bg" style="background: blue;"></div>
                <div class="bg" style="background: green;"></div>
                <div class="bg" style="background: #B8860B;"></div>
                <div class="bg" style="background: #8EE5EE;"></div>
                <div class="bg" style="background: #CD0000;"></div>
                <div class="bg" style="background: #CD00CD;"></div>
            </div>
            <div class="bgChecked">
                <div class="bgC" style="background: blue;">√</div>
                <div class="bgC" style="background: green;">√</div>
                <div class="bgC" style="background: #B8860B;">√</div>
                <div class="bgC" style="background: #8EE5EE;">√</div>
                <div class="bgC" style="background: #CD0000;">√</div>
                <div class="bgC" style="background: #CD00CD;">√</div>
            </div>
        </div> 
    

    先吃饭

    <script>
            $(function(){
                //alert($('.bg').length);
                for(i=0;i<$('.bg').length;i++){
                    $('.bg').eq(i).on('click',function(){
                        //alert($(this).index());
                        var j = $(this).index();
                        $('.bgC').hide();
                        $('.bgC').eq(j).show();
                        $('#container').css('background',$(this).css('background'));
                    })
                }
            });
        </script>
    
    点赞 评论
  • wodewojueding
    wodewojueding 2017-06-27 10:05

    你应该用标签,将你有所有小图片的大图片,用样式按位截取放置,通过控制标签去实现你的效果,要不然的话,你通过坐标去控制岂不是很累

    点赞 评论
  • u014074697
    张大教主 2017-06-27 10:19
    • 只需要为绿色图片对象绑定一个onmouseover事件,如 <img src="" onmouseover="mouseOver(event,this)"/>
    • function mouseOver(e,obj){
    • $(obj).css('background','图片url');
    • };
    点赞 评论
  • github_37125043
    CN-cheng 2017-06-27 10:19

    利用背景定位,css就可以解决,例如:

     #green{
         background : url("1.png");/*图片地址*/
        background-position : 0px 0px;/*图片位置*/
     }
     #green:hover{
        background-position : 20px 20px;/*指像绿色部分改变的位置图片位置*/
     }
    
    点赞 评论

相关推荐