1. 首页
  2. 分类
  3. 前端技术
css动画效果之transform
System
2024-08-22
所有,css3

CSS的transform属性可以实现元素的2D或3D转换，常用于创建动画效果。以下是一个使用transform属性的例子，它将创建一个旋转的动画效果：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 50px;
    animation: rotate 2s infinite linear;
  }
 
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

在这个例子中，.box类定义了一个100px x 100px的红色方块，并应用了一个名为rotate的无限循环动画。@keyframes rotate定义了从0度旋转到360度的动画效果，实现了持续旋转的效果。animation属性设置了动画的持续时间、循环方式、时间函数等。

- 阅读更多 -
HTML5 移动开发框架，重磅消息
System
2024-08-22
所有,html5

HTML5 移动开发框架有很多，但是没有一个被广泛认为是“最好的”。这取决于你的具体需求和偏好。以下是一些流行的移动开发框架：

  1. jQuery Mobile：jQuery Mobile 是一个可以增强你的网页标准的 jQuery 库，用于创建适应不同移动设备的网页。它提供了一套可以在所有智能手机、平板电脑和智能电视上使用的用户界面组件。
  2. Ionic：Ionic 是一个强大的前端框架，用于构建与设备无关的应用程序。它提供了一套可以在 Android 和 iOS 上使用的高质量移动组件。
  3. Framework7：Framework7 是一个用于开发跨平台移动应用程序的开源框架，它提供了一套用于构建 iOS 和 Android 应用的 UI 组件。
  4. React Native：React Native 是一个由 Facebook 开发的开源移动应用开发框架，它使用 JavaScript 和 React 来创建应用。
  5. Xamarin：Xamarin 是一个用于构建跨平台移动应用的开源框架，它支持 iOS、Android 和 Windows Phone。
  6. Cordova / PhoneGap：Cordova / PhoneGap 是一个开源移动开发框架，它允许开发者使用 HTML、CSS 和 JavaScript 来构建应用。
  7. Flutter：Flutter 是由 Google 开发的一个用于构建跨平台移动应用的开源框架，它使用 Dart 作为编程语言。

选择合适的框架取决于你的需求，例如你的技术偏好、项目预算、时间限制和设备兼容性等等。

以下是一个简单的 jQuery Mobile 页面示例：




<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile Page</title>
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
 
<div data-role="page" id="home">
    <div data-role="header">
        <h1>jQuery Mobile Page</h1>
    </div>
    <div data-role="content">
        <p>Welcome to jQuery Mobile!</p>
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>
 
</body>
</html>

这个示例创建了一个简单的 jQuery Mobile 页面，包含头部、内容和尾部。你可以通过添加更多的 jQuery Mobile 组件来增强页面功能。

- 阅读更多 -
基于Canvas的Html5多时区动态时钟实战
System
2024-08-22
所有,html5



<!DOCTYPE html>
<html>
<head>
    <title>Multi-Timezone Clock</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }
        canvas {
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="clock" width="400" height="400"></canvas>
    <script>
        function addZero(num) {
            return num < 10 ? '0' + num : num;
        }
 
        function Clock(options) {
            this.options = options || {};
            this.options.color = this.options.color || 'black';
            this.options.radius = this.options.radius || 150;
            this.options.date = this.options.date || new Date();
            this.options.timezone = this.options.timezone || 'UTC';
            this.init();
        }
 
        Clock.prototype = {
            init: function() {
                var ctx = document.getElementById('clock').getContext('2d');
                ctx.save();
                ctx.translate(200, 200);
                this.drawFace(ctx);
                this.drawNumbers(ctx);
                this.drawTime(ctx);
                ctx.restore();
            },
            drawFace: function(ctx) {
                ctx.beginPath();
                ctx.arc(0, 0, this.options.radius, 0, 2 * Math.PI);
                ctx.fillStyle = 'white';
                ctx.fill();
                var grad = ctx.createRadialGradient(0, 0, this.options.radius * 0.95, 0, 0, this.options.radius * 1.05);
                grad.addColorStop(0, '#333');
                grad.addColorStop(0.5, 'white');
                grad.addColorStop(1, '#333');
                ctx.strokeStyle = grad;
                ctx.lineWidth = 5;
                ctx.stroke();
            },
            drawNumbers: function(ctx) {
                ctx.font = this.options.radius * 0.15 + 'px arial';
                ctx.textBaseline = 'middle';
                ctx.textAlign = 'center';
                for (var i = 1; i < 13; i++) {
                    var angle = (i - 1) * (2 * Math.PI) / 12;
                    ctx.fillText(i, this.options.radius * Math.cos(angle), this.options.radius * Math.sin(angle));
                }
            },
            drawTime: function(ctx) {
                var date = new Date();
                var timezoneOffset = date.getTimezoneOffset() * 60000; // convert
- 阅读更多 -
jQuery 实现带手柄自由调整页面大小的功能
System
2024-08-22
所有,jquery



$(function() {
    var $resizeHandles = $('<div class="ui-resizable-handle ui-resizable-se ui-corner-sw"></div>');
 
    $('.free-resize').append($resizeHandles).resizable({
        handles: {
            'se': '.ui-resizable-handle'
        },
        minWidth: 50,
        minHeight: 50
    });
});

这段代码使用jQuery UI的resizable方法来实现一个可以调整大小的元素。首先，我们创建了一个手柄的div，并将其添加到.free-resize元素中。然后，我们调用.resizable()方法，并指定handles选项，这样用户就可以使用这个手柄来调整元素的大小了。minWidth和minHeight选项确保元素不会缩小到小于指定的尺寸。

- 阅读更多 -
jQuery 事件方法大全-超全的总结
System
2024-08-22
所有,jquery

jQuery 提供了多种事件处理方法，包括 .on(), .off(), .trigger() 等。以下是一些常用的 jQuery 事件处理方法：

  1. .on(event, handler)：绑定事件处理程序。



$("#button").on("click", function() {
    alert("按钮被点击了！");
});
  1. .off(event, handler)：移除事件处理程序。



$("#button").off("click");
  1. .trigger(event, [eventData])：触发事件。



$("#button").trigger("click");
  1. .one(event, handler)：绑定一次性事件处理程序。



$("#button").one("click", function() {
    alert("按钮只会被点击一次！");
});
  1. .bind(event, handler)：（已废弃，请使用 .on()）。
  2. .unbind(event, handler)：（已废弃，请使用 .off()）。
  3. .delegate(selector, event, handler)：（已废弃，请使用 .on()）。
  4. .undelegate(selector, event, handler)：（已废弃，请使用 .off()）。
  5. .hover([over], out)：用于模拟鼠标悬停事件（鼠标指针移动到元素上面 & 移出元素）。



$("#button").hover(
    function() {
        // 鼠标指针移动到元素上面
        $(this).css("background-color", "yellow");
    }, 
    function() {
        // 鼠标指针移出元素
        $(this).css("background-color", "blue");
    }
);
  1. .focus(), .blur()：处理焦点事件。



$("#inputField").focus(function() {
    $(this).css("background-color", "yellow");
});
 
$("#inputField").blur(function() {
    $(this).css("background-color", "white");
});
  1. .change()：处理内容改变事件（如输入框内容改变）。



$("#inputField").change(function() {
    alert("输入字段的内容已改变！");
});
  1. .submit()：处理表单提交事件。



$("#myForm").submit(function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    alert("表单将不会被提交！");
});
  1. .resize(), .scroll()：处理窗口大小改变和滚动事件。



$(window).resize(function() {
    console.log("窗口大小已改变！");
});
 
$(window).scroll(function() {
    console.log("窗口滚动了！");
});
  1. .keydown(), .keyup(), .keypress()：处理键盘按键事件。



$(document).keydown(function(event) {
    console.log("按下了键：" + event.key);
});
  1. .click(), .dblclick(), .mousedown(), .mouseup(), .mousemove(), .mouseenter(), .mouseleave()：处理鼠标点击、双击、按下、抬起、移动、进入和离开事件。



$("#button").click(function() {
    alert("按钮被点击了！");
});
  1. .toggle(fn, fn)：绑定
- 阅读更多 -
【技术】基于 jquery-cxselect 实现下拉联动效果
System
2024-08-22
所有,jquery

以下是一个使用 jQuery 插件 cxSelect 实现下拉联动效果的简单示例。

首先，确保你已经引入了 jQuery 库和 cxSelect 插件的 CSS 和 JS 文件。

HTML 部分：




<!DOCTYPE html>
<html>
<head>
    <title>下拉联动示例</title>
    <link rel="stylesheet" href="path/to/jquery.cxselect.css" />
    <script src="path/to/jquery.min.js"></script>
    <script src="path/to/jquery.cxselect.js"></script>
</head>
<body>
    <select id="province"></select>
    <select id="city"></select>
 
    <script>
        // 初始化省份和城市的下拉菜单
        var provinceData = [
            {name: '省份1', value: '1'},
            {name: '省份2', value: '2'}
        ];
        var cityData = [
            {name: '城市1', value: '1-1', parent: '1'},
            {name: '城市2', value: '1-2', parent: '1'},
            {name: '城市3', value: '2-1', parent: '2'},
            {name: '城市4', value: '2-2', parent: '2'}
        ];
 
        $('#province').cxSelect({
            selects: ['province', 'city'],
            data: provinceData,
            required: true,
            jsonValue: 'value',
            jsonName: 'name',
            onChange: function(data){
                $('#city').cxSelect({
                    selects: ['city'],
                    jsonValue: 'value',
                    jsonName: 'name',
                    parents: data.value
                });
            }
        });
 
        $('#city').cxSelect({
            selects: ['city'],
            data: cityData,
            jsonValue: 'value',
            jsonName: 'name'
        });
    </script>
</body>
</html>

在这个例子中，我们定义了两个下拉菜单，分别用于选择省份和城市。我们使用 cxSelect 初始化这两个下拉菜单，并通过 onChange 事件处理函数实现当选择省份时，自动更新城市下拉菜单的选项，从而达到联动的效果。

请确保你的 provinceData 和 cityData 数据结构与你的实际数据相匹配，并且 parent 字段用于指示该城市属于哪个省份。

这个示例假设你已经拥有 jquery.cxselect.css 和 jquery.cxselect.js 文件。如果文件路径不正确，请根据实际情况修改 src 路径。

- 阅读更多 -
jQuery 实现 图片框切换【与原生 JS 对比】
System
2024-08-22
所有,jquery



// 原生JavaScript实现
document.addEventListener('DOMContentLoaded', function() {
    var currentImageIndex = 0;
    var images = document.querySelectorAll('.img-container img');
 
    function showImage(imageIndex) {
        images[currentImageIndex].classList.remove('active');
        images[imageIndex].classList.add('active');
        currentImageIndex = imageIndex;
    }
 
    document.getElementById('prev').addEventListener('click', function() {
        if (currentImageIndex > 0) {
            showImage(currentImageIndex - 1);
        }
    });
 
    document.getElementById('next').addEventListener('click', function() {
        if (currentImageIndex < images.length - 1) {
            showImage(currentImageIndex + 1);
        }
    });
 
    showImage(currentImageIndex); // 初始显示第一张图片
});

这段代码使用原生JavaScript实现了图片框的切换功能。它监听DOM加载完成后，绑定了向前和向后翻页的事件监听器，并在页面加载时显示第一张图片。

- 阅读更多 -
使用jQuery完成表格的增删改查4个功能
System
2024-08-22
所有,jquery

以下是一个简单的示例，展示了如何使用jQuery来实现对一个简单的表格进行增删改查操作。

HTML 部分:




<table id="myTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
 
<input type="text" id="idInput" placeholder="ID">
<input type="text" id="nameInput" placeholder="Name">
<input type="number" id="ageInput" placeholder="Age">
 
<button id="addBtn">Add</button>
<button id="deleteBtn">Delete</button>
<button id="editBtn">Edit</button>
<button id="searchBtn">Search</button>

jQuery 部分:




$(document).ready(function(){
  // 添加功能
  $('#addBtn').click(function(){
    var id = $('#idInput').val();
    var name = $('#nameInput').val();
    var age = $('#ageInput').val();
    $('#myTable tbody').append('<tr><td>'+id+'</td><td>'+name+'</td><td>'+age+'</td><td><button class="editBtn">Edit</button> <button class="deleteBtn">Delete</button></td></tr>');
  });
 
  // 删除功能
  $('#myTable').on('click', '.deleteBtn', function(){
    $(this).closest('tr').remove();
  });
 
  // 编辑功能
  $('#myTable').on('click', '.editBtn', function(){
    var row = $(this).closest('tr');
    var id = row.find('td:eq(0)').text();
    var name = row.find('td:eq(1)').text();
    var age = row.find('td:eq(2)').text();
    $('#idInput').val(id);
    $('#nameInput').val(name);
    $('#ageInput').val(age);
  });
 
  // 搜索功能
  $('#searchBtn').click(function(){
    var searchId = $('#idInput').val();
    $('#myTable tbody tr').filter(function(){
      $(this).toggle($(this).find('td:eq(0)').text() === searchId);
    });
  });
});

这段代码提供了基本的增删改查功能，并且使用了事件委托来处理动态添加的行的事件。在实际应用中，您可能需要添加更多的验证和错误处理，以及更复杂的逻辑来满足具体的需求。

- 阅读更多 -
jqGrid 多选 multiboxonly 与 onCellSelect
System
2024-08-22
所有,jquery

jqGrid 的 multiboxonly 和 onCellSelect 是两个不同的选项，它们的功能也不相同。

multiboxonly 选项用于设置是否仅允许通过多选框选择行。当设置为 true 时，只有多选框可用，用户不能通过点击行来选择行。默认值为 false，表示可以通过点击行来选择行，同时多选框也可用。

onCellSelect 是一个事件，在用户点击并选择了某个单元格时会触发。你可以在这个事件的处理函数中编写代码来执行你需要的操作。

以下是如何设置 multiboxonly 选项和如何使用 onCellSelect 事件的示例代码：




$("#grid_id").jqGrid({
    // ... 其他配置 ...
    multiboxonly: true, // 设置为 true 仅通过多选框选择行
    // ... 其他配置 ...
});
 
$("#grid_id").jqGrid({
    // ... 其他配置 ...
    onCellSelect: function(rowid, iCol, cellcontent, e) {
        // 单元格被选中时执行的操作
        alert("单元格内容：" + cellcontent);
    },
    // ... 其他配置 ...
});

在这个例子中，第一个代码块设置了 multiboxonly 选项为 true，这意味着用户只能通过点击多选框来选择行，而不能点击行本身。第二个代码块则是定义了 onCellSelect 事件的处理函数，当用户选择某个单元格时，会弹出一个包含单元格内容的警告框。

- 阅读更多 -
JQUERY简介与分析
System
2024-08-22
所有,jquery

jQuery是一个快速、简洁的JavaScript框架，它使得HTML文档的遍历和操作、事件处理、动画和Ajax交互等变得更加简单，并且它对不同浏览器的兼容性好，使用广泛。

简介：

jQuery是一个跨平台的JavaScript库，主要用于简化HTML文档的操作、事件处理、动画设计、Ajax交互等，并且它对不同浏览器的兼容性好。jQuery设计的宗旨是“write Less，Do More”，即提倡写更少的代码，做更多的事情。

特性：

  1. 跨平台：jQuery支持所有主流的浏览器，如Chrome，Firefox，IE，Safari和Opera。
  2. 链式调用：jQuery允许你发送一连串的方法调用，无需将它们写在一起。
  3. 多功能：jQuery能够以多种方式进行DOM操作、事件处理、动画设计、Ajax交互等。
  4. 插件扩展：jQuery有着大量的插件，可以扩展其功能。
  5. 大量选择器：jQuery提供了丰富的选择器，可以快速定位DOM元素。
  6. 出色的兼容性：jQuery支持CSS1到CSS3，并且与现代的Web标准兼容。

示例代码：




$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});

这段代码的作用是：当文档加载完成后，当按钮被点击时，所有的段落元素会被隐藏。

jQuery的核心就是"选择某个网页元素，然后对其进行某种操作"，这个机制使得jQuery变得简单易学。

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