昨天给大家介绍了一款基于jquery ui漂亮的可拖动div实例,今天要给大家分享一款基于jquery的可拖动div。这款可拖动div只要引用jquery就可以,无需引用jquery ui。还实时记录的鼠标的坐标。一起看下效果图吧。
实现的代码。
html代码:
<span class="text noselect">DRAGGIN' WINDOWS<br />
<a href="http://www.w2bc.com">This is an old one. Click HERE for access the newer one.</a></span>
<div class="window noselect">
<div class="pew">
Header
</div>
<div class="container">
The Cords
</div>
</div>
css代码:
.noselect
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} html
{
width: 100%;
height: 100%;
} body
{
background: radial-gradient(#ACBEC8, #3A4E57);
margin:;
width: 100%;
height: 100%;
font-family: 'Raleway' , sans-serif;
} .testtext
{
width: 100%;
color: white;
text-align: center;
display: inline-block;
padding-top: 30vh;
font-size: 48px;
text-shadow: 0 0 6px #333;
} .text
{
width: 100%;
color: white;
text-align: center;
display: inline-block;
padding: 40px 0;
font-size: 48px;
line-height: 30px;
} .text a
{
text-decoration: none;
font-size: 15px;
line-height: 20px;
color: white;
} .window
{
width: 500px;
height: 300px;
background: #181818;
margin-left: -250px;
left: 50%;
position: absolute;
} .pew
{
width: 100%;
height: 30px;
text-align: center;
line-height: 30px;
color: #111;
background: #E31836;
cursor: default;
} .container
{
width: 100%;
height: calc(100% - 30px);
color: #eee;
padding: 35px 0 0 0;
text-align: center;
font-size: 36px;
}
注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/8756
基于jquery的可拖动div的更多相关文章
-
基于jQuery页面窗口拖动预览效果
今天给大家分享一款基于Query页面窗口拖动预览效果.这是一款基于jQuery+HTML5实现的模拟页面窗口显示拖动窗口预览特效.这款实例适用浏览器:IE8.360.FireFox.Chrome.Sa ...
-
基于jquery实现图片拖动和曲线拖放
功能:图片的拖动.曲线的拖放和绘制 一. 准备工作 1. 点击此下载相关的文档 二. 在浏览器中运行 dragDrop.html 文件,即可看到效果 三. 效果图
-
一款基于jquery ui漂亮的可拖动div实例
今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览 ...
-
jQuery实现鼠标拖动改变Div高度
最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...
-
转载 * jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小
由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包 可用于页面布局. //============================ind ...
-
jQuery实现动态分割div—通过拖动分隔栏实现上下、左右动态改变左右、上下两个相邻div的大小
由jQuery实现上下.左右动态改变左右.上下两个div的大小,需要自己引入jquery1.8.0.min.js包 可用于页面布局. //============================ind ...
-
模仿iframe框架,由分隔栏动态改变左右两侧div大小———基于jQuery
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
-
基于JQuery可拖动列表格插件DataTables的踩坑记
前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...
-
基于 jQuery Jcrop 插件的功能模块:头像剪裁
/** Jcrop version: 0.9.12 jQuery version: 1.9.0 Author: 小dee Date: 2014.10.30 */ 先看看他山之石:博客园的头像模块也是使 ...
随机推荐
-
js 处理字母 大小写的 一些函数
js中实现字母大小写转换主要用到了四个js函数: 1.toLocaleUpperCase2.toUpperCase3.toLocaleLowerCase4.toLowerCase 下面就这四个实现大小 ...
-
NOI 题库 1792
1792 迷宫 描述 一天Extense在森林里探险的时候不小心走入了一个迷宫,迷宫可以看成是由n * n的格点组成,每个格点只有2种状态,.和#,前者表示可以通行后者表示不能通行.同时当Exten ...
-
69道Spring面试题和答案
1. 什么是spring? Spring 是个java企业级应用的开源开发框架.Spring主要用来开发Java应用,但是有些扩展是针对构建J2EE平台的web应用.Spring 框架目标是简化Jav ...
-
HDU 5351 MZL&#39;s Border (规律,大数)
[HDU 5351 MZL's Border]题意 定义字符串$f_1=b,f_2=a,f_i=f_{i-1}f_{i-2}$. 对$f_n$的长度为$m$的前缀$s$, 求最大的$k$满足$s[1] ...
-
mysql报错1024-can&#39;t get hostname for your address
前一段时间mysql用的好好的,突然一天,mysql启动后,在使用navicat连接数据库的时候 报错1024-can't get hostname for your address 这里我是这样解决 ...
-
CGroup Namspace
CGroup 介绍 CGroup 是 Control Groups 的缩写,是 Linux 内核提供的一种可以限制.记录.隔离 进程组 (process groups) 所使用的物力资源 (如 cpu ...
-
luogu P3162 [CQOI2012]组装
传送门 mdzz,为什么这题有个贪心的标签啊qwq 首先考虑每一种车间,对于每相邻两个车间,在中点左边那么左边那个会贡献答案,在右边就右边那个更优 所以总共会有m-1个这样的分界中点,然后最多有m+1 ...
-
BZOJ3545&;3551[ONTAK2010]Peaks——kruskal重构树+主席树+dfs序+树上倍增
题目描述 在Bytemountains有N座山峰,每座山峰有他的高度h_i.有些山峰之间有双向道路相连,共M条路径,每条路径有一个困难值,这个值越大表示越难走,现在有Q组询问,每组询问询问从点v开始只 ...
-
Android Firebase Android google-cloud-tools
Firebase 让不懂服务端的开发者也可以快速写出实时性的Web端和移动端应用. firebase的功能包括推送通知,云存储,活动监视,远程部署 针对国内三方推送,只能在国内使用,到了国外就不支持了 ...
-
nodejs学习笔记<;七>; 路由
// 引用模块(与C#中命名空间,Java中引用包同理) var http = require("http"); var path = require("path&quo ...