博客园_西狐.Net

用jQuery轻松实现Div拖动

2011-05-20T06:43:00Z

用jQuery轻松实现Div拖动，只需只行代码，很简单. 试试效果:

hooyes

代码:

<!DOCTYPE html>
<html>
<head>
    <title>hooyes Drag demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" 
    type="text/javascript"></script>
    <style type="text/css">
    .drag{
          position:absolute;
          width:100px; height:100px;
          border:1px solid #96C2F1; background-color: #EFF7FF;
          cursor:move; line-height:100px; text-align:center;
    }
    </style>
    <script type="text/javascript">
        (function (document) {
            //Usage: $("#id").drag()  
            //Author: hooyes
            $.fn.Drag = function () {
                var M = false;
                var Rx, Ry;
                var t = $(this);
            t.mousedown(function (event) {
                    Rx = event.pageX - (parseInt(t.css("left")) || 0);
                    Ry = event.pageY - (parseInt(t.css("top")) || 0);
                    t.css("position", "absolute").css('cursor', 'move').fadeTo(20, 0.5);
                    M = true;
                })
            .mouseup(function (event) {
                M = false; t.fadeTo(20, 1);
            });
                $(document).mousemove(function (event) {
                    if (M) {
                        t.css({ top: event.pageY - Ry, left: event.pageX - Rx });
                    }
                });
            }
        })(document);


        $(document).ready(function () {
            $("#Div1").Drag();
        });
    </script>
</head>
<body>
<div id="Div1" class="drag">hooyes</div>
</body>
</html>

本文链接

用CSS的 filter 来轻松实现图层半透明

2011-05-13T14:51:00Z

用CSS的 filter 来轻松实现Div半透明

.Demo{
background:#000; background:rgba(0,0,0,0.6); filter:alpha(opacity=40);
}

<div class="Demo">hooyes!</div>

Hello hooyes!

看到屏幕的右上角了半透明的图层了吗？

本文链接

用CSS3的 border-radius 来轻松实现图层圆角

2011-05-07T08:00:00Z

用CSS3的 border-radius 来轻松实现div圆角

.Demo{
 border-radius: 5px; 
 border: 5px solid #FFFFFF; 
 box-shadow: 1px 1px 5px #333333; }

<div class="Demo">hooyes!</div>

看如下效果:

hooyes!

附:

CSS3 需要高版本的浏览器支持。为了促进互联网美好的发展，请升级到高版本的浏览器。

本文链接

用CSS3的 box-shadow 来轻松实现图层阴影效果

2011-05-06T13:46:00Z

CSS3的box-shadow属性可以让我们轻松实现div阴影效果。

.Demo{border: 5px solid #FFFFFF;
 box-shadow: 1px 1px 5px #333333;  }

<div class="Demo">hooyes!</div>

看如下效果:

hooyes!

附:

CSS3 需要高版本的浏览器支持。为了促进互联网美好的发展，请升级到高版本的浏览器。

本文链接

VS2010 让你的Javascript代码可以折叠

2011-03-28T08:41:00Z

今天发现这个VS2010的插件挺有意思的，可以在VS2010中将JS代码像C#代码那折叠起来。

下载地址

http://visualstudiogallery.msdn.microsoft.com/0696ad60-1c68-4b2a-9646-4b5f4f8f2e06/

本文链接