SliderJS (Hongmeng Demo)

---

Features

Realize the function: use the slider to control the speed and size of the windmill.
Components: image, text, slider.
The effect is as follows:

---

Basic composition of the page

According to the style of JS, pages, styles, and data are divided into three pages.

• index.css
• index.hml
• index.js

The page is divided into upper and lower parts, Previewer shows the effect

the code

index.hml

Page structure: html file

<div class="container">
    <div class='image-block'>
        <image id="windmill"
               src="{
     
     { imageUrl }}"
               style="animation-duration : { 
        { 
         animationDuration }}; transform : scale({ 
        { 
         imageScale }});">
        </image>
    </div>
    <div class='slider-block'>
        <text font-size="30fp">
            速度：{
   
   { speed }}
        </text>
        <slider class="slider"
                min="1"
                max="10"
                value="{
     
     { speed }}"
                onchange="changeSpeed">
        </slider>
        <text>
            缩放比例：{
   
   { imageScale }}
        </text>
        <slider class="slider"
                min="0.5"
                max="2.5"
                step="0.1"
                value="{
     
     { imageScale }}"
                onchange="changeScale">
        </slider>
    </div>
</div>

index.css

Page style: css file

.container {
    
    
    flex-direction: column;
}

.image-block {
    
    
    width: 100%;
    height: 50%;
    justify-content: center;
    align-items: center;
}

.slider-block {
    
    
    width: 100%;
    height: 50%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#windmill {
    
    
    width: 200px;
    height: 200px;
    animation-name: GO;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes GO {
    
    
    from {
    
    
        transform: rotate(0deg);
    }

    to {
    
    
        transform: rotate(360deg);
    }
}

index.js

Page data and events: js files

export default {
    
    
    data: {
    
    
        imageUrl: "/common/images/windmill.png",
        animationDuration: '5000ms',
        imageScale: 1,
        speed: 5
    },
    changeSpeed(e) {
    
    
        if (e.mode === 'end' || e.mode === 'click') {
    
    
            this.speed = e.value
            const animationDurationNum = 10000 - e.value * 999
            this.animationDuration = animationDurationNum + 'ms'
        }
    },
    changeScale(e) {
    
    
        if (e.mode === 'end' || e.mode === 'click') {
    
    
            this.imageScale = e.value
        }
    }
}

PS

imageUrl: "/common/images/windmill.png"

This folder for storing pictures is built by yourself and can be customized.