可拖动可改变大小div的实现代码
Dialog
.dialogcontainter{height:400px; width:400px; border:1px solid #14495f; position:absolute; font-size:13px;}
.dialogtitle{height:26px; width:auto; background-image:url('http://zsrimg.ikafan.com/file_images/200908/103444839.p.gif');}
.dialogtitleinfo{float:left;height:20px; margin-top:2px; margin-left:10px;line-height:20px; vertical-align:middle; color:#FFFFFF; font-weight:bold; }
.dialogtitleico{float:right; height:20px; width:21px; margin-top:2px; margin-right:5px;text-align:center; line-height:20px; vertical-align:middle; background-image:url('http://zsrimg.ikafan.com/file_images/200908/103419495.p.gif');background-position:-21px 0px}
.dialogbody{ padding:10px; width:auto; background-color: #FFFFFF;}
.dialogbottom{
bottom:1px; right:1px;cursor:nw-resize;
position:absolute;
background-image:url('http://zsrimg.ikafan.com/file_images/200908/103419495.p.gif');
background-position:-42px -10px;
width:10px;
height:10px;
font-size:0;}
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
js通过八个点 拖动改变div大小的实现方法
复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Resize</title> <style type="text/css"> #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRigh
-
利用JavaScript实现拖拽改变元素大小
大致介绍 拖拽改变元素大小是在模拟拖拽上增加了一些功能 拖拽改变元素大小原理 首先这个方块得知道我们想要改变这个它的大小,所以我给它设定一个范围,当点击这个范围时表明我们想要改变它的大小 当我们点击方块的这些红色区域时,方快就知道我们想要改变它的大小 代码实现: // 获取event对象,兼容性写法 var ev = ev || event; // 鼠标按下时的位置 var mouseDownX = ev.clientX; var mouseDownY = ev.clientY; // 方块上下
-
javascript实现鼠标拖动改变层大小的方法
本文实例讲述了javascript实现鼠标拖动改变层大小的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>拖动改变层的大小</title> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <style> { box-sizing: border-box; moz-b
-
jquery拖动改变div大小
本文实例为大家分享了jquery拖动改变div大小的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery 版"元素拖拽改变大小"原型 </title> <script type="text/jav
-
jquery实现拖拽调整Div大小
今天写了一天这个jquery插件: 可以实现对div进行拖拽来调整大小的功能. 复制代码 代码如下: (function ($) { $.fn.dragDivResize = function () { var deltaX, deltaY, _startX, _startY; var resizeW, resizeH; var size = 20; var minSize = 10; var scroll
-
鼠标拖动改变DIV等网页元素的大小的实现方法
1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div change
-
可拖动可改变大小div的实现代码
Dialog .dialogcontainter{height:400px; width:400px; border:1px solid #14495f; position:absolute; font-size:13px;} .dialogtitle{height:26px; width:auto; background-image:url('http://files.jb51.net/file_images/200908/103444839.p.gif');} .dialogtitleinf
-
C# TrackBar拖动条改变滑块颜色
本文实例为大家分享了C# TrackBar拖动条改变滑块颜色的具体代码,供大家参考,具体内容如下 原理 1.TrackBar拖动条的滑块的默认颜色是(23,23,23)偏蓝色,遍历TrackBar控件中的每一个像素点,获取颜色是(23,23,23)的像素点,用另外一种颜色在像素点的位置上绘制直径为1的圆形.2.添加布尔值,判断鼠标是否在TrackBar中.3.在鼠标进入控件事件中,布尔值为true:在鼠标离开控件事件中,布尔值为false.4.加入1ms的定时器,在定时器事件中,如果布尔值为tr
-
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
本文实例讲述了JS实现漂亮的窗口拖拽效果.分享给大家供大家参考.具体如下: 这是一款漂亮的JS窗口拖拽效果(改变大小/最小化/最大化/还原/关闭) 特点: ① 窗口可以拖动: ② 窗口可以通过八个方向改变大小: ③ 窗口可以最小化.最大化.还原.关闭: ④ 限制窗口最小宽度/高度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
-
vue中实现拖动调整左右两侧div的宽度的示例代码
写在最前 最近在使用vue的时候,遇到一个需求,实现左右div可通过中间部分拖拽调整宽度,类似于这样 这是我最终的实现效果 还是老话,因为我不是专业的前端工程师,只是兼职写一些简单的前端,所以这个功能的实现得益于以下博客,<vue 拖动调整左右两侧div的宽度>.<vuejs中拖动改变元素宽度实现宽度自适应大小>,而我只是针对于他们提供的代码,加了亿点点自己所需要的细节. 实现原理 如上图所示,我们需要将要实现此功能的页面划分为三个部分,左部.调整区.右部,分别对应css样式为le
-
鼠标拖动实现DIV排序示例代码
先上效果图: 对比传统的排序,这是一个很不错的尝试,希望对大家有启发. 大家可以参考我的上一篇博文:http://www.jb51.net/article/42087.htm html部分: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link href="css/c
-
JQuery拖拽元素改变大小尺寸实现代码
"元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top.left.width.height 的运用,相对实现起来也非常容易.以下附出源码原型,弄明白了原理再扩展其他实际应用,思路就变得简单.清晰得多了 下面是 JavaScript Code 复制代码 代码如下: <script type="text/javascript"> /* * jQuery.Resize by wuxinxi007 *
-
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
PyQt5动态(可拖动控件大小)布局控件QSplitter简介 PyQt还提供了特殊的布局管理器QSplitter.它可以动态地拖动子控件之间的边界,算是一个动态的布局管理器,QSplitter允许用户拖动子控件的边界控制子控件的大小,并提供一个处理拖曳子控件的控制器 在QSplitter对象中各子控件默认是横向布局的,可以使用Qt,Vertical进行垂直布局 QSplitter类中常用的方法 方法 描述 addWidget() 将小控件添加到QSplitter管理器的布局中 indexOf(
-
vue-drag-chart 拖动/缩放的图表组件的实例代码
vue-drag-chart 一个可以拖动 / 缩放的图表组件 使用 npm i vue-drag-chart --save import VueDragChart from "../src/vue-drag-chart/index.vue"; components: { //注册插件 VueDragChart }, <VueDragChart :list="item" v-for="(item,index) in chartlist" :
-
jquery 实现的改变颜色与背景的代码 change(fontsize,background)补充2
change(fn) 在每一个匹配元素的change事件中绑定一个处理函数. change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触发. 豪情 p{line-height:23px;margin:0;padding:0;} $(function(){ $('#c-obj select').change(function(){ alert($(this).attr('id') + ': ' + $(this).val()); $('p').css($(this).attr('i
-
Android自定义控件之可拖动控制的圆环控制条实例代码
前几天收到这么一个需求,本来以为挺简单的,没想到最后发现实现起来还是有点小麻烦的,在这里小小的总结一下. 先看看下面这张需求的样图: 然后在看一下最终实现的效果图,可能是gif录制软件的问题,有一些浮影,忽略就好了: 首先要分析一下最核心的地方,如何获取到滑动距离对应的弧长,看图: p1是手指按下的点,很明显要想知道当前进度弧边的值,就是要求出角d的值. 以p为圆心点,atan(b)=Math.atan((-p.y)/(-p.x)); 所以角d的值为:Math.toDegrees(atan);
随机推荐
- C#实现基于ffmpeg加虹软的人脸识别的示例
- CentOS 7下MongoDB的安装配置详解
- 零基础写Java知乎爬虫之将抓取的内容存储到本地
- java实现输入输出流代码分享
- python中getaddrinfo()基本用法实例分析
- C#怎么实现手机短信发送功能
- 用C++实现strcpy(),返回一个char*类型的深入分析
- ASP 包含文件中的路径问题和使用单一数据库连接文件的解决方案
- Javascript获取随机数的实现方法
- 手动配置phpmyadmin和mysql密码的两种方案
- JDK8中新增的原子性操作类LongAdder详解
- 非常不错的Flash缓动广告导航
- Win2003灵活实现多Web站点的设置方法[图文]
- Android UI手机信息页面设计
- JavaScript+canvas实现七色板效果实例
- dword ptr指令详细解析
- C#遍历子目录的方法
- Nginx stub_status 监控模块的功能实现
- Vue中的$set的使用实例代码
- JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例