jQuery实现小骑车的移动

2024-04-26 12:48

本文主要是介绍jQuery实现小骑车的移动,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

html代码部分

<!DOCTYPE html>
<html><head><title>停车动画</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link href="style.css" rel="stylesheet" type="text/css"><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script type="text/javascript" src="script.js"></script></head><body><img class="car" src="http://img.mukewang.com/5343d553000107a107200701.jpg" width="350" height="341"/>    </body>
</html>

css样式布局

*{ padding:0px; margin:0px; }
body{ background:#D5DEE7; 
}.car{ position:absolute;top:0px;left:0px;}

js代码

$(document).ready(function(){$(".car").mouseover(function(){$(this).animate({top:'300px'},{duration:"300"});}); $(".car").mouseout(function(){$(this).animate({top:'0px'},{duration:"300"});});});

jQuery可以很方便的获取到html结构中的某一个元素。

$(document).ready(function(){  //表示整个文档代码结构加载完毕

$(".car").mouseover(function(){   //鼠标移入

     $(this).animate({top:"300px"},{duration:"300"});

        });

$(".car").mouseout(function(){   //鼠标移除

$(this).animate({top:"0px"},{duration:"300"});

});

});

jQuery的事件方法------》事件方法会触发匹配元素的事件,例如:$(button#demo).click(function(){   alert("okkkkkk");   });

更多事件方法介绍


animate动画

jQuery animate() 方法用于创建自定义动画。

语法:

$(selector).animate({params},speed,callback);

params:必选项,参数定义的形成动画css属性;

speed:可选,用于设定完成动画所需的时长;

callback:可选,动画完成后所执行的返回函数名称。

$("button").click(function(){

$("#div").animate({left:"200px"});

});

jQuery animate()动画操作多个属性

$("button").click(function(){

$("#div").animate({

left:'200px',

opacity:'0.5',

height:'150px',

width:'150px'

});

});


这篇关于jQuery实现小骑车的移动的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/937628

相关文章

Spring Boot配置和使用两个数据源的实现步骤

《SpringBoot配置和使用两个数据源的实现步骤》本文详解SpringBoot配置双数据源方法,包含配置文件设置、Bean创建、事务管理器配置及@Qualifier注解使用,强调主数据源标记、代... 目录Spring Boot配置和使用两个数据源技术背景实现步骤1. 配置数据源信息2. 创建数据源Be

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分

linux批量替换文件内容的实现方式

《linux批量替换文件内容的实现方式》本文总结了Linux中批量替换文件内容的几种方法,包括使用sed替换文件夹内所有文件、单个文件内容及逐行字符串,强调使用反引号和绝对路径,并分享个人经验供参考... 目录一、linux批量替换文件内容 二、替换文件内所有匹配的字符串 三、替换每一行中全部str1为st

SpringBoot集成MyBatis实现SQL拦截器的实战指南

《SpringBoot集成MyBatis实现SQL拦截器的实战指南》这篇文章主要为大家详细介绍了SpringBoot集成MyBatis实现SQL拦截器的相关知识,文中的示例代码讲解详细,有需要的小伙伴... 目录一、为什么需要SQL拦截器?二、MyBATis拦截器基础2.1 核心接口:Interceptor

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

SpringBoot集成EasyPoi实现Excel模板导出成PDF文件

《SpringBoot集成EasyPoi实现Excel模板导出成PDF文件》在日常工作中,我们经常需要将数据导出成Excel表格或PDF文件,本文将介绍如何在SpringBoot项目中集成EasyPo... 目录前言摘要简介源代码解析应用场景案例优缺点分析类代码方法介绍测试用例小结前言在日常工作中,我们经

基于Python实现简易视频剪辑工具

《基于Python实现简易视频剪辑工具》这篇文章主要为大家详细介绍了如何用Python打造一个功能完备的简易视频剪辑工具,包括视频文件导入与格式转换,基础剪辑操作,音频处理等功能,感兴趣的小伙伴可以了... 目录一、技术选型与环境搭建二、核心功能模块实现1. 视频基础操作2. 音频处理3. 特效与转场三、高

Python实现中文文本处理与分析程序的示例详解

《Python实现中文文本处理与分析程序的示例详解》在当今信息爆炸的时代,文本数据的处理与分析成为了数据科学领域的重要课题,本文将使用Python开发一款基于Python的中文文本处理与分析程序,希望... 目录一、程序概述二、主要功能解析2.1 文件操作2.2 基础分析2.3 高级分析2.4 可视化2.5

Java实现预览与打印功能详解

《Java实现预览与打印功能详解》在Java中,打印功能主要依赖java.awt.print包,该包提供了与打印相关的一些关键类,比如PrinterJob和PageFormat,它们构成... 目录Java 打印系统概述打印预览与设置使用 PageFormat 和 PrinterJob 类设置页面格式与纸张

使用Go实现文件复制的完整流程

《使用Go实现文件复制的完整流程》本案例将实现一个实用的文件操作工具:将一个文件的内容完整复制到另一个文件中,这是文件处理中的常见任务,比如配置文件备份、日志迁移、用户上传文件转存等,文中通过代码示例... 目录案例说明涉及China编程知识点示例代码代码解析示例运行练习扩展小结案例说明我们将通过标准库 os