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高级特性的更多相关文章

  1. ActiveMQ中的Destination高级特性(一)

    ---------------------------------------------------------------------------------------- Destination ...

  2. Python3学习（二）-递归函数、高级特性、切片

    ##import sys ##sys.setrecursionlimit(1000) ###关键字参数(**关键字参数名) ###与可变参数不同的是,关键字参数可以在调用函数时,传入带有参数名的参数, ...

  3. 云端卫士实战录 | Java高级特性之多线程

    <实战录>导语 一转眼作为一名Java开发者已经四年多时间了,说长不长说短不短,对于java的感情还是比较深的,主要嘛毕竟它给了我饭吃.哈哈,开个玩笑.今天我想借此机会来和大家聊聊Java ...

  4. javascript高级特性

    01_javascript相关内容02_函数_Arguments对象03_函数_变量的作用域04_函数_特殊函数05_闭包_作用域链&闭包06_闭包_循环中的闭包07_对象_定义普通对象08_ ...

  5. Visual Studio 2015 速递（4）——高级特性之移动开发

    系列文章 Visual Studio 2015速递(1)——C#6.0新特性怎么用 Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力) Visual Studi ...

  6. Android TextView高级特性使用

    TextView一般都是用来显示一段文本,这里说的高级特性主要是一些我们平常不太常用的属性.包括文字阴影.自定义字体.html嵌入多格式.字体加粗.插入图片.这些特性平时开发APP的时候,可能一般使用 ...

  7. Python的高级特性8:你真的了解类,对象,实例,方法吗

    Python的高级特性1-7系列是本人从Python2过渡3时写下的一些个人见解(不敢说一定对),接下来的系列主要会以类级为主. 类,对象,实例,方法是几个面向对象的几个基本概念,其实我觉得很多人并不 ...

  8. Python的高级特性7:闭包和装饰器

    本节跟第三节关系密切,最好放在一起来看:python的高级特性3:神奇的__call__与返回函数 一.闭包:闭包不好解释,只能先看下面这个例子: In [23]: def outer(part1): ...

  9. Spring框架学习[IoC容器高级特性]

    1.通过前面4篇文章对Spring IoC容器的源码分析,我们已经基本上了解了Spring IoC容器对Bean定义资源的定位.读入和解析过程,同时也清楚了当用户通过getBean方法向IoC容器获取 ...

随机推荐

  1. 云服务程序在启动的时候执行Powershell脚本

    如果在云服务程序启动时候,需要执行Powershell脚本,我们需要将脚本嵌入到程序中,并且编写一个cmd来执行这个脚本,具体如下: 1.编写测试的Powershell脚本:每隔10分钟 检测dns ...

  2. Sublime Text 3065

    Package Control安装 安装方法:https://packagecontrol.io/installation 用Package Control安装插件 1.按下Ctrl+Shift+P调 ...

  3. ecshop 默认图处理

    function get_banner_path($img) { $img = empty($img) ? C('no_picture') : $img; return $img;}

  4. 扩展服务 修改新增Service的默认主题

    问题描述:想要在F:\PHPnow-1.5.6\htdocs\yt\Yourphp\Tpl\      目录下新增一个Service\Default(A)   和Service\new(B) 两个主题 ...

  5. HighCharts学习笔记(二)HighCharts结构及详细配置

    HighCharts结构及详细配置: 一.HighCharts整体结构: 通过查看API文档我们知道HighCharts结构如下:(API文档在文章后面提供下载) var chart = new Hi ...

  6. robots.txt的介绍和写作

    目前很多网站管理者似乎对robots.txt并没有引起多大重视,甚至不知道这么一个文件的作用.本来应该保密的信息被爬虫抓取了,公布在公网上,本应该发布到公网的信息却迟迟不被搜索引擎收录.所以下面这篇文 ...

  7. Effective Objective-C 2.0 — 第二章 对象、消息、运行期 - 第六条：理解“属性”这一概念

    开发者通过对象来 存储并传递数据. 在对象之间传递数据并执行任务的过程就叫做“消息传递”. 这两条特性的工作原理? Objective-C运行期环境(Objective-C runtime) ,提供了 ...

  8. jquery插件写法

    //传统写法 //全局方法 ;(function($){ $.method = function(){ } //or $.obj = { method1:function(){}, method2:f ...

  9. SpringMVC框架的工作原理

    学习SpringMVC的工作原理,首先有三个要解决的问题: (1)DispathcherServlet框架如何截获特定的HTTP请求,交由SpringMVC处理? (2)位于Web层的Spring容器 ...

  10. [MongoDB]对数组操作

    摘要 在实际开发中遇到更新某个document中的数组的值,这里做一下记录. 这里使用的驱动为 using MongoDB.Bson;using MongoDB.Driver; 相关文章 [Mongo ...