jQuery/Vue mouse move in and out effect

不言

Release： 2018-07-09 15:04:14

Original

2964 people have browsed it

This article mainly introduces the jQuery/Vue mouse movement in and out effect, which has certain reference value. Now I share it with you. Friends in need can refer to it

Implementation ideas

1. Position the direction of the element according to the position of the mouse
2. Dynamically set the mask layer style according to the direction
3. Set animation to move the mask layer

jQuery version

jQuery plug-in can be extended through the $.fn.extend method.

html


    
        
            mouse hover
        
    

    
        
            mouse hover
        
    

    
        
            mouse hover
        
    

    
        
            mouse hover
        
    

    
        
            mouse hover
        
    
    
        
            mouse hover

Copy after login

css

.container {
    width: 600px;
    margin: auto;
    margin-top: 100px;
}

.content {
    float: left;
    position: relative;
    height: 150px;
    width: 150px;
    margin: 20px;
    overflow: hidden;
    background: #ccc;
}

.content .shade {
    position: absolute;
    top: 0;
    display: none;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
}

Copy after login

js

Copy after login

Vue version

General Vue component implementation determines the position of the mouse within an element. Use slots to display the contents of the mask layer.

html


        
                mouse hover
        
        
                mouse hover
        
        
                mouse hover
        
        
                mouse hover
        
        
                mouse hover
        
        
                mouse hover

Copy after login

css

Copy after login

js

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s study. More related content Please pay attention to PHP Chinese website!

Related recommendations:

Method of converting JS string to number

Implementation of Vue dynamic routing (background transfer routing, The front end gets it and generates the sidebar)

The above is the detailed content of jQuery/Vue mouse move in and out effect. For more information, please follow other related articles on the PHP Chinese website!