jquery implements skin switching

In website design, skin switching is a relatively common function, which allows users to choose their favorite themes and styles, improving user experience and participation. This article will introduce how to use jQuery to implement the skin switching function of the website.

1. Preparation

Before skin switching, we need to prepare some materials, such as CSS style sheets of different themes, skin pictures, etc. Suppose we have three themes called red, green and blue. Each theme has a background image and corresponding CSS file.

2. HTML structure

We need to add a theme switching button and some HTML tags related to switching effects in the HTML page. The specific structure is as follows:

<div id="skin-menu">
    <p>更换主题：</p>
    <ul>
        <li><a href="#" class="skin-red">红色</a></li>
        <li><a href="#" class="skin-green">绿色</a></li>
        <li><a href="#" class="skin-blue">蓝色</a></li>
    </ul>
</div>

<div id="skin-preview">
    <img class="skin-red show lazy"  src="/static/imghwm/default1.png"  data-src="preview-red.png"  alt="红色主题"/>
    <img class="skin-green lazy"  src="/static/imghwm/default1.png"  data-src="preview-green.png"  alt="绿色主题"/>
    <img class="skin-blue lazy"  src="/static/imghwm/default1.png"  data-src="preview-blue.png"  alt="蓝色主题"/>
</div>

Among them, #skin-menu is used to display the switch button, and #skin-preview is used to display the preview image of the currently selected theme.

3. Implement skin switching

After the HTML structure is set, we need to use jQuery to achieve the effect of skin switching. The specific implementation process is as follows:

1. Switch CSS files

We need to use jQuery to dynamically load the CSS style sheet of the corresponding theme. The specific code is as follows:

$('.skin-red').click(function() {
    $('link[rel="stylesheet"]').attr('href', 'red.css');
});

$('.skin-green').click(function() {
    $('link[rel="stylesheet"]').attr('href', 'green.css');
});

$('.skin-blue').click(function() {
    $('link[rel="stylesheet"]').attr('href', 'blue.css');
});

2. Switch preview image

In order to better show the theme switching effect, we need to display the currently selected theme preview image on the page. When the user clicks the corresponding switch button, we need to display the preview image of the corresponding theme. The specific code is as follows:

$('.skin-red').click(function() {
    setTimeout(function(){
        $('.show').removeClass('show');
        $('.skin-red').addClass('show');
    },200)
});

$('.skin-green').click(function() {
    setTimeout(function(){
        $('.show').removeClass('show');
        $('.skin-green').addClass('show');
    },200)
});

$('.skin-blue').click(function() {
    setTimeout(function(){
        $('.show').removeClass('show');
        $('.skin-blue').addClass('show');
    },200)
});

Among them, the setTimeout function is to avoid conflicts between the display of the preview image and the loading of the CSS file.

4. Complete code

The complete skin switching code is as follows:

$(document).ready(function() {
    $('.skin-red').click(function() {
        $('link[rel="stylesheet"]').attr('href', 'red.css');
    });

    $('.skin-green').click(function() {
        $('link[rel="stylesheet"]').attr('href', 'green.css');
    });

    $('.skin-blue').click(function() {
        $('link[rel="stylesheet"]').attr('href', 'blue.css');
    });

    $('.skin-red').click(function() {
        setTimeout(function(){
            $('.show').removeClass('show');
            $('.skin-red').addClass('show');
        },200)
    });

    $('.skin-green').click(function() {
        setTimeout(function(){
            $('.show').removeClass('show');
            $('.skin-green').addClass('show');
        },200)
    });

    $('.skin-blue').click(function() {
        setTimeout(function(){
            $('.show').removeClass('show');
            $('.skin-blue').addClass('show');
        },200)
    });
});

5. Summary

Through the implementation of the above code, we can switch the skin The switching function is fully implemented. By changing CSS files and previewing images, users can choose their favorite themes, improving website participation and user experience. At the same time, using jQuery's dynamic loading function, we can freely load corresponding resource files as needed to improve the response speed of the website.

The above is the detailed content of jquery implements skin switching. For more information, please follow other related articles on the PHP Chinese website!