VQuery高级特性

最新推荐文章于 2024-07-23 11:07:53 发布

weixin_30877755

最新推荐文章于 2024-07-23 11:07:53 发布

阅读量54

点赞数

文章标签： json xhtml

原文链接：http://www.cnblogs.com/hack-ing/p/5621462.html

版权

VQuery高级特性

css方法

同时设置多个--for in

链式操作

函数，链式操作

css 方法链式操作

json的使用

阻止冒泡，默认事件

VQuery插件

插件机制

可以扩展库的功能

extend

为VQuery添加方法

原型

实例

animate---动画

                else
                {
                    iCur=parseInt(getStyle(obj, attr));
                }
                
                //2.算速度
                var iSpeed=(json[attr]-iCur)/8;
                iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                
                //3.检测停止
                if(iCur!=json[attr])
                {
                    bStop=false;
                }
                
                if(attr=='opacity')
                {
                    obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                    obj.style.opacity=(iCur+iSpeed)/100;
                }
                else
                {
                    obj.style[attr]=iCur+iSpeed+'px';
                }
            }
            
            if(bStop)
            {
                clearInterval(obj.timer);
                
                if(fn)
                {
                    fn();
                }
            }
        }, 30)
    }
});

运动的的封装.js

<!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>
<style>
#div1 {width:100px; height:100px; background:red; filter:alpha(opacity: 30); opacity:0.3;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.7.1.js"></script>
<script>
$(function (){
    $('#div1').hover(function (){
        $(this).animate({width: '200px', height: '200px', opacity: 1});
    }, function (){
        $(this).animate({width: '100px', height: '100px', opacity: 0.3});
    });
});
</script>
</head>

<body>

运动的实例

drag---拖拽

$().extend('drag', function (){
    var i=0;
    
    for(i=0;i<this.elements.length;i++)
    {
        drag(this.elements[i]);
    }
    
    function drag(oDiv)
    {
        oDiv.onmousedown=function (ev)
        {
            var oEvent=ev||event;
            var disX=oEvent.clientX-oDiv.offsetLeft;
            var disY=oEvent.clientY-oDiv.offsetTop;
            
            document.onmousemove=function (ev)
            {
                var oEvent=ev||event;
                
                oDiv.style.left=oEvent.clientX-disX+'px';
                oDiv.style.top=oEvent.clientY-disY+'px';
            };
            
            document.onmouseup=function ()
            {
                document.onmousemove=null;
                document.onmouseup=null;
            };
        };
    }
});

vquery拖拽的封装

<!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>
<style>
div {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="VQuery.js"></script>
<script src="VQuery_drag.js"></script>
<script>
$(function (){
    $('div').drag();
});
</script>
</head>

<body>

拖拽的应用

转载于:https://www.cnblogs.com/hack-ing/p/5621462.html

weixin_30877755

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VQuery高级特性

VQuery高级特性css方法同时设置多个--for in 链式操作链式操作函数，链式操作 css 方法链式操作 json的使用阻止冒泡，默认事件VQuery插件插件机制可以扩展库的功能extend 为VQuery添加方法...
复制链接

扫一扫