jquery工具箱旋转动画效果

jquery工具箱旋转动画效果

今天给大家分享一个工具箱的旋转动画效果，因为做GIS项目的时候所需要到，这是我在懒人之家看到的一个jquery鼠标点击按钮图标旋转弹出图标菜单旋转动画。
首先，可以引用插件，但因为项目所需，我便将工具箱js的代码改了一下，所以这里工具箱的js就不用插件，方便大家查看。

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery工具箱旋转动画效果</title><link href="~/Content/lanrenzhijia.css" type="text/css" rel="stylesheet" />//工具箱样式---来自懒人之家<script src="~/Content/js/jquery-1.7.2.min.js"></script>//实现jquery必要的

以上两个是必要的插件。
这里可以写需要弹出多少个的小图标，再去js设置，这里我需要到六个小图标。

// 工具箱<div class="PathInner" id="PathMenu" style="float:right;position: absolute;right: 140px;bottom: 150px;"><div class="PathMain"><div class="Tmain" onclick="PathRun();"><div class="rotate"><span class="cover"></span></div></div></div><div class="PathItem"><a class="link" href="#" title=""><span class="item" style="background-image: url('../../Content/img/Ruler.png'); " onclick="mapStadiometry()"></span></a></div><div class="PathItem"><a class="link" href="#" title=""><span class="item" style="background-image: url('../../Content/img/Measure_Crop_32px_530009_easyicon.net.png');" onclick="mapMetry()"></span></a></div><div class="PathItem"><a class="link" href="#" title=""><span class="item" style="background-image: url('../../Content/img/round.png');" onclick="YuanXing()"></span></a></div><div class="PathItem"><a class="link" href="#" title=""><span class="item" style="background-image: url('../../Content/img/moment_icn_pic.png');" onclick="JuXing()"></span></a></div><div class="PathItem"><a class="link" href="#" title=""><span class="item" style="background-image: url('../../Content/img/multilateral.png');" onclick="JiHe()"></span></a></div><div class="PathItem"><a class="link" href="#" title=""><span class="item" style="background-image: url('../../Content/img/weixingtu.PNG');" onclick="QingChu()"></span></a></div></div>

下面是js的代码：

  @*工具箱动画*@<script>var PathStatus = 0;var angle = Math.PI / ((-3.38 - 0.9) * 0.8);var mainButton = [{ 'bg': '../Content/images/bg-2x.png', 'css': '', 'cover': '../Content/images/bg-2x.png', 'html': '<span class="cover"></span>' },{ 'bg': '', 'css': '', 'cover': '', 'html': '', 'angle': -405, 'speed': 200 }];var Radius = 60;		//小图出来的半径var Offset = 40;		//小图出来后的偏移量var Path = 2;		//出现方式，1：左上，2:左下，3：右上，4：右下var OutSpeed = 80;		//小图出现的速度var OutIncr = 80;		//小图出来的旋转var OffsetSpeed = 200;		//小图出来的旋转速度var InSpeed = 480;		//小图进去的速度var InIncr = -80;		//小图进去的旋转function PathRun() {var PathMenu = $('#PathMenu');var PathItems = PathMenu.children('.PathItem').slice(0, 6);if (PathStatus == 0) {var Count = PathItems.size();PathItems.each(function (SP) {var ID = $(this).index();if (ID == 1) {var X = Radius;var Y = 0;var X1 = X + Offset;var Y1 = Y;} else if (ID == Count) {var X = 0;var Y = Radius;var X1 = X;var Y1 = Y + Offset;} else {var X = Math.cos(angle * (ID - 1)) * Radius;var Y = Math.sin(angle * (ID - 1)) * Radius;var X1 = X + Offset;var Y1 = Y + Offset;}if (Path == 2) {Y = -Y;Y1 = -Y1;} else if (Path == 3) {X = -X;Y = -Y;X1 = -X1;Y1 = -Y1;} else if (Path == 4) {X = -X;X1 = -X1;}$(this).children().children().animate({ rotate: 720 }, 600);$(this).animate({ left: X1, bottom: Y1 }, OutSpeed + SP * OutIncr, function () {$(this).animate({ left: X, bottom: Y }, OffsetSpeed);});});if (mainButton[1]['angle']) {$(PathMenu.children('.PathMain').find('.rotate')).animate({ rotate: mainButton[1]['angle'] }, mainButton[1]['speed']);}if (mainButton[1]['bg'] != '') $(this).children().css('background-image', 'url(' + mainButton[1]['bg'] + ')')if (mainButton[1]['css'] != '') $(this).children().css(mainButton[1]['css']);if (mainButton[1]['cover'] != '') $(this).children().children().css('background-image', 'url(' + mainButton[1]['cover'] + ')');if (mainButton[1]['html'] != '') $(this).children().html(mainButton[1]['html']);PathStatus = 1;} else if (PathStatus == 1) {PathItems.each(function (SP) {if (parseInt($(this).css('left')) == 0) {X1 = 0;} else {if (Path <= 2) {X1 = parseInt($(this).css('left')) + Offset;} else if (Path >= 3) {X1 = parseInt($(this).css('left')) - Offset;}}if (parseInt($(this).css('bottom')) == 0) {Y1 = 0;} else {if (Path == 3 || Path == 2) {Y1 = parseInt($(this).css('bottom')) - Offset;} else if (Path == 1 || Path == 4) {Y1 = parseInt($(this).css('bottom')) + Offset;}}$(this).children().children().animate({ rotate: 0 }, 600);$(this).animate({ left: X1, bottom: Y1 }, OffsetSpeed, function () {$(this).animate({ left: 0, bottom: 0 }, InSpeed + SP * InIncr);});});if (mainButton[1]['angle']) {$(PathMenu.children('.PathMain').find('.rotate')).animate({ rotate: 0 }, mainButton[1]['speed']);}if (mainButton[0]['bg'] != '') $(this).children().css('background-image', 'url(' + mainButton[0]['bg'] + ')')if (mainButton[0]['css'] != '') $(this).children().css(mainButton[0]['css']);if (mainButton[0]['cover'] != '') $(this).children().children().css('background-image', 'url(' + mainButton[0]['cover'] + ')');if (mainButton[0]['html'] != '') $(this).children().html(mainButton[0]['html']);PathStatus = 0;}}</script>

实现效果如下：

点击小图标弹出，再点击小图标进去隐藏。

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

.NET短信接口验证

.NET短信接口验证

.NET短信接口验证 之前遇到的一个问题&#xff0c;因为没有接触过&#xff0c;所以自己上网查阅过资料也向他人请教以及老师&#xff0c;.NET短信接口调用&#xff0c;其实&#xff0c;网上有许多免费的短信接口平台&#xff0c;但也是有限度的&#xff0c;如果发送的数量过多…
阅读更多...
密码判断

密码判断

.NET(C#)密码判断 当我们需要对密码进行判断的时候&#xff0c;可以不使用提示框模态框的方法&#xff0c;用图片显示判断密码正确与否也是比较美观的&#xff0c;也实为方便&#xff0c;这也是老师提供一种方法。 首先&#xff0c;我们需要把样式铺垫好&#xff1a; <div…
阅读更多...
身份证正则判断

身份证正则判断

身份证正则判断 今天分享的是身份证的正则判断&#xff0c;在很多时候需要到&#xff0c;所以在这里记录下来。之前做正则判断的时候&#xff0c;有一些小瑕疵&#xff0c;判断不够全面&#xff0c;正则判断&#xff0c;结构紧凑&#xff0c;全面的判断很重要&#xff0c;所以…
阅读更多...
Oracle 单行函数

Oracle 单行函数

学习Oracle 单行函数&#xff1a; 包括字符函数&#xff0c;数值函数&#xff0c;日期函数&#xff0c;转换函数&#xff0c;通用函数。 dual是一个”伪表”&#xff0c;可以用来测试函数和表达式。 1&#xff0c; 字符函数 包括大小写控制函数&#xff0c;字符控制函数。 大小…
阅读更多...
Oracle 多表查询 --笛卡尔集--左连接--右连接--1999 语法--满外连接

Oracle 多表查询 --笛卡尔集--左连接--右连接--1999 语法--满外连接

Oracle 多表查询总结 笛卡尔集现象&#xff1a; 笛卡尔集会在下面条件下产生: – 省略连接条件 – 连接条件无效 – 所有表中的所有行互相连接 为了避免笛卡尔集&#xff0c; 可以在where加入有效的连接条件。 Oracle 连接&#xff1a; 使用连接在多个表中查询数据。 在wher…
阅读更多...
Oracle 数据库-分组函数总结

Oracle 数据库-分组函数总结

Oracle 分组函数 分组函数作用于一组数据&#xff0c;并对一组函数返回一个值。 组函数类型&#xff1a; avg&#xff0c;count&#xff0c;max&#xff0c;min&#xff0c;sum 可以对数值型数据使用avg和sum函数。 select avg(salary),min(salary),max(salary),sum(salary)…
阅读更多...
在notepad++中配置java编译环境

在notepad++中配置java编译环境

在notepad中配置java编译环境 &#xff08;1&#xff09;首先&#xff0c;下载安装了Notepad&#xff0c;在菜单栏那里找到Plugin Manager&#xff0c;有一些版本是没有中文的&#xff0c;所有只有Plugin Manager&#xff0c;如果连Plugin Manager都没有&#xff0c;你则需要去…
阅读更多...
Java 基础数据类型

Java 基础数据类型

Java 基础数据类型 Java的两大数据类型&#xff1a;基本数据类型、引用类型。 Java语言提供了八种基本数据类型。六种数字类型&#xff08;四个整数型&#xff0c;两个浮点型&#xff09;&#xff0c;一种字符类型&#xff0c;还有一种布尔型。 整形&#xff1a;byte&#xf…
阅读更多...
Java获取系统时间

Java获取系统时间

Java获取系统时间 Java获取系统时间 在java 中&#xff0c;有很多种方法都可以获取到系统的当前时间&#xff0c;但也需要到对应的类&#xff0c;不同的类自然有不同的方法。这里为大家介绍获取系统当前时间的四种方式。 1&#xff0e; 通过Calendar类来获取当前时间 需要引用…
阅读更多...
Java单例模式的几种实现方式

Java单例模式的几种实现方式

Java单例模式的几种实现方式 在Java 中&#xff0c;单例类只能有一个实例&#xff0c;必须创建自己的唯一实例&#xff0c;单例类必须给所有其他对象提供这一实例。Java 单例模式有很多种实现方式&#xff0c;在这里给大家介绍单例模式其中的几种。分别是饿汉式&#xff0c;懒…
阅读更多...
Java 中抽象类与接口

Java 中抽象类与接口

Java 抽象类&#xff1a; 在面向对象的概念中&#xff0c;所有的对象都是通过类来描绘的&#xff0c;但是反过来&#xff0c;并不是所有的类都是用来描绘对象的&#xff0c;如果一个类中没有包含足够的信息来描绘一个具体的对象&#xff0c;这个类就是抽象类。 抽象类不能创建…
阅读更多...
Java 中的进程与线程的实现

Java 中的进程与线程的实现

了解进程与线程&#xff1a; 进程&#xff1a; 当一个程序进入内存运行时&#xff0c;即变成一个进程。进程是处于运行过程 中的程序&#xff0c;并且具有一定的独立功能&#xff0c;进程是系统进行资源分配和调度的一个独立单 位一般而言&#xff0c;进程包含如下三个特征&…
阅读更多...
Java集合工具类：Collections

Java集合工具类：Collections

Java提供了一个操作Set、List和Map等集合的工具类&#xff1a;Collections&#xff0c;该工具类里 提供了大量方法对集合元素进行排序、查询和修改等操作&#xff0c;还提供了对集合对象实现同步控制等方法。 一、 排序操作 如下示例&#xff1a; public class CollectionsSor…
阅读更多...
Java异常处理throws/throw

Java异常处理throws/throw

Java的异常被分为两大类&#xff1a;Checked异常和Runtime异常&#xff08;运行时异常&#xff09;。 • Runtime异常&#xff1a;所有的RuntimeException类及其子类的实例&#xff1b; • Checked异常&#xff1a;不是RuntimeException类及其子类的异常实例。 只有Java语言提供…
阅读更多...
JDBC 连接MYSQL数据库

JDBC 连接MYSQL数据库

1. 加载驱动 Class.forName("com.mysql.jdbc.Driver");com.mysql.jdbc 包名 Driver 驱动名&#xff0c;驱动包需要引入进来 mysql com.mysql.jdbc.Driveroracle oracle.jdbc.driver.OracleDriversqlserver com.microsoft.sqlserver.jdbc.SQLServerDriver …
阅读更多...
JSP 之输出九九乘法表

JSP 之输出九九乘法表

JSP是一种建立在Servlet规范提供的功能之上的动态网页技术&#xff0c;允许在网页文件中嵌入java代码和jsp标记。Java 服务器页面 (Java Server Page &#xff0c;JSP) 扩展名为 .jsp。 1&#xff0e;jsp的执行过程 Jsp文件在用户第一次请求时,会被编译成Servlet,然后由这个Se…
阅读更多...
Java 重写与重载

Java 重写与重载

方法的重写&#xff1a; 重写是子类对父类的允许访问的方法的实现过程进行重新编写, 返回值和形参都不能改变。 重写的好处在于子类可以根据需要&#xff0c;定义特定于自己的行为。 也就是说子类能够根据需要实现父类的方法。 重写方法不能抛出新的检查异常或者比被重写方法申…
阅读更多...
Java新增

Java新增

在实践项目中我们有可能需要做到新增功能&#xff0c;新增一张表&#xff0c;或是新增多张表。这里我新增的是一张表。 这里主要描述DAO层与Servlet 层&#xff1a; DAO 层&#xff1a; public class UserDaoImpl implements UserDao {private Connection con null;private P…
阅读更多...
JSP根据状态动态改变数据表格按钮

JSP根据状态动态改变数据表格按钮

有时候在开发的过程中会遇到需要根据状态ID 来动态改变数据表格的按钮&#xff0c;下面我主要讲述两种表格根据ID改变按钮的方式。 下面这种我是用EL 表达式获取表格中的值&#xff1a; <table class"table table-striped table-bordered table-hover" id"s…
阅读更多...
Java 模糊查询

Java 模糊查询

在学习Java 这门语言过程中&#xff0c;会遇到无数的知识点与错误&#xff0c;最重要的是我们能够在茫茫的代码中找到突破口&#xff0c;并用心去汲取精华。 在很多时候我们会用到模糊查询&#xff0c;这里是我在编码过程中用到的模糊查询。 JSP &#xff1a; <input value…
阅读更多...
最新文章

Copyright @ 2022~2023