VQuery高级特性

时间：2016-06-27 21:31:02 阅读：540 评论：0 收藏：0 [点我收藏+]

标签：

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>

拖拽的应用

VQuery高级特性

标签：

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

踩

(1)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行