HTML5的可吸附悬拖动浮球

html5悬浮球效果

自己想做一个自己的网站,觉得自适应的效果会好一点,但是放到手机端的话,菜单显示是个问题.所以自己试着写了一个悬浮球菜单的效果. 好了,上代码. 这里有四个文件要用: jqurey.js//因为基于jq做的.所以这里要引用js文件.我引用的是jquery-1.8.2.js PublicJs.js 主要是判断是否是手机端,来确定是使用点击或触摸事件用的 var PublicJs = {}; PublicJs.IsPhone = function () {//判断是否是手机浏览器 try { if (

html5 canvas实现梦幻的3D刺猬球

今天要为大家带来一款html5 canvas实现的梦幻的3D刺猬球.页面非常梦幻.效果图如下: 在线预览源码下载 html代码: <div> <canvas width="1366" height="62" style="width: 1366px; height: 62px;"> </canvas> </div> js代码: var SCREEN_WIDTH = window.innerWi

HTML5新特性--svg-echarts(重点)-拖动API-WebWorker

一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " stroke="" stroke-width=""> </polyline> #points 一组坐标点 #渐变特效对象:一种特效样式(从一种颜色慢慢过滤另一种颜色效果) #渐变特效对象:(1)创建渐变对象 <defs> (2)在指定图形应用

twaver html5 如何设置节点不可拖动

解决思路: 1.创建一个不可移动的图层 : layer 2.设置不可拖动的节点node 的图层为 layer 见代码: var box = new twaver.ElementBox(); var network = new twaver.vector.Network(box); function init() { initNetwork(); initLayer(); } function initNetwork() { var view = network.getView(); docu

微信网页悬浮窗交互效果的web实现

一.微信的悬浮窗交互效果微信更新后,发现多了个悬浮窗功能.公众号阅读,网页浏览回退后默认会出现.再点击,可以回到刚才阅读的地方.于是,再也不会遇到回复老婆的信息,再切换回来重新找刚才阅读东西的麻烦了.我个人觉得是很有用的一个功能. 其交互效果,也被不少人称赞. 例如,窗口会收缩到悬浮按钮中,悬浮按钮可以拖到右下角取消浮窗. 这些交互效果呢,是要web前端技术也是可以实现. 这不,我就试了下,写demo加调试1个小时就搞定了. 您可以狠狠地点击这里:微信网页悬浮窗交互demo 或者扫这个码: 交

juqery 拖拽元素

转自 http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html 因为怕博主删除博客,所以复制过来! JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量的第三方插件可以丰富JQuery UI的功能.JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(sou

JQuery UI的拖拽功能

JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量的第三方插件可以丰富JQuery UI的功能. JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理首先要明确几个概念. ource:拖拽源,要拖动的元素. taerge

JQuery UI的拖拽功能实现方法小结

JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理首先要明确几个概念. ource:拖拽源,要拖动的元素. taerget:拖放目标,能够放入source的容器. 拖拽的动作分解如下: 1. drag start:在拖拽源(source)上按下鼠标并开始移动 2. drag move: 移动过程中 3. drag enter: 移动进入目标(target)容器 4.

FC红白机游戏列表（维基百科）

1055个fc游戏列表日文名中文译名英文版名发行日期发行商ドンキーコング大金刚 Donkey Kong 1983年7月15日任天堂ドンキーコングJR. 大金刚Jr. Donkey Kong Jr. 1983年7月15日任天堂ポパイ大力水手 Popeye 1983年7月15日任天堂五目ならべ連珠五子连珠 Gomoku Narabe Renju 1983年8月27日任天堂麻雀麻将 Mahjong 1983年8月27日任天堂マリオブラザーズ马里奥兄弟/水管马

Android中GridView拖拽的效果【android进化三十六】

最近看到联想,摩托罗拉等,手机launcher中有个效果,进入mainmenu后,里面的应用程序的图标可以拖来拖去,所以我也参照网上给的代码,写了一个例子.还是很有趣的,实现的流畅度没有人家的那么好,我只是模仿这种效果,我写的这个拖拽是两个图标之间进行交换,所以,当从一行的某个位置,换到下一行的另一列的时候,发现有好几个图标都改变位置了,因为是相邻两个交换位置,所以每经过相邻的图标的时候都改变位置.先弄个雏形,以后再更新优化. 转载请标明出处:http://blog.csdn.net/

Android中GridView拖拽的效果

最近看到联想,摩托罗拉等,手机launcher中有个效果,进入mainmenu后,里面的应用程序的图标可以拖来拖去,所以我也参照网上给的代码,写了一个例子.还是很有趣的,实现的流畅度没有人家的那么好,我只是模仿这种效果,我写的这个拖拽是两个图标之间进行交换,所以,当从一行的某个位置,换到下一行的另一列的时候,发现有好几个图标都改变位置了,因为是相邻两个交换位置,所以每经过相邻的图标的时候都改变位置.先弄个雏形,以后再更新优化. 转载请标明出处:http://blog.csdn.net/wd

抄360于Launcher浮动窗口的屏幕显示内存使用情况(改进版)

MainActivity例如下列: package cc.cc; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.app.Activity; import android.content.Context; import android.content.Intent; /

电器ERP行业案例——环力科技

环力科技ERP案例企业简介 [规模] 环力公司始建于1992年,是一家专业生产电子压力控制器.水泵压力控制器.气泵压力控制器.电泵浮球控制器.全自动水泵及其它配套产品研究.开发.生产.销售为一体的专业企业.旗下拥有温岭市环力电器有限公司和江苏环力科技发展有限公司两家公司.其中成立于1992年的温岭环力电器有限公司,位于美丽的滨海城市浙江省温岭市:江苏环力科技发展有限公司位于环境优越,交通便捷,经济发达,历史悠久的苏州市,建于2006年7月,总投资5000万元人民币,占地面积约27000平方米.

File API文件操作之FileReader二

上一篇说了FileAPI中FileReader的readAsText,这里继续上文,说说另外一个API readAsDataURL. 这个接口是将File或者Blob读成base64格式的字符串,然后直接挂在HTML5的元素上,例如img就可以直接使用. 实际用途可以是图片预览和图片剪裁,这里我将用来实现图片剪裁. 思路: 1. file api的FileReader实现本地图片预览 2. 用web api的拖拽功能来实现剪裁效果: 那么话不多说: html代码: <html> <he

重新发现MATLAB

现场编辑创建不仅捕获代码的脚本 - 它们讲述了可以与他人共享的故事.自动化的上下文提示可让您在编程时快速移动,并将结果和可视化与代码一起显示. 学到更多访问MATLAB实时脚本库 App Designer App Designer使您无需成为专业软件开发人员即可创建专业应用程序.拖放可视组件以布置应用程序的设计,并使用集成编辑器快速编写应用程序的行为.您可以通过MATLAB Compiler创建独立桌面或Web应用程序来共享您的应用程序. 学到更多数据分析你有数据

jquery ui draggable,droppable 学习总结

刚接触的时候,分不清draggable和droppable的区别,瞎弄了一会,其实很简单,draggable就是“拖”的功能,droppable就是“放”的功能. draggable()是被拖动的元素而droppable()是盛放被拖动元素的容器原文地址:jquery ui(二)draggable,droppable 学习总结一.先上一个简单例子 1.代码 <script src="http://code.jquery.com/jquery-1.9.1.js">&l

J15W-J45W全铜截止阀厂家，J15W-J45W全铜截止阀价格 - 专题栏目 - 无极资讯网

无极资讯网首页最新资讯最新图集最新标签搜索 J15W-J45W全铜截止阀无极资讯网精心为您挑选了(J15W-J45W全铜截止阀)信息,其中包含了(J15W-J45W全铜截止阀)厂家,(J15W-J45W全铜截止阀)价格等您感兴趣的相关信息. J15W-J45W全铜截止阀系列 J15W-J45W全铜截止阀结构图-J15W-J45W全铜截止阀结构图示意(图)厂家:上海剑阀阀门有限公司价格:￥108.50/元307人已上架地区:上海 J15W-J45W全铜截止阀原理-J15W-J45

JQuery UI Draggable插件使用说明文档

JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.Draggable的元素受css: ui-draggable影响, 拖动过程中的css: ui-draggable-dragging.如果需要的不仅仅是拖, 而是一个完整的拖放功能, 请参阅JQuery UI 的Droppable插件, 该插件提供了一个draggable放的目标. 所有的回调函数(start, stop, drag等事件)接受两个参数: event: 浏览器原生的事件 ui: 一个JQuer

[Unity UGUI]ScrollRect效果大全

UGUI各种优化效果本文所实现的UGUI效果需求如下: - 支持缩放滑动效果 - 支持动态缩放循环加载 - 支持大数据固定Item复用加载 - 支持不用Mask遮罩无限循环加载 - 支持ObjectPool动态加载 - 支持无限不规则子物体动态加载 - 支持拖动并点击和拖拽 - 支持拖动并拖拽 - 支持ScrollRect拖动自动吸附功能(拖动是否超过一半自动进退) 前言要实现以上效果,我从网上搜索得到部分解决方案链接,但不是完全满足想要的效果,就自己继续改造优化和添加想要的效果,本文最后会

ZBrush快捷键与鼠标操作

ZBrush是一款3D图形绘制软件,功能十分强大,且比较复杂,除了菜单栏功能按钮,ZBrush还提供了一系列快捷键与鼠标操作,熟练掌握ZBrush快捷键与鼠标操作,可以帮助您大大节省图形创作时间.下面是快捷键与鼠标操作的具体指令及其对应的作用: 基础工具 Tools F1 笔刷 Brushes F2 笔触 Strokes F3 Alphas F4 纹理 Textures F5 材质 Materials F6 工具菜单 shift+F1 笔刷菜单 shift+F2 笔触菜单 shift+F3 A

吴裕雄--天生自然python学习笔记：python 用pygame模块检测键盘事件和鼠标事件

用户可通过键盘输入来操控游戏中角色的运动,取得键盘事件的方法有以下两种 : 常用的按键与键盘常数对应表 : 按下右箭头键,蓝色小球会向右移动:按住右箭头键不放 , 球体会快速向右移动, 若到达边界则停止移动:按左箭头键,蓝色小球会向左移动 ,到达边界则停止. import pygame pygame.init() screen = pygame.display.set_mode((640, 70)) pygame.display.set_caption("键盘事件")

HTML5的可吸附悬拖动浮球

热门专题