Question

我有这段代码，我想知道是否可以通过移动滑块来更改图像的大小：

<div class="slidecontainer">
  <input type="range" min="1" max="20" value="1" class="slider" id="Slider">
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">

有人可以帮忙吗？

Answer 1

您可以向范围添加一个 eventListener，然后在那里应用您的逻辑来更改图像的尺寸。

const slider = document.getElementById('Slider');
slider.addEventListener('input', handleChange);


function handleChange(e) {
  const img = document.getElementById("Elon");
  const {value, max} = e.target;
  img.style.width = `${value*max}px`;
  img.style.height = `${value*max}px`;
}

<div class="slidecontainer">
  <input type="range" min="1" max="20" value="1" class="slider" id="Slider">
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">

Answer 2

类似于：

 public class MainActivity extends AppCompatActivity {

    private static final int REQUEST_LOCATION = 1;
    private static final int ACCESS_COARSE_LOCATION =2 ;
    private static final int ACCESS_FINE_LOCATION =3 ;
    private static final int INTERNET =4 ;
    Button btnGetLocation;
    TextView showLocation;
    LocationManager locationManager;
    String latitude, longitude;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ActivityCompat.requestPermissions( this,
                new String[] {Manifest.permission.ACCESS_FINE_LOCATION}, REQUEST_LOCATION);
        showLocation = findViewById(R.id.showLocation);
        btnGetLocation = findViewById(R.id.btnGetLocation);
       locationManager = (LocationManager)getSystemService(Context.LOCATION_SERVICE);
        btnGetLocation.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
       //  location nManager = (LocationManager)getSystemService(Context.LOCATION_SERVICE);//error come here
                if (!locationManager.isProviderEnabled(LocationManager.GPS_PROVIDER)) {
                    OnGPS();
                } else {
                    getLocation();
                }
            }
        });
    }
    private void OnGPS() {
        final AlertDialog.Builder builder = new AlertDialog.Builder(this);
        builder.setMessage("Enable GPS").setCancelable(false).setPositiveButton("Yes", new  DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                startActivity(new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS));
            }
        }).setNegativeButton("No", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                dialog.cancel();
            }
        });
        final AlertDialog alertDialog = builder.create();
        alertDialog.show();
    }

    @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, int[] grantResults) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults);
        if (requestCode == ACCESS_COARSE_LOCATION) {
            if (grantResults.length>0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                Toast.makeText(MainActivity.this, "ACCESS Permission Granted", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(MainActivity.this, "ACCESS Permission Denied", Toast.LENGTH_SHORT).show();
            }
        } else if (requestCode == ACCESS_FINE_LOCATION) {
            if (grantResults.length>0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                Toast.makeText(MainActivity.this, "ACCESS Permission Granted", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(MainActivity.this, "ACCESS Permission Denied", Toast.LENGTH_SHORT).show();
            }
        } else if (requestCode == INTERNET) {
            if (grantResults.length>0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                Toast.makeText(MainActivity.this, "INTERNET Permission Granted", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(MainActivity.this, "INTERNET  Permission Denied", Toast.LENGTH_SHORT).show();
            }
        }
    }

 private void getLocation() {
        if (ActivityCompat.checkSelfPermission(
                MainActivity.this,Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED && ActivityCompat.checkSelfPermission(
                MainActivity.this, Manifest.permission.ACCESS_COARSE_LOCATION) != PackageManager.PERMISSION_GRANTED) {
            ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.ACCESS_FINE_LOCATION}, REQUEST_LOCATION);
        } else {
            Location locationGPS = locationManager.getLastKnownLocation(LocationManager.GPS_PROVIDER);
            if (locationGPS != null) {
                double lat = locationGPS.getLatitude();
                double longi = locationGPS.getLongitude();
                latitude = String.valueOf(lat);
                longitude = String.valueOf(longi);
                showLocation.setText("Your Location: " + "\n" + "Latitude: " + latitude + "\n" + "Longitude: " + longitude);
            } else {
                Toast.makeText(this, "Unable to find location.", Toast.LENGTH_SHORT).show();
            }
        }
    }
}

注意，这只是一个草图，如果你只是复制和粘贴它可能无法工作。

Answer 3

在滑块更改时更改 img 宽度。像下面的东西

const sliderElem = document.getElementById('Slider');
const imageElem = document.getElementById('image');

function sliderChange() {
  const width = image.getAttribute('width');
  image.setAttribute("width", Number(width) + Number(sliderElem.value));

}

<div class="slidecontainer">
  <input onChange="sliderChange()" type="range" min="1" max="20" value="1" class="slider" id="Slider">
</div>
<img id="image" width="150" src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">

Answer 4

您需要为此使用一些 javascript 这是您可以运行并查看的代码。如果您想要更大的缩放比例，请根据您的选择而不是 x*10 写 20 或 30。

document.getElementById("Slider").oninput = function changeImageSize(){
         var x = document.getElementById("Slider").value;
         document.getElementById("Elon").style.height=String(x*10) + "px";
        }

<div class="slidecontainer">
        <input type="range" min="1" max="20" value="1" class="slider" id="Slider">
      </div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg" id="Elon">

如何使用滑块更改图像大小？

4 个答案: