利用jquery 拖动插件制作的拖动层效果

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>jquery 拖动插件   </title>
<script src="jquery1.4.2.min.js" type="text/网页特效"></script>
<script src="jquery.anydrag.min.js" type="text/javascript"></script>
<script  type="text/javascript">
$(function(){
 //$(".drag").anydrag()  
 $(".drag").anydrag({obj:".hot",maxtop:true,alpha:0.5}); 
 
 
 /**
 /* 【参数说明】
 /* obj 拖动热区,拖动所选对象的什么位置 可拖动,默认为 对象整体可拖动。 如果只要标题栏可拖动 请传入 选择器(class 或是 id)
 /* maxtop 拖动放开后 是否在最顶层,默认为false  不在最顶层。
 /* alpha 拖动时 被拖动对象的透明度,默认为1. 不透明。
  **/
 
})

</script>
<style type="text/css教程">
body{ font-size:12px; margin:0; padding:0;}
.drag{ width:300px; height:200px; border:1px solid #936; }
.drag .hot{width:100%; height:30px; border-bottom:1px solid #936; line-height:30px; background:#999;}
.drag .content{ height:170px;}
/*download by http://www.111cn.net*/
.s0{background:#f60; left:100px;top:200px;}
.s1{background:#396; left:20px;top:400px;}
.s2{background:#9cf; left:300px;top:10px;}

</style>
</head>

<body>
 
 <div class="drag s0">
        <div class="hot">标题</div> 
        <div class="content">
            这是是内容0
        </div>
 </div>
 <div class="drag s1">
        <div class="hot">标题</div> 
        <div class="content">
            这是是内容1
        </div>
 </div>
 <div class="drag s2">
        <div class="hot">标题</div> 
        <div class="content">
            这是是内容2
        </div>
 </div>       

</body>
</html>

源码下载地址
http://down.111cn.net/down/code/jquery/2010/0914/20793.html

效果查看地址
http://g.111cn.net/javascript/js/20100914/jquery/

时间: 2024-09-21 10:14:35

利用jquery 拖动插件制作的拖动层效果的相关文章

jQuery拖拽排序插件制作拖拽排序效果(附源码下载)_jquery

使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件.效果图如下: 效果演示         源码下载 html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><

jquery制作居中遮罩层效果分享

 这篇文章主要介绍了jquery制作居中遮罩层效果示例,需要的朋友可以参考下  代码如下: <!DOCTYPE HTML> <html lang=zh-cn> <head> <meta charset=utf-8> <title>遮罩演练</title> <link href="../css/component2.css" rel="Stylesheet"/> <script

jquery简单插件制作(fn.extend)完整实例_jquery

本文实例讲述了jquery简单插件制作方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang=&qu

利用jquery.uploadify插件来实现图片上传和预览效果

文章是告诉你如何利用jquery.uploadify插件来实现图片上传和预览效果,首页我们要看看关于利用jquery uploadify上传图片要注意事项吧. 注意事项 (1).如果页面没有显示"browse"按钮,则说明你的'uploader' : '<%=basepath%>images/uploadify.swf'配置不对,检查下路径是否正确. (2).如果需要修改按钮的图片:可以使用'buttonimg'配置进行替换 (3).上传完成后,'oncomplete'事件

jQuery实现的自定义弹出层效果实例详解_jquery

本文实例讲述了jQuery实现的自定义弹出层效果.分享给大家供大家参考,具体如下: dialog.css: #DialogBySHFLayer { width:100%; height:100%; left:0; top:0; position:fixed; z-index:500; background-color:#333333; filter:alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4; } /*弹出的提示框*/ #DialogByS

基于jQuery倒计时插件实现团购秒杀效果_jquery

倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery倒计时超级实现团购秒杀效果,感兴趣的朋友一起学习吧! 1.1 帮助文档关键字 倒计时 秒杀 timer 1.2. 使用场景 这样的倒计时在购物网站中会经常使用到,比如秒杀,限时抢购,确认收货倒计时. 这个功能并不难实现,就是利用js的定时执行,搜了一下网上的代码,五花八门,都是一个方法,没有做到封装,方便使用,所以写了一个插件,方便项

jquery实现点击弹出层效果的简单实例_jquery

弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考. 效果代码如下: 在 弹出层 中下面是核心代码 复制代码 代码如下: <script type="text/javascript">// 渐变弹出层$(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定

JavaScript制作弹出层效果_javascript技巧

先给大家展示下效果图,效果图如下所示: 1.引用相关easyui.min.js,easyui-lang-zh_CN.js 等js 文件: 2.前台代码 <input type="text" id="txt_Type" style="display:none" /> <div class="macFormItem" id="divSQXLH" runat="server"

基于jQuery日历插件制作日历_jquery

来看下最终效果图吧: 是长得丑了一点,不要吐槽我-.- 首先来说说这个日历主要的制作逻辑吧: ·一个月份最多有31天,需要一个7X6的表格去装载 ·如果知道了某个月份1号是星期几,这个月份有多少天,一个循环就可以显示某个月的日历了吧(眼睛都放光了*.*) ·加上一些控件让用户可以方便操作吧(比如可以输入年份.月份,可以点击选择年份.月份) 新建一个html文件,html结构: <div class="container"> <input type="text