【美高梅游戏官网网站】Jquery仿IGoogle实现可拖动
分类:美高梅游戏官网网站

google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天要做一个网站的类似效果,仿照iGoogle做了一个简单的小demo。

Jquery仿IGoogle实现可拖动窗口示例代码,jqueryigoogle

google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天要做一个网站的类似效果,仿照iGoogle做了一个简单的小demo。

这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的

废话就不多说了,直接把源代码贴出来,让大家学习!
html

<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" media="screen" href="css/my.css" rel="external nofollow" rel="external nofollow" mce_href="css/my.css" rel="external nofollow" rel="external nofollow" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easywidgets.js"></script> 
<script src="js/example.js" type="text/javascript"></script>
</head>

<body>
<!--left-->
<div id="left" class="widget-place column1">
<div id="ldiv1" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">左边-----用鼠标拖动</div> 
</div>

<div id="ldiv2" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">左边-----用鼠标拖动</div>
</div>
<div id="ldiv3" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">左边-----用鼠标拖动</div>
</div>
</div>

<!--middle-->
<div id="middle" class="widget-place column2"> 
<div id="mdiv1" class="widget movable collapsable removable editable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div class="widget-editbox" style="background:#CC6699" mce_style="background:#CC6699">这里就是放编辑的内容,为了显眼,我加了背景</div>
<div id="content" class="widget-content">中间------用鼠标拖动</div>
</div>
<div id="mdiv2" class="widget movable removable editable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">中间------用鼠标拖动</div>
</div>
<div id="mdiv3" class="widget movable removable editable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">中间------用鼠标拖动</div>
</div>
</div>

<!--right-->
<div id="right" class="widget-place column3">
<div id="rdiv1" class="widget movable"> 
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">右边------用鼠标拖动</div>
</div>
<div id="rdiv2" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">右边------用鼠标拖动</div>
</div>
<div id="rdiv3" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">右边------用鼠标拖动</div>
</div>
</div>
</body>
</html>

美高梅游戏官网网站,CSS

body{
margin: 0;
padding: 0;
background-color: silver;
font-family: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif; 
color: #666; 
font-size:20px; 
line-height:150%; 
}
#left{
width: 380px;
height: 100%;
padding: 10px;
position: absolute;
top: 10px;
left: 10px;
border: solid red 2px; 
}
#left .widget {
width: 340px;
height: 150px;
padding; 10px;
margin: 20px;
border: solid red 2px;
background-color: white;
}
#left .widget .widget-header {
width: 340px;
height: 30px;
padding: 0;
margin: 0;
color: red;
position: static;
background-color: gray;
}
#middle{
width: 400px;
height: 100%;
position: absolute;
top:10px;
left: 435px;
padding: 10px;
margin: 0 30px 0; 

border: solid red 2px; 
}
#middle .widget {
width: 360px;
height: 150px;
padding; 10px;
margin: 20px;
border: solid red 2px;
background-color: white;
}
#middle .widget .widget-header {
width: 360px;
height: 30px;
padding: 0;
margin: 0;
color: red;
position: static;
background-color: gray;
}
#right{
width: 380px;
height: 100%;
padding: 10px;
position: absolute;
top: 10px;
right: 10px;
border: solid red 2px; 
}
#right .widget {
width: 340px;
height: 150px;
padding; 10px;
margin: 20px;
border: solid red 2px;
background-color: white;
}
#right .widget .widget-header {
width: 340px;
height: 30px;
padding: 0;
margin: 0;
color: red;
position: static;
background-color: gray;
}

javascript代码

$(document).ready(function(){ 
$.fn.EasyWidgets({
i18n : { 
editText : '编辑', 
closeText : '关闭', 
extendText : '展开', 
collapseText : '折叠', 
cancelEditText : '取消' 
}
});
});

Jquery仿IGoogle实现可拖动窗口,jqueryigoogle

google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天要做一个网站的类似效果,与编程人生的站长沟通了一下,仿照iGoogle做了一个简单的小demo。

      这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的

      废话就不多说了,直接把源代码贴出来,让大家学习!

html

1 <html>
2 <head> 
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 
5 <link rel="stylesheet" type="text/css" media="screen" href="css/my.css" mce_href="css/my.css" />
6 <mce:script type="text/javascript" src="js/jquery.min.js" mce_src="js/jquery.min.js"></mce:script>
7 <mce:script type="text/javascript" src="js/jquery-ui.min.js" mce_src="js/jquery-ui.min.js"></mce:script>
8 <mce:script type="text/javascript" src="js/jquery.easywidgets.js" mce_src="js/jquery.easywidgets.js"></mce:script> 
9 <mce:script src="js/example.js" mce_src="js/example.js" type="text/javascript"></mce:script>
10 </head>
11 
12 <body>
13 <!--left-->
14 <div id="left" class="widget-place column1">
15 <div id="ldiv1" class="widget movable">
16 <div id="header" class="widget-header"><strong>drar me</strong> </div>
17 <div id="content" class="widget-content">左边-----用鼠标拖动</div> 
18 </div>
19 
20 <div id="ldiv2" class="widget movable">
21 <div id="header" class="widget-header"><strong>drar me</strong> </div>
22 <div id="content" class="widget-content">左边-----用鼠标拖动</div>
23 </div>
24 <div id="ldiv3" class="widget movable">
25 <div id="header" class="widget-header"><strong>drar me</strong> </div>
26 <div id="content" class="widget-content">左边-----用鼠标拖动</div>
27 </div>
28 </div>
29 
30 <!--middle-->
31 <div id="middle" class="widget-place column2"> 
32 <div id="mdiv1" class="widget movable collapsable removable editable">
33 <div id="header" class="widget-header"><strong>drar me</strong> </div>
34 <div class="widget-editbox" style="background:#CC6699" mce_style="background:#CC6699">这里就是放编辑的内容,为了显眼,我加了背景</div>
35 <div id="content" class="widget-content">中间------用鼠标拖动</div>
36 </div>
37 <div id="mdiv2" class="widget movable removable editable">
38 <div id="header" class="widget-header"><strong>drar me</strong> </div>
39 <div id="content" class="widget-content">中间------用鼠标拖动</div>
40 </div>
41 <div id="mdiv3" class="widget movable removable editable">
42 <div id="header" class="widget-header"><strong>drar me</strong> </div>
43 <div id="content" class="widget-content">中间------用鼠标拖动</div>
44 </div>
45 </div>
46 
47 <!--right-->
48 <div id="right" class="widget-place column3">
49 <div id="rdiv1" class="widget movable"> 
50 <div id="header" class="widget-header"><strong>drar me</strong> </div>
51 <div id="content" class="widget-content">右边------用鼠标拖动</div>
52 </div>
53 <div id="rdiv2" class="widget movable">
54 <div id="header" class="widget-header"><strong>drar me</strong> </div>
55 <div id="content" class="widget-content">右边------用鼠标拖动</div>
56 </div>
57 <div id="rdiv3" class="widget movable">
58 <div id="header" class="widget-header"><strong>drar me</strong> </div>
59 <div id="content" class="widget-content">右边------用鼠标拖动</div>
60 </div>
61 </div>
62 </body>
63 </html>

CSS

1 body{
2 margin: 0;
3 padding: 0;
4 background-color: silver;
5 font-family: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif; 
6 color: #666; 
7 font-size:20px; 
8 line-height:150%; 
9 }
10 #left{
11 width: 380px;
12 height: 100%;
13 padding: 10px;
14 position: absolute;
15 top: 10px;
16 left: 10px;
17 border: solid red 2px; 
18 }
19 #left .widget {
20 width: 340px;
21 height: 150px;
22 padding; 10px;
23 margin: 20px;
24 border: solid red 2px;
25 background-color: white;
26 }
27 #left .widget .widget-header {
28 width: 340px;
29 height: 30px;
30 padding: 0;
31 margin: 0;
32 color: red;
33 position: static;
34 background-color: gray;
35 }
36 #middle{
37 width: 400px;
38 height: 100%;
39 position: absolute;
40 top:10px;
41 left: 435px;
42 padding: 10px;
43 margin: 0 30px 0; 
44 
45 border: solid red 2px; 
46 }
47 #middle .widget {
48 width: 360px;
49 height: 150px;
50 padding; 10px;
51 margin: 20px;
52 border: solid red 2px;
53 background-color: white;
54 }
55 #middle .widget .widget-header {
56 width: 360px;
57 height: 30px;
58 padding: 0;
59 margin: 0;
60 color: red;
61 position: static;
62 background-color: gray;
63 }
64 #right{
65 width: 380px;
66 height: 100%;
67 padding: 10px;
68 position: absolute;
69 top: 10px;
70 right: 10px;
71 border: solid red 2px; 
72 }
73 #right .widget {
74 width: 340px;
75 height: 150px;
76 padding; 10px;
77 margin: 20px;
78 border: solid red 2px;
79 background-color: white;
80 }
81 #right .widget .widget-header {
82 width: 340px;
83 height: 30px;
84 padding: 0;
85 margin: 0;
86 color: red;
87 position: static;
88 background-color: gray;
89 }

javascript代码

$(document).ready(function(){ 
$.fn.EasyWidgets({
i18n : { 
editText : '编辑', 
closeText : '关闭', 
extendText : '展开', 
collapseText : '折叠', 
cancelEditText : '取消' 
}
});
});

 

图片上传是许多网站的一个常用的功能,有时需要对上传的图片做初步的选择裁剪,比如上传头像。下面就是一个使用HTML5+jQuery实现的图片上传裁剪特效,可以对选择要上传的图片做缩小、放大、拖动和裁剪,由何问起调试改进,有需要的朋友可以参考一下。在文后附有源码下载。

这个的demo是根据一个Jquery的框架直接做出来的:easywidgets。这个框架是可以免费下载的

jquery 拖动窗口

这个是jqDnR
(function ($) {
$.fn.jqDrag = function (h) {
return i(this, h, "d");
};
$.fn.jqResize = function (h) {
return i(this, h, "r");
};
$.jqDnR = {dnr:{}, e:0, drag:function (v) {
if (M.k == "d") {
E.css({left:M.X + v.pageX - M.pX, top:M.Y + v.pageY - M.pY});
} else {
E.css({width:Math.max(v.pageX - M.pX + M.W, 0), height:Math.max(v.pageY

  • M.pY + M.H, 0)});
    }
    return false;
    }, stop:function () {
    E.css("opacity", M.o);
    $(document).unbind("mousemove", J.drag).unbind("mouseup", J.stop);
    }};
    var J = $.jqDnR, M = J.dnr, E = J.e, i = function (e, h, k) {
    return e.each(function () {
    h = (h) ? $(h, e) : e;
    h.bind("mousedown", {e:e, k:k}, function (v) {
    var d = v.data, p = {};
    E = d.e;
    // attempt utilization of dimensions plugin to fix IE issues
    if (E.css("position") != "relative") {
    p = E.position();
    if (!($.browser.msie && ($.browser.version == "6.0")) && (E.css("position") == "fixed")) {
    p.top -= $(window).scrollTop();
    p.left -= $(window).scrollLeft();
    }
    }
    M = {X:p.left || f("left") || 0, Y:p.top || f("top") || 0, W:f("width") || E[0].scrollWidth || 0, H:f("height") || E[0].scrollHeight || 0, pX:v.pageX, pY:v.pageY, k:d.k, o:E.css("opacity")};
    E.css({opacity:0.8});
    $(document).mousemove($.jqDnR.drag).mouse......余下全文>>  

jquery 拖动窗口

这个是jqDnR
(function ($) {
$.fn.jqDrag = function (h) {
return i(this, h, "d");
};
$.fn.jqResize = function (h) {
return i(this, h, "r");
};
$.jqDnR = {dnr:{}, e:0, drag:function (v) {
if (M.k == "d") {
E.css({left:M.X + v.pageX - M.pX, top:M.Y + v.pageY - M.pY});
} else {
E.css({width:Math.max(v.pageX - M.pX + M.W, 0), height:Math.max(v.pageY

  • M.pY + M.H, 0)});
    }
    return false;
    }, stop:function () {
    E.css("opacity", M.o);
    $(document).unbind("mousemove", J.drag).unbind("mouseup", J.stop);
    }};
    var J = $.jqDnR, M = J.dnr, E = J.e, i = function (e, h, k) {
    return e.each(function () {
    h = (h) ? $(h, e) : e;
    h.bind("mousedown", {e:e, k:k}, function (v) {
    var d = v.data, p = {};
    E = d.e;
    // attempt utilization of dimensions plugin to fix IE issues
    if (E.css("position") != "relative") {
    p = E.position();
    if (!($.browser.msie && ($.browser.version == "6.0")) && (E.css("position") == "fixed")) {
    p.top -= $(window).scrollTop();
    p.left -= $(window).scrollLeft();
    }
    }
    M = {X:p.left || f("left") || 0, Y:p.top || f("top") || 0, W:f("width") || E[0].scrollWidth || 0, H:f("height") || E[0].scrollHeight || 0, pX:v.pageX, pY:v.pageY, k:d.k, o:E.css("opacity")};
    E.css({opacity:0.8});
    $(document).mousemove($.jqDnR.drag).mouse......余下全文>>  

效果图:

废话就不多说了,直接把源代码贴出来,让大家学习!
html

js问题教,过来帮一下忙哟

把相应div的style.display设置成"none"  

google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天...

js问题教,过来帮一下忙哟

把相应div的style.display设置成"none"  

google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天要做一个...

美高梅游戏官网网站 1

<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" media="screen" href="css/my.css" rel="external nofollow" rel="external nofollow" mce_href="css/my.css" rel="external nofollow" rel="external nofollow" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.easywidgets.js"></script> 
<script src="js/example.js" type="text/javascript"></script>
</head>

<body>
<!--left-->
<div id="left" class="widget-place column1">
<div id="ldiv1" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">左边-----用鼠标拖动</div> 
</div>

<div id="ldiv2" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">左边-----用鼠标拖动</div>
</div>
<div id="ldiv3" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">左边-----用鼠标拖动</div>
</div>
</div>

<!--middle-->
<div id="middle" class="widget-place column2"> 
<div id="mdiv1" class="widget movable collapsable removable editable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div class="widget-editbox" style="background:#CC6699" mce_style="background:#CC6699">这里就是放编辑的内容,为了显眼,我加了背景</div>
<div id="content" class="widget-content">中间------用鼠标拖动</div>
</div>
<div id="mdiv2" class="widget movable removable editable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">中间------用鼠标拖动</div>
</div>
<div id="mdiv3" class="widget movable removable editable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">中间------用鼠标拖动</div>
</div>
</div>

<!--right-->
<div id="right" class="widget-place column3">
<div id="rdiv1" class="widget movable"> 
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">右边------用鼠标拖动</div>
</div>
<div id="rdiv2" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">右边------用鼠标拖动</div>
</div>
<div id="rdiv3" class="widget movable">
<div id="header" class="widget-header"><strong>drar me</strong> </div>
<div id="content" class="widget-content">右边------用鼠标拖动</div>
</div>
</div>
</body>
</html>

需要引用的css文件为style.css,需要引用的js文件为jquery文件,可以到选择合适的版本下载,还需引用cropbox.js文件,这些文件在源码里面都有。

CSS

代码如下:

body{
margin: 0;
padding: 0;
background-color: silver;
font-family: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif; 
color: #666; 
font-size:20px; 
line-height:150%; 
}
#left{
width: 380px;
height: 100%;
padding: 10px;
position: absolute;
top: 10px;
left: 10px;
border: solid red 2px; 
}
#left .widget {
width: 340px;
height: 150px;
padding; 10px;
margin: 20px;
border: solid red 2px;
background-color: white;
}
#left .widget .widget-header {
width: 340px;
height: 30px;
padding: 0;
margin: 0;
color: red;
position: static;
background-color: gray;
}
#middle{
width: 400px;
height: 100%;
position: absolute;
top:10px;
left: 435px;
padding: 10px;
margin: 0 30px 0; 

border: solid red 2px; 
}
#middle .widget {
width: 360px;
height: 150px;
padding; 10px;
margin: 20px;
border: solid red 2px;
background-color: white;
}
#middle .widget .widget-header {
width: 360px;
height: 30px;
padding: 0;
margin: 0;
color: red;
position: static;
background-color: gray;
}
#right{
width: 380px;
height: 100%;
padding: 10px;
position: absolute;
top: 10px;
right: 10px;
border: solid red 2px; 
}
#right .widget {
width: 340px;
height: 150px;
padding; 10px;
margin: 20px;
border: solid red 2px;
background-color: white;
}
#right .widget .widget-header {
width: 340px;
height: 30px;
padding: 0;
margin: 0;
color: red;
position: static;
background-color: gray;
}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery拖动剪裁图片作为头像代码 - 何问起</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div class="hovertreecontainer">
 <div class="imageBox">
 <div class="thumbBox"></div>
 <div class="spinner" style="display: none">Loading...</div>
 </div>
 <div class="action"> 
 <div class="new-contentarea tc"> 
 <a href="javascript:void(0)" class="upload-img">
 <label for="upload-file">上传图像</label>
 </a>
 <input type="file" class="" name="upload-file" id="upload-file" />
 </div>
 <input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切">
 <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+" >
 <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" >
 </div>
 <div class="cropped"></div>
</div>
<script src="http://down.hovertree.com/jquery/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/cropbox.js"></script>
<script type="text/javascript">
$(window).load(function() {
 var options =
 {
 thumbBox: '.thumbBox',
 spinner: '.spinner',
 imgSrc: 'img/rgevo2ea.jpg'
 }
 var cropper = $('.imageBox').cropbox(options);
 $('#upload-file').on('change', function(){
 var reader = new FileReader();
 reader.onload = function(e) {
 options.imgSrc = e.target.result;
 cropper = $('.imageBox').cropbox(options);
 }
 reader.readAsDataURL(this.files[0]);
 this.files = [];
 })
 $('#btnCrop').on('click', function(){
 var img = cropper.getDataURL();
 $('.cropped').html('');
 $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
 $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
 $('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
 })
 $('#btnZoomIn').on('click', function(){
 cropper.zoomIn();
 })
 $('#btnZoomOut').on('click', function(){
 cropper.zoomOut();
 })
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/h/bjaf/7x8ev3fh.htm" target="_blank">说明</a></p>
</div>
</body>
</html>

javascript代码

源码下载:

$(document).ready(function(){ 
$.fn.EasyWidgets({
i18n : { 
editText : '编辑', 
closeText : '关闭', 
extendText : '展开', 
collapseText : '折叠', 
cancelEditText : '取消' 
}
});
});

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

您可能感兴趣的文章:

  • jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
  • jQuery窗口拖动功能的实现代码

您可能感兴趣的文章:

  • jquery实现拖动效果
  • jQuery动态添加可拖动元素完整实例(附demo源码下载)
  • 使用jQuery的easydrag插件实现可拖动的DIV弹出框
  • jQuery实现简单的DIV拖动效果
  • jQuery实现div随意拖动的实例代码(通用代码)
  • jQuery实现移动端滑块拖动选择数字效果
  • jQuery实现分隔条左右拖动功能
  • jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
  • jquery实现鼠标拖动图片效果示例代码
  • jquery 图片缩放拖动的简单实例
  • jQuery拖动图片删除示例

本文由美高梅网址发布于美高梅游戏官网网站,转载请注明出处:【美高梅游戏官网网站】Jquery仿IGoogle实现可拖动

上一篇:jQuery控制TR显示隐藏的三种常用方法,隐藏div的几 下一篇:javascript页面加载完执行事件代码,onload处理htm
猜你喜欢
热门排行
精彩图文