1. 首页
  2. 作者
  3. System
CSS如何实现图片等比例缩放不变形
System
2024-08-27
所有,html5

CSS可以通过设置容器的宽度或高度，并保持图片的宽高比来实现图片等比缩放。使用 max-width 和 max-height 属性可以防止图片被拉伸变形。

以下是实现图片等比缩放的CSS代码示例：




.img-container {
  display: block;
  max-width: 100%; /* 限制图片最大宽度不超过其容器的宽度 */
  max-height: 100%; /* 限制图片最大高度不超过其容器的高度 */
  width: auto; /* 宽度自动，保持图片原始宽高比 */
  height: auto; /* 高度自动，保持图片原始宽高比 */
}

HTML中使用该样式：




<div class="img-container">
  <img src="path/to/your/image.jpg" alt="描述文字">
</div>

在这个例子中，.img-container 是一个包裹图片的容器，它将限制图片的最大宽度和高度，不超过自身的尺寸，并且保持图片原始的宽高比。当你调整 .img-container 的大小时，图片会自动调整大小以保持其等比例。

- 阅读更多 -
Jquery实战----表单制作
System
2024-08-27
所有,jquery

以下是一个使用jQuery创建简单登录表单的示例代码：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<div id="login-container">
    <form id="login-form">
        <h2>Login</h2>
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div>
            <button type="submit">Login</button>
        </div>
    </form>
</div>
 
<script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）:




#login-container {
    width: 300px;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
#login-container h2 {
    text-align: center;
}
 
#login-container div {
    margin-bottom: 20px;
}
 
#login-container label {
    display: block;
    margin-bottom: 5px;
}
 
#login-container input[type="text"], #login-container input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
 
#login-container button {
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #5cb85c;
    color: white;
    cursor: pointer;
    border-radius: 5px;
}
 
#login-container button:hover {
    background-color: #4cae4c;
}

JavaScript部分（script.js）:




$(document).ready(function() {
    $('#login-form').submit(function(e) {
        e.preventDefault(); // 阻止表单默认提交行为
 
        var username = $('#username').val();
        var password = $('#password').val();
 
        // 这里可以添加验证逻辑和AJAX请求来发送登录数据
        console.log('Login with username: ' + username);
 
        // 清空输入
        $('#username').val('');
        $('#password').val('');
    });
});

这个简单的例子展示了如何使用jQuery来创建一个登录表单，并处理表单的提交事件。在实际应用中，你需要添加验证逻辑以确保用户输入是有效的，并且可能需要使用AJAX来异步提交表单数据到服务器端进行验证和登录处理。

- 阅读更多 -
jQuery键盘事件keydown详解及示例代码
System
2024-08-27
所有,jquery

在jQuery中，keydown事件是用来监听键盘按键的按下动作的。当用户按下任何键时，会触发这个事件。

下面是一个使用keydown事件的简单示例：

HTML部分：




<input type="text" id="myInput" placeholder="在这里输入...">

jQuery部分：




$(document).ready(function(){
    $("#myInput").keydown(function(event){
        // 输出按下的键的ASCII码
        console.log("键的ASCII码：" + event.which);
        // 输出按下的键的字符
        console.log("按下的键：" + String.fromCharCode(event.which));
    });
});

在这个例子中，当用户在具有id为myInput的输入框内按下任何键时，keydown事件会被触发，并执行函数内的代码。函数通过event.which获取按下键的ASCII码，并使用String.fromCharCode将ASCII码转换为字符，然后输出到控制台。

- 阅读更多 -
前端提高篇：简单了解jQuery框架封装，最简单的前端自定义ListView下拉刷新与上拉加载
System
2024-08-27
所有,jquery



// 定义一个简单的下拉刷新函数
function pullToRefresh(listViewSelector, loadingTemplate) {
    var $listView = $(listViewSelector);
    var isLoading = false;
 
    // 模拟加载数据的函数，需要在实际应用中被重写
    function loadData() {
        // 模拟数据加载，实际应用中应该发起网络请求
        console.log('加载数据...');
        setTimeout(function() {
            // 数据加载完毕后，更新列表，移除加载提示
            $listView.append(loadingTemplate);
            isLoading = false;
        }, 1000);
    }
 
    // 监听触摸开始事件
    $listView.on('touchstart', function(e) {
        var touch = e.touches[0]; // 获取第一个触点
        var startY = touch.pageY; // 获取触点的初始Y坐标
        $listView.data('startY', startY); // 保存初始Y坐标
    });
 
    // 监听触摸移动事件
    $listView.on('touchmove', function(e) {
        if (isLoading) return; // 如果正在加载，则不再处理移动事件
        var touch = e.touches[0];
        var currentY = touch.pageY;
        var startY = $listView.data('startY');
        var distance = currentY - startY;
 
        if (distance > 0) { // 向下拉动
            e.preventDefault(); // 阻止默认的滚动行为
            // 可以在这里添加下拉过程中的视觉反馈，如改变列表的样式等
        }
    });
 
    // 监听触摸结束事件
    $listView.on('touchend', function(e) {
        var distance = $listView.data('distance');
        if (distance > 50) { // 设定一个阈值，当下拉距离超过这个值时触发加载
            if (!isLoading) {
                isLoading = true;
                loadData(); // 触发加载数据的函数
            }
        }
    });
}
 
// 使用方法：
$(document).ready(function() {
    var listViewSelector = '#myListView'; // ListView的选择器
    var loadingTemplate = '<div class="loading">加载中...</div>'; // 加载提示的HTML模板
    pullToRefresh(listViewSelector, loadingTemplate);
});

这个简易的下拉刷新函数pullToRefresh可以被用在任何需要实现下拉刷新功能的场景。函数接收ListView的选择器和加载提示的HTML模板作为参数，并监听了触摸事件来处理下拉刷新的逻辑。在实际应用中，你需要替换loadData函数以实现加载数据的逻辑，并可以添加更多的用户界面反馈来增强用户体验。

- 阅读更多 -
[CocosCreator]封装对象池
System
2024-08-27
所有,typescript

在Cocos Creator中封装一个对象池，可以通过以下步骤实现：

  1. 创建一个对象池类，包含对象数组和对象的创建与回收方法。
  2. 初始化对象池，设置对象的创建函数。
  3. 实现get方法来获取池中的对象，如果池中没有可用对象，则创建一个新的对象。
  4. 实现put方法将对象放回池中，可以进行复位处理，例如重置节点的位置和状态。

以下是一个简单的对象池封装示例：




cc.Class({
    extends: cc.Component,
    
    // 初始化对象池
    initPool: function(classConstructor, initCount) {
        this.classConstructor = classConstructor;
        this.pool = [];
        for (let i = 0; i < initCount; i++) {
            let obj = new classConstructor();
            this.pool.push(obj);
        }
    },
    
    // 获取对象
    get: function() {
        if (this.pool.length === 0) {
            return new this.classConstructor();
        }
        return this.pool.pop();
    },
    
    // 回收对象
    put: function(obj) {
        if (obj instanceof this.classConstructor) {
            // 这里可以添加复位对象状态的代码
            // obj.reset();
            this.pool.push(obj);
        }
    }
});

使用对象池时，首先需要实例化这个类，并调用initPool方法来设置对象的类型和初始化数量。使用get方法获取对象，使用put方法回收对象。




let objectPool = new ObjectPool();
objectPool.initPool(MyClass, 10); // MyClass是对象的类
 
let obj = objectPool.get();
// ... 使用obj
objectPool.put(obj); // 使用完毕后回收

这样就实现了一个简单的对象池封装，可以有效管理和复用游戏中的对象，减少频繁的实例化与销毁，提高性能。

- 阅读更多 -
vue3+ts+echarts 绘制一个射线中国地图+轮播tooltip
System
2024-08-27
所有,typescript

以下是一个简化的代码示例，展示了如何在Vue 3和TypeScript中结合ECharts绘制一个射线图的中国地图，并添加了轮播tooltip功能。




<template>
  <div ref="mapChart" style="width: 600px; height: 400px;"></div>
</template>
 
<script lang="ts">
import { defineComponent, ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
 
export default defineComponent({
  name: 'MapChart',
  setup() {
    const mapChart = ref<HTMLElement | null>(null);
    let chartInstance: echarts.ECharts | null = null;
 
    onMounted(() => {
      chartInstance = echarts.init(mapChart.value as HTMLElement);
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}',
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: 'rgba(0,0,0,0.2)',
              width: 1,
              type: 'solid'
            }
          }
        },
        geo: {
          map: 'china',
          roam: true,
          label: {
            emphasis: {
              show: true
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#323c48',
              borderColor: '#111'
            },
            emphasis: {
              areaColor: '#2a333d'
            }
          }
        },
        series: [
          {
            type: 'lines',
            coordinateSystem: 'geo',
            data: [
              {
                coords: [
                  [116.405285, 39.904989], // 起点经纬度
                  [121.472644, 31.231706]  // 终点经纬度
                ],
                name: 'Line 1',
                value: 0
              }
            ],
            lineStyle: {
              width: 1,
              opacity: 1,
              color: 'rgb(223,0,0)'
            },
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              color: 'rgb(223,0,0)',
              symbolSize: 3
            }
          }
        ]
      };
 
      chartInstance?.setOption(option);
    });
 
    watch(() => chartInstance, (newInstance) => {
      if (newInstance) {
        setInterval(() => {
          const dataLen = newInstance.getOption().series[0].data.length;
          // 假设我们有一个动态的数组来更新tooltip信息
          const tooltips = ['Info 1', 'Info 2', 'Info 3'];
          const currentTooltip = tooltips[(dataLen - 1) % tooltips.length];
 
          newInstance.setOption({
            series: [
- 阅读更多 -
Three.js使用ammo.js实现投篮游戏
System
2024-08-27
所有,typescript



import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { Ammo } from './ammo-es.js';
 
// 设置场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建物理世界
const collisionConfiguration = new Ammo.btSoftBodyRigidBodyCollisionConfiguration();
const dispatcher = new Ammo.btCollisionDispatcher(collisionConfiguration);
const broadphase = new Ammo.btDbvtBroadphase();
const solver = new Ammo.btSequentialImpulseConstraintSolver();
const softBodySolver = new Ammo.btDefaultSoftBodySolver();
const world = new Ammo.btSoftRigidDynamicsWorld(dispatcher, broadphase, solver, collisionConfiguration, softBodySolver);
world.setGravity(new Ammo.btVector3(0, -9.81, 0));
 
// 创建一个球体并添加物理属性
const sphereGeometry = new THREE.SphereGeometry(1, 20, 20);
const sphereMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
const sphereMass = 10;
const sphereShape = new Ammo.btSphereShape(1);
const sphereLocalInertia = new Ammo.btVector3(0, 0, 0);
sphereShape.calculateLocalInertia(sphereMass, sphereLocalInertia);
const sphereMotionState = new Ammo.btDefaultMotionState(
  new Ammo.btTransform(new Ammo.btQuaternion(0, 0, 0, 1), new Ammo.btVector3(0, 10, 0))
);
const sphereRigidBody = new Ammo.btRigidBody(
  new Ammo.btRigidBodyConstructionInfo(sphereMass, sphereMotionState, sphereShape, sphereLocalInertia)
);
sphereRigidBody.setRestitution(1); // 弹性
world.addRigidBody(sphereRigidBody);
 
// 创建投篮棒并添加物理属性
const cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, 2, 32);
const cylinderMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
const cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
const cylinderMass = 0.1;
const cylinderShape = new Ammo.btCylinderShape(new Ammo.btVector3(1, 1, 1));
const cylinderLocalInertia = new Ammo.btVector3(0, 0, 0);
cylinderShape.calculateLocalInertia(cylinderMass, cylinderLocalInertia);
const cylinderMotionState = new Ammo.btDefaultMotionState(
  new Ammo.btTransform(
    new Ammo.btQuaternion(0, 0, 0, 1),
    new Ammo.btVector3(5, 10, 0)
  )
);
const cylinderRigidBody = new
- 阅读更多 -
vue之--使用TypeScript
System
2024-08-27
所有,typescript

在Vue项目中使用TypeScript需要以下步骤：

  1. 确保你的项目已经支持TypeScript。如果还没有安装typescript，可以通过npm或yarn安装：

    


npm install -g typescript

  2. 在项目中安装TypeScript支持：

    


npm install --save-dev typescript

  3. 创建一个tsconfig.json文件，该文件定义了TypeScript编译选项：

    


npx tsc --init

  4. 安装vue类型定义文件和vue-class-component装饰器支持：

    


npm install --save-dev @vue/cli-plugin-typescript @vue/cli-plugin-babel
npm install --save-dev vue-class-component

  5. 修改vue项目中的<script>标签，使其可以支持TypeScript：

    


<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  // Options
});
</script>
  6. 在<script>标签中编写TypeScript代码。

以下是一个简单的Vue组件示例，使用TypeScript编写：




<template>
  <div>{{ message }}</div>
</template>
 
<script lang="ts">
import Vue from 'vue';
 
export default Vue.extend({
  data() {
    return {
      message: 'Hello, Vue with TypeScript!'
    };
  }
});
</script>
 
<style scoped>
div {
  color: blue;
}
</style>

这个组件在<template>中显示一条消息，并在<script>标签中使用TypeScript编写。当你在Vue CLI创建的项目中这样配置后，就可以使用TypeScript来编写Vue应用了。

- 阅读更多 -
DEJA_VU3D - Cesium功能集 之 106-鹰眼地图
System
2024-08-27
所有,typescript

"DEJA\_VU3D - Cesium功能集 之 106-鹰眼地图" 这个问题似乎是指在Cesium中集成3D视觉飞行的功能，或者是一个特定的地图服务。Cesium是一个用于世界级3D地图的开源库，可以用于创建交互式的Web地图。

要在Cesium中集成3D视觉飞行的功能，你可以使用Cesium的Viewer类，并添加一个实体（Entity），该实体可以是一个模拟的飞机或其他飞行物，然后通过设置实体的属性，比如位置、速度、方向等，来模拟飞行。

下面是一个简单的示例代码，展示如何在Cesium中添加一个飞行的实体：




// 首先，确保你已经在HTML中引入了Cesium.js库
 
// 创建Cesium Viewer实例
const viewer = new Cesium.Viewer('cesiumContainer');
 
// 定义飞行路线（这里只是一个简单的路线，实际应用中可能需要更复杂的路线）
const property = new Cesium.SampledPositionProperty();
property.addSample(Cesium.JulianDate.now(), Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883));
property.addSample(Cesium.JulianDate.addSeconds(Cesium.JulianDate.now(), 3600, new Cesium.JulianDate()), Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883));
 
// 创建飞行的实体
const entity = viewer.entities.add({
    position: property,
    model: {
        uri: 'path/to/your/model/file.gltf', // 飞行模型的路径
        minimumPixelSize: 128,
        maximumScale: 20000
    },
    path: {
        resolution: 1,
        material: new Cesium.PolylineGlowMaterialProperty({
            color: Cesium.Color.WHITE,
            power: 0.15,
            threshold: 0.5
        }),
        width: 10
    }
});
 
// 如果需要，可以添加更多的属性来模拟飞行，例如速度、旋转等

在这个例子中，我们创建了一个实体，并给它设置了一个路径，路径将会显示为一个发光的蓝色线条跟随实体。实体的模型是一个从.gltf文件中加载的模型，这个模型应该是一个飞机或者其他可以飞行的模型。

请注意，这只是一个简化的示例，实际的应用可能需要更复杂的代码来处理动画、路径计算、用户交互等。此外，确保你有适当的飞行模型的权限和访问路径，以及适当的Cesium.js库和WebGL支持。

- 阅读更多 -
vue el-table 单机行选中高亮并获取行数据，再次单击取消行选中
System
2024-08-27
所有,typescript

在Vue中使用Element UI的<el-table>组件时，可以通过highlight-current-row属性来启用行高亮，并且使用@current-change事件来获取行数据。下面是一个简单的例子：




<template>
  <el-table
    :data="tableData"
    highlight-current-row
    @current-change="handleCurrentChange"
  >
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '赵小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '孙小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    };
  },
  methods: {
    handleCurrentChange(val) {
      if (val) {
        console.log('选中的行数据:', val);
      } else {
        console.log('取消选中');
      }
    }
  }
};
</script>

在这个例子中，highlight-current-row属性使得当前选中的行有高亮效果。@current-change事件在选中的行数据发生变化时触发，并且会将新选中的行数据作为参数传递给handleCurrentChange方法。如果用户取消选中，则传递给方法的参数为null。

- 阅读更多 -
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号