社区
JavaScript
帖子详情
js中如何随意拖动多个图片的位置,然后自动对齐
liuxueyongyu
2008-01-21 10:57:21
js中如何随意拖动多个图片的位置,然后自动对齐
...全文
117
1
打赏
收藏
js中如何随意拖动多个图片的位置,然后自动对齐
js中如何随意拖动多个图片的位置,然后自动对齐
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
1 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
torycatkin
2008-01-30
打赏
举报
回复
不知道你所谓的自动对齐的参照物是什么?
拖动可以用dhtml的ondrag事件 或者 用dhtml的onmousedown,onmousemove,onmouseup组合
其中用setCapture和releaseCapture绑定和释放对象配合使用
vue-draggable-resizable-gorkys:Vue 用于可调整大小和可
拖动
元素的组件并支持冲突检测、元素吸附、元素
对齐
、辅助线
VueDraggableResizable 2 新增特征:sparkles: 辅助线(新) 元素
对齐
(新) 冲突检测 吸附
对齐
默认样式优化 Q交流群:138146781 说明 说明:组件基于进行二次开发 距离上版本的修改已经过去快一年的时间了,原版组件在之前已经更新到了2.0版本。 虽然之前适配过旧版组件,但是因为2.0版本原作者对代码进行了重构,原来修改的代码照搬是不可能的了。 所以也就一直没有将冲突检测以及吸附
对齐
功能适配到2.0版本,最近正好有时间就适配一下。 功能预览 | 注意:英文版为官方原版,没有新增功能的演示。
中
文版为google翻译版本,新增功能在高级目录下可查看 新增Props handleInfo 类型: Object必需: false默认: { size: 8, offset: -5, switch: true } 当使用transform:scale()进行缩放操作时,其
中
swi
简单漂亮的
js
弹窗可自由拖拽且兼容大部分浏览器
js
弹窗想必大家都有见到过吧,如何要说可以自由拖拽,并兼容大部分浏览器的就没有几个了吧,本文的这个示例或许是大家要找的,可以参考下
artDialog非常漂亮的弹窗
JS
库
artDialog是一个精巧的web对话框组件,压缩后只有十多KB,并且不依赖其他框架。 能够自适应内容 artDialog的特殊布局结构能够原生的适应内容变化,你不必像以前一样去考虑消息内容大小,她能自己去适应内容。当然她仍然可以接受一个固定高宽的参数,她能够防止内容溢出或截断,同时也不会产生难看的滚动条,甚至能够
自动
处理文本
对齐
方式。 优雅灵活的接口 她提供了丰富的可选配置参数,同时每次调用还会返回内部控制接口,控制接口支持链式操作,这样可以通过外部代码完全掌控她。 精心设计的UI机制 artDialog采用九宫格的XHTML结构,CSS类钩子比较丰富,可以定制类似桌面软件般精致的皮肤。她支持多皮肤共存,这些皮肤的背景
图片
在页面载入时就会被缓存好,调用时几乎感觉不到延时。 细致的用户体验 她支持Esc快捷键关闭;如果对话框内容有输入控件她将支持Ctrl+Enter提交;智能给按钮添加焦点;小对话框
自动
采用黄金比例垂直居
中
;超过指定面积大小的对话框
拖动
自动
采用替身挪动;
自动
计算边界防止超出可操作范围;…… 跨浏览器兼容 兼容:IE6+、Firefox、Chrome、Safari、Opera,浏览器版本越高体验越好。并且IE6下也能支持现代浏览器的静止定位(fixed),支持覆盖下拉控件。
aui-artDialog
artDialog是一个轻巧且高度兼容的javascript对话框组件,可让你的网页交互拥有桌面软件般的用户体验。 功能: 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、自定义
位置
、
拖动
、鼠标调节窗口大小、换肤…… 优点 兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari 自适应内容: 无需预设高宽, 对话框自适应消息内容的大小 (包括按钮),并且支持消息框大小
拖动
调节 智能消息
对齐
: 如果设置了对话框宽度,文本会
自动
居
中
或者居左
对齐
容错: 如果定义的宽度高度小于内容大小不会出现错位, 智能定位: 使用自定义坐标的时候智能修正
位置
,确保其在可视范围 (适用于弹出菜单)
拖动
流畅: 不会粘住鼠标也不会拖出浏览器视口导致无法控制 轻巧:
js
压缩后不到8KB (在
js
内嵌了核心兼容布局CSS的情况下) 制订皮肤: 九宫格布局, 钩子完善,制作皮肤相当简易, 内置IE6 png 32透明和定位解决方案。 IE6无抖动静止定位: 在IE6下可实现与现代浏览器一样完美静止定位效果 IE6遮盖下拉控件支持: 支持 IE6 下覆盖下拉控件 (注:半透明皮肤不支持)
精通CSS+DIV网页样式与布局视频教材
精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址: 目录 第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4 如何编辑CSS 1.1.5 浏览器与CSS 1.2 使用CSS控制页面 1.2.1 行内样式 1.2.2 内嵌式 1.2.3 链接式 1.2.4 导入样式 1.2.5 各种方式的优先级问题 1.3 体验CSS 1.3.1 从零开始 1.3.2 加入CSS控制 1.3.3 控制
图片
1.3.4 CSS的注释 第2章 CSS的基本语法 2.1 CSS选择器 2.1.1 标记选择器 2.1.2 类别选择器 2.1.3 ID选择器 2.2 选择器声明 2.2.1 集体声明 2.2.2 选择器的嵌套 2.3 CSS的继承 2.3.1 父子关系 2.3.2 CSS继承的运用 第3章 用CSS设置丰富的文字效果 3.1 CSS文字样式 3.1.1 字体 3.1.2 文字大小 3.1.3 文字颜色 3.1.4 文字粗细 3.1.5 斜体 3.1.6 文字的下划线、顶划线和删除线 3.1.7 英文字母大小写 3.2 文字实例一:模拟Google公司Logo 3.3 文字实例二:制作页面的五彩标题 3.4 CSS段落文字 3.4.1 段落的水平
对齐
方式 3.4.2 段落的垂直
对齐
方式 3.4.3 行间距和字间距 3.4.4 首字放大 3.5 段落实例:百度搜索 第4章 用CSS设置
图片
效果 4.1
图片
样式 4.1.1
图片
边框 4.1.2
图片
缩放 4.2
图片
的
对齐
4.2.1 横向
对齐
方式 4.2.2 纵向
对齐
方式 4.3 图文混排 4.3.1 文字环绕 4.3.2 设置
图片
与文字间距 4.4 图文实例:八仙过海 第5章 用CSS设置网页
中
的背景 5.1 背景颜色 5.1.1 页面背景色 5.1.2 用背景色给页面分块 5.2 背景
图片
5.2.1 页面的背景图 5.2.2 背景图的重复 5.2.3 背景
图片
的
位置
5.2.4 固定背景
图片
5.2.5 添加
多个
背景
图片
5.2.6 背景样式综合设置 5.3 背景综合一:我的个人主页 5.4 背景综合二:古词《念奴娇·赤壁怀古》 第6章 用CSS设置表格与表单的样式 6.1 控制表格 6.1.1 表格
中
的标记 6.1.2 表格的颜色 6.1.3 表格的边框 6.2 表格实例一:隔行变色 6.3 表格实例二:鼠标经过时变色的表格 6.4 表格实例三:日历 6.5 CSS与表单 6.5.1 表单
中
的元素 6.5.2 像文字一样的按钮 6.5.3 七彩的下拉菜单 6.6 综合实例一:直接输入的Excel表格 6.7 综合实例二:模仿新浪网民调查问卷 第7章 用CSS设置页面和浏览器的元素 7.1 丰富的超链接特效 7.1.1 动态超链接 7.1.2 按钮式超链接 7.1.3 浮雕式超链接 7.2 鼠标特效 7.2.1 CSS控制鼠标箭头 7.2.2 鼠标变幻的超链接 7.3 页面滚动条 第8章 用CSS制作实用的菜单 8.1 项目列表 8.1.1 列表的符号 8.1.2
图片
符号 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一:百度导航条 8.5 菜单实例二:流行的Tab菜单 第9章 CSS滤镜的应用 9.1 滤镜概述 9.2 通道(Alpha) 9.3 模糊(Blur) 9.4 运动模糊(Motion Blur) 9.5 透明色(Chroma) 9.6 下落的阴影(Dropshadow) 9.7 翻转变换(Flip) 9.8 光晕(Glow) 9.9 灰度(Gray) 9.10 反色(Invert) 9.11 遮罩(Mask) 9.12 阴影(Shadow) 9.13 X射线(X-ray) 9.14 浮雕纹理(Emboss和Engrave) 9.15 波浪(Wave) 第2部分 CSS+DIV美化和布局篇 第10章 理解CSS定位与div布局 10.1 div标记与span标记 10.1.1 概述 10.1.2 div与span的区别 10.2 盒子模型 10.2.1 盒子模型的概念 10.2.2 border 10.2.3 padding 10.2.4 margin 10.3 元素的定位 10.3.1 float定位 10.3.2 position定位 10.3.3 z-index空间
位置
10.4 定位实例一:轻轻松松给
图片
签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.1.1 将页面用div分块 11.1.2 设计各块的
位置
11.1.3 用CSS定位 11.2 固定宽度且居
中
的版式 11.2.1 方法一 11.2.2 方法二 11.3 左
中
右版式 11.4 块的背景色问题 11.5 排版实例:电子相册 11.5.1 搭建框架 11.5.2 幻灯片模式 11.5.3 详细信息模式 11.6 div排版与传统的表格方式排版的分析 第12章 CSS+div美化与布局实战 12.1 框架搭建 12.2 实例一:蓝色经典 12.3 实例二:清明上河图 12.4 实例三:交河故城 12.5
自动
选择CSS样式 第3部分 CSS混合应用技术篇 第13章 CSS与JavaScript的综合应用 13.1 JavaScript概述 13.1.1 JavaScript简介 13.1.2 JavaScript的特点 13.1.3 JavaScript与CSS 13.2 JavaScript语法基础 13.2.1 数据类型和变量 13.2.2 表达式及运算符 13.2.3 基本语句 13.3 实例一:输入时高亮显示的Excel表格 13.4 实例二:由远到近的文字 13.5 实例三:跑马灯特效 13.6 实例四:
图片
淡入淡出 13.7 实例五:CSS实现PPT幻灯片 13.8 实例六:灯光效果 13.9 实例七:舞台灯光 13.10 实例八:探照灯 13.11 实例九:鼠标文字跟随 第14章 CSS与XML的综合运用 14.1 XML基础 14.1.1 XML的特点 14.1.2 XML与HTML 14.1.3 XML基本语法 14.2 XML链接CSS文件 14.3 XML文字阴影效果 14.4 XML古诗字画 14.5 XML实现隔行变色的表格 第15章 CSS与Ajax的综合应用 15.1 Ajax概述 15.1.1 什么是Ajax 15.1.2 Ajax的关键元素 15.1.3 CSS的重要地位 15.2 Ajax入门 15.2.1 创建XMLHttpRequest对象 15.2.2 发出Ajax请求 15.2.3 处理服务器响应 15.2.4 加入CSS样式 15.3 Ajax实例:能够自由
拖动
布局区域的网页 第4部分 综合案例篇 第16章 我的博客 16.1 分析构架 16.1.1 设计分析 16.1.2 排版构架 16.2 模块拆分 16.2.1 导航与Banner 16.2.2 左侧列表 16.2.3 内容部分 16.2.4 footer脚注 16.3 整体调整 第17章 小型工作室网站 17.1 分析构架 17.1.1 设计分析 17.1.2 首页排版 17.1.3 内容页构架 17.2 模块拆分 17.2.1 搭建首页 17.2.2 首页
图片
17.2.3 内容页面 17.2.4 footer脚注 17.3 整体调整 第18章 企业网站 18.1 分析构架 18.1.1 设计分析 18.1.2 排版构架 18.2 模块拆分 18.2.1 Logo与顶端链接 18.2.2 左侧导航与搜索 18.2.3 主体内容 18.2.4 内容Banner 18.2.5 新闻快递 18.2.6 公司咨询 18.2.7 英文刊物 18.3 整体调整 第19章 网上购物网站 19.1 分析构架 19.1.1 设计分析 19.1.2 排版构架 19.2 模块分析 19.2.1 Banner
图片
19.2.2 导航菜单 19.2.3 鲜花导购 19.2.4 主体内容 19.3 整体调整 第20章 旅游网站 20.1 分析构架 20.1.1 设计分析 20.1.2 排版构架 20.2 模块拆分 20.2.1 Banner
图片
与导航菜单 20.2.2 左侧分栏 20.2.3
中
部主体 ……
JavaScript
87,907
社区成员
224,614
社区内容
发帖
与我相关
我的任务
JavaScript
Web 开发 JavaScript
复制链接
扫一扫
分享
社区描述
Web 开发 JavaScript
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章