标签 Javascript 下的文章

纯CSS制作3D动态相册【流星雨3D旋转相册】HTML+CSS+JavaScriptHTML5七夕情人节表白网页制作

2024-08-15

以下是一个简化的HTML和CSS代码示例，用于创建一个基本的3D动态相册。这个示例仅包含核心的HTML结构和CSS样式，没有包含JavaScript动画代码，因为这会使代码例子过于冗长。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D相册</title>
<style>
  /* 相册容器样式 */
  .album {
    width: 300px;
    height: 400px;
    perspective: 1000px;
    position: relative;
  }

  /* 相册页样式 */
  .page {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 1s;
  }

  /* 页面旋转动画 */
  .album:hover .page {
    transform: rotateY(180deg);
  }

  /* 第一页样式 */
  .page-1 {
    background-image: url('img_front.jpg');
  }

  /* 第二页样式 */
  .page-2 {
    background-image: url('img_back.jpg');
    transform: rotateY(180deg);
  }
</style>
</head>
<body>
<div class="album">
  <div class="page page-1"></div>
  <div class="page page-2"></div>
</div>
</body>
</html>

这个示例展示了如何使用CSS创建一个基本的3D旋转相册。当鼠标悬停在相册上时，通过给 .album:hover .page 添加 transition 属性来实现页面旋转的动画效果。这个例子没有包含JavaScript，因此动画是静态的，没有交互。如果需要实现动态的翻页效果，你需要添加JavaScript来处理鼠标事件并相应地更改页面的 transform 属性。

System

2024-08-15

所有,css

在Web前端开发中，CSS的定位机制主要用于控制元素在页面中的布局。CSS提供了三种定位机制：普通流定位、浮动定位和绝对定位。

普通流定位：元素按照其在HTML中的位置顺序依次排列，无需定位属性。
浮动定位：使用float属性，可以使元素向左或向右浮动，其他元素会围绕它排列。
绝对定位：使用position: absolute;，元素会相对于其最近的已定位的（即非static）祖先元素进行定位。如果没有，则相对于初始包含块。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 定位机制示例 */
        .static-position {
            /* 普通流定位 */
        }

        .relative-position {
            position: relative;
            top: 20px;
            left: 40px;
        }

        .absolute-position {
            position: absolute;
            top: 10px;
            right: 30px;
        }

        .float-position {
            float: right;
            margin-left: 10px;
        }

        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
    </style>
</head>
<body>

<div>
    <div class="static-position">静态定位的元素</div>
    <div class="float-position">浮动定位的元素</div>
    <div class="clearfix"></div>
</div>

<div class="relative-position">相对定位的元素</div>
<div class="absolute-position">绝对定位的元素</div>

</body>
</html>

在这个例子中，.static-position类的元素使用了普通流定位，.relative-position类的元素使用了相对定位，.absolute-position类的元素使用了绝对定位，而.float-position类的元素使用了浮动定位。使用clearfix类来清除浮动，确保非浮动容器能包含浮动元素。

- 阅读更多 -

asp.net备忘录之JS调用后台方法

System

2024-08-15

所有,ajax

在ASP.NET Web Forms应用程序中，可以使用ScriptManager控件和PageMethods类来允许JavaScript调用后端的服务器端方法。以下是如何实现的步骤和示例代码：

确保你的ASP.NET页面中包含ScriptManager控件。
将你想要从JavaScript调用的方法标记为WebMethod，并确保它是public static的，以便能够被调用。
在ScriptManager中启用页面方法的调用。
在JavaScript中，使用PageMethods调用你的服务器方法。

下面是具体的示例代码：

ASPX页面代码：

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>

<script type="text/javascript">
function callServerSideMethod() {
    PageMethods.YourServerSideMethod(onSuccess, onFailed);
}

function onSuccess(result) {
    // 处理成功的回调
    alert(result);
}

function onFailed(error) {
    // 处理错误的回调
    alert('调用失败');
}
</script>

<input type="button" value="调用服务器方法" onclick="callServerSideMethod()" />

C#后端代码：

[System.Web.Services.WebMethod]
public static string YourServerSideMethod()
{
    // 你的逻辑代码
    return "Hello from server!";
}

在这个例子中，当用户点击按钮时，JavaScript函数callServerSideMethod会被调用，它通过PageMethods调用服务器端的YourServerSideMethod方法。这个方法执行完毕后，如果成功，会调用onSuccess回调函数，并将结果显示出来；如果失败，会调用onFailed回调函数。服务器端的方法需要被标记为[System.Web.Services.WebMethod]，以便能够被PageMethods访问。

- 阅读更多 -

NodeJs使用jQuery中$Ajax

System

2024-08-15

所有,ajax

在Node.js中使用jQuery的$.ajax功能实现异步HTTP请求，你需要使用jquery和xhr2库。以下是如何安装和使用这些库的步骤：

安装jquery和xhr2：

npm install jquery xhr2

在Node.js代码中引入jquery并使用$.ajax：

const $ = require('jquery');

$.ajax({
  url: 'https://api.example.com/data',
  type: 'GET',
  dataType: 'json',
  success: function(response) {
    console.log('Success:', response);
  },
  error: function(xhr, status, error) {
    console.error('Error:', error);
  }
});

请注意，这种方式并不是官方支持的，因为jQuery主要用于浏览器环境，而xhr2库提供了XMLHttpRequest Level 2的支持。在Node.js中使用jQuery的$.ajax可能会遇到跨域请求、事件处理等浏览器特有的问题，因此，更推荐使用原生的http或https模块以及axios、request、node-fetch等第三方库进行HTTP请求。

System

2024-08-15

所有,ajax

在这个示例中，我们将使用Ajax和JSON来实现前后端数据的传输，并假设你已经有了一个基本的SSM（Spring MVC + Spring + MyBatis）框架。

后端（Spring MVC Controller）:

@Controller
public class DataController {

    @RequestMapping(value = "/getData", method = RequestMethod.GET)
    @ResponseBody
    public Map<String, Object> getData(@RequestParam("param") String param) {
        // 示例数据
        List<String> dataList = Arrays.asList("data1", "data2", "data3");
        Map<String, Object> result = new HashMap<>();
        result.put("status", "success");
        result.put("data", dataList);
        return result;
    }
}

前端（HTML + JavaScript）:

<!DOCTYPE html>
<html>
<head>
    <title>Ajax JSON Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#fetchData").click(function() {
                $.ajax({
                    url: '/getData?param=example',
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        if(response.status === "success") {
                            var dataList = response.data;
                            // 处理dataList，例如显示在页面上
                            console.log(dataList);
                        } else {
                            // 处理错误情况
                            console.error("Error fetching data");
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("An error occurred: " + status + "\nError: " + error);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="fetchData">Fetch Data</button>
</body>
</html>

在这个例子中，我们使用jQuery库来简化Ajax请求的编写。当用户点击按钮时，发起一个GET请求到后端的/getData路径，并期望返回JSON格式的数据。后端Controller处理请求，返回一个包含状态和数据的JSON对象。前端JavaScript通过Ajax成功响应后处理这些数据。

- 阅读更多 -

Turn.js - 一个优雅的3D翻书效果库

System

2024-08-15

所有,javascript

Turn.js 是一个用来创建类似翻书效果的 jQuery 插件，它可以让你创建类似 iBooks 或 Amazon Kindle 的翻页动画。

以下是一个使用 Turn.js 创建简单翻页效果的示例代码：

首先，确保你的页面中包含了 jQuery 和 Turn.js 的库：

<link rel="stylesheet" href="path/to/turn.css" />
<script src="path/to/jquery.min.js"></script>
<script src="path/to/turn.min.js"></script>

接下来，创建一个容器来包含你的翻页内容：

<div id="flipbook">
  <div class="turn-page">
    <div class="content">第一页内容</div>
  </div>
  <div class="turn-page">
    <div class="content">第二页内容</div>
  </div>
  <!-- 更多页面... -->
</div>

最后，使用 Turn.js 初始化翻页效果：

$('#flipbook').turn({
  width: 400,
  height: 300,
  autoCenter: true
});

这样就可以实现一个简单的翻页效果。你可以通过调整 width 和 height 的值来设置翻页的大小，autoCenter 属性则决定了翻页是否自动居中。

Turn.js 还支持更多高级功能，比如翻页动画、多页面、书签等。你可以查阅 Turn.js 的官方文档来了解更多详细的配置和使用方法。

- 阅读更多 -

【HTML CSS JS 蝴蝶飞舞特效绝美（附完整代码）】

System

2024-08-15

所有,javascript

以下是实现蝴蝶飞舞特效的完整HTML、CSS和JavaScript代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>蝴蝶飞舞特效</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  #butterfly {
    position: absolute;
    width: 100px;
    height: 100px;
    background: url('butterfly.png') no-repeat;
    background-size: cover;
    opacity: 0.75;
    animation: fly 5s infinite ease-in-out;
  }
  @keyframes fly {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(100px) translateY(100px);
    }
    100% {
      transform: translateX(200px) translateY(0);
    }
  }
</style>
</head>
<body>
<div id="butterfly"></div>
<script>
// JavaScript代码可以为空，因为所有动画逻辑都在CSS中定义
</script>
</body>
</html>

在这个示例中，我们定义了一个#butterfly元素，并通过CSS的@keyframes规则创建了一个飞行动画。这个飞行路径是一个三角形，通过调整transform属性的translateX和translateY值来实现。这个示例展示了如何使用CSS动画创建简单的交互效果，而无需依赖复杂的JavaScript代码。

- 阅读更多 -

JS页面之间ajax跳转传值与接受传值

System

2024-08-15

所有,ajax

在JavaScript中，如果你想通过AJAX在页面之间传递值，你可以使用XMLHttpRequest或fetch API。以下是使用fetch API的一个例子：

发送页面（发送值的页面）:

// 假设你想发送的数据是一个对象 { name: 'John', age: 30 }
const data = { name: 'John', age: 30 };

fetch('receive_page.html', {
  method: 'POST', // 使用POST方法发送数据
  headers: {
    'Content-Type': 'application/json' // 设置内容类型为JSON
  },
  body: JSON.stringify(data) // 将数据转换为JSON字符串
})
.then(response => response.text()) // 解析响应文本
.then(text => {
  // 这里你可以处理接收页面的响应
  console.log('数据已发送，服务器响应:', text);
})
.catch(error => {
  console.error('发送失败:', error);
});

接收页面（接收值的页面）:

// 确保页面加载完成后再读取数据
window.onload = function() {
  const data = new FormData(document.querySelector('form')); // 假设是一个表单提交

  // 通过FormData API，你可以获取到POST过来的数据
  const name = data.get('name');
  const age = data.get('age');

  console.log('接收到的数据:', { name, age });
};

请注意，接收页面需要在服务器端进行处理，以便能够接收到通过POST方法发送的数据。如果你使用的是服务器端语言（如PHP, Node.js等），你可以使用对应的方法来获取POST数据。

- 阅读更多 -

Mybatis存储数据将数据转为json

System

2024-08-15

所有,ajax

MyBatis 本身不提供直接将查询结果转换为 JSON 的功能。但你可以在 MyBatis 的结果映射（ResultMap）中使用 typeHandler 来自定义数据类型转换，将查询结果转为 JSON 字符串。

以下是一个简单的例子，演示如何在 MyBatis 中实现这一功能：

创建一个自定义的 TypeHandler：

import com.fasterxml.jackson.databind.ObjectMapper;
import org.apache.ibatis.type.JdbcType;
import org.apache.ibatis.type.TypeHandler;

import java.sql.CallableStatement;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class JsonTypeHandler<T> implements TypeHandler<T> {
    private static final ObjectMapper objectMapper = new ObjectMapper();
    private Class<T> type;

    public JsonTypeHandler(Class<T> type) {
        this.type = type;
    }

    @Override
    public void setParameter(PreparedStatement ps, int i, T parameter, JdbcType jdbcType) throws SQLException {
        ps.setString(i, serialize(parameter));
    }

    @Override
    public T getResult(ResultSet rs, String columnName) throws SQLException {
        return deserialize(rs.getString(columnName));
    }

    @Override
    public T getResult(ResultSet rs, int columnIndex) throws SQLException {
        return deserialize(rs.getString(columnIndex));
    }

    @Override
    public T getResult(CallableStatement cs, int columnIndex) throws SQLException {
        return deserialize(cs.getString(columnIndex));
    }

    private String serialize(T value) {
        try {
            return objectMapper.writeValueAsString(value);
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
    }

    private T deserialize(String value) {
        try {
            return value == null ? null : objectMapper.readValue(value, type);
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
    }
}

在 MyBatis 的 mapper.xml 文件中配置结果映射和自定义的 typeHandler：

<resultMap id="exampleResultMap" type="Example">
    <result property="id" column="id"/>
    <result property="data" column="data" typeHandler="com.example.JsonTypeHandler"/>
</resultMap>

在这个例子中，data 字段将被自定义的 JsonTypeHandler 处理，它会将对象序列化为 JSON 字符串，并在存储到数据库或从数据库中取出时进行反序列化。

请注意，这个例子使用了 Jackson 库来进行 JSON 的序列化和反序列化。你需要将 Jackson 库添加到项目依赖中。

这只是一个基础示例，你可能需要根据你的具体需求进行调整。例如，你可能需要为不同的数据类型提供不同的 TypeHandler 实现。

- 阅读更多 -

mockjs拦截ajax请求，生成伪数据

System

2024-08-15

所有,ajax

Mock.js 是一款轻量级的模拟数据生成器，可以用来模拟Ajax请求，返回生成的伪数据。以下是使用 Mock.js 拦截 Ajax 请求并生成伪数据的示例代码：

首先，安装 Mock.js 依赖：

npm install mockjs --save-dev

在你的 JavaScript 文件中引入 Mock 并定义数据模板：

// 引入 Mock
const Mock = require('mockjs')

// 定义数据模板
const template = {
  'list|1-10': [{
    'id|+1': 1,
    'email': '@EMAIL'
  }]
}

// 创建 Mock 服务器
Mock.mock('/api/data', template)

在你的 Ajax 请求中，使用 Mock 服务器的 URL 替代实际的后端 API：

// 假设你使用的是 jQuery 发送 Ajax 请求
$.ajax({
  url: '/api/data', // 这里使用 Mock.js 创建的 Mock 服务器 URL
  success: function(res) {
    console.log(res) // 输出伪数据
  }
})

当你发送 Ajax 请求到 /api/data 时，Mock.js 会拦截这个请求，并返回根据定义的数据模板生成的伪数据。这样你就可以在前端开发过程中不依赖后端 API 的实现，提高开发效率。

- 阅读更多 -