jquery实现的一个网页飘窗小插件
来源:互联网 发布:js 重力感应 全景 编辑:程序博客网 时间:2024/05/16 08:12
页面结构及测试代码:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>test</title> <!-- 引入jquery脚本库,必须 --> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <style type="text/css"> /* 给飘窗添加一些基础样式,如宽度,高度和背景颜色等等 */ .automv{width: 200px;height: 200px;background-color: blue;} </style> </head> <body> <!-- 飘窗元素 --> <div class="automv"></div> <script type="text/javascript"> //定义插件 !function($){ /** * Description: jquery飘窗插件,可自适应浏览器宽高的变化 * Author: YZCS * CreateTime: 2015-04-25 * param: args={startL:default, startT:default, angle:-Math.PI/4, speed: 125} * 参数说名: startL飘窗初始时距离左边的距离, startT飘窗初始化距离顶部的距离, angle飘窗初始运动方向, speed运动速度(px/s) * CopyRight: GPL */ $.fn.autoMove = function(args){ //先定义一些工具函数判断边距 function isTop(pos, w_w, w_h, d_w, d_h){//飘窗到达上边距 if(pos.top<=0){ return true; }else{ return false; } } function isBottom(pos, w_w, w_h, d_w, d_h){//飘窗到达下边距 if(pos.top>=(w_h-d_h)){ return true; }else{ return false; } } function isLeft(pos, w_w, w_h, d_w, d_h){//飘窗到达左边距 if(pos.left<=0){ return true; }else{ return false; } } function isRight(pos, w_w, w_h, d_w, d_h){//飘窗到达右边距 if(pos.left>=(w_w-d_w)){ return true; }else{ return false; } } return this.each(function(){ var w_w = parseInt($(window).width()), w_h = parseInt($(window).height()), d_w = parseInt($(this).width()), d_h = parseInt($(this).height()), d_l = (w_w-d_w)/2, d_t = (w_h-d_h)/2, max_l = w_w - d_w; max_t = w_h - d_h; //位置及参数的初始化 var setobj = $.extend({startL:d_l, startT:d_t, angle:Math.PI/4, speed:100}, args); $(this).css({position: 'absolute', left: setobj['startL']+'px', top: setobj['startT']+'px'}); var position = {left: setobj['startL'], top: setobj['startT']};//飘窗位置对象 var that = $(this); var angle= setobj.angle; var time = 10;//控制飘窗运动效果,值越小越细腻 var step = setobj.speed * (time/1000);//计算运动步长 var decoration = {x:step*Math.cos(angle), y:step*Math.sin(angle)};//计算二维上的运动增量 var mvtid; $(window).on('resize', function(){//窗口大小变动时重新设置运动相关参数 w_w = parseInt($(window).width()), w_h = parseInt($(window).height()), max_l = w_w - d_w; max_t = w_h - d_h; }); function move(){ position.left += decoration.x; position.top += decoration.y; if(isLeft(position, w_w, w_h, d_w, d_h)||isRight(position, w_w, w_h, d_w, d_h)){ decoration.x = -1*decoration.x; } if(isRight(position, w_w, w_h, d_w, d_h)){ position.left = max_l; } if(isTop(position, w_w, w_h, d_w, d_h)||isBottom(position, w_w, w_h, d_w, d_h)){ decoration.y = -1*decoration.y; } if(isBottom(position, w_w, w_h, d_w, d_h)){ position.top = max_t; } //that.css({left:position.left, top:position.top}); that.animate({left:position.left, top:position.top}, time);//改用jquery动画函数使其更加平滑 mvtid = setTimeout(move, time);//递归调用,使飘窗连续运动 } move();//触发动作 that.on('mouseenter', function(){ clearTimeout(mvtid) });//添加鼠标事件 that.on('mouseleave', function(){ move() }); }); }//end plugin definition }(jQuery); </script> <script type="text/javascript"> //测试插件 $('.automv').moveAuto({angle:-Math.PI/4, speed:120}); </script> </body></html>
0 0
- jquery实现的一个网页飘窗小插件
- 一个轻量级的网页遮罩层jQuery插件
- 一个轻量级的网页遮罩层jQuery插件
- 一个解说jquery弹出框插件很好的网页
- 简单的一个jquery实现网页tab功能
- jQuery实现圆角形状的一个插件
- zTree 一个依靠 jQuery 实现的多功能 “树插件”
- BookBlock:一个实现翻页效果的jQuery插件
- jOrgchart是一个用来实现组织结构图的jquery插件
- xSwitchable 一个普通的网页元素切换Jquery插件。[Tabs | Slide | Carousel | Accordion]
- JQuery的一个Highlight插件
- jquery的一个消息插件
- jquery实现的网页计数器
- jquery实现漂浮在网页右侧的qq在线客服插件
- 一个帮助你实现pinterest页面布局的jQuery插件 - jQuery.Shapeshift
- jQuery插件的实现框架
- jquery/js实现一个网页同时调用多个倒计时(最新的)
- jQuery的i18n插件的一个限制
- maven依赖本地非repository中的jar包
- Java强引用、软引用、弱引用、虚引用详解
- 生成MQTT Java开发包
- Type enforcement(类型强制访问控制)
- 环境配置问题与解决方案:如何开机进入CentOS 6.6 的文本模式
- jquery实现的一个网页飘窗小插件
- android Application类的详细介绍,了解内存溢出可以看看
- Session Cookies Cache 的区别
- 第八周项目2——time类中的运算符重载
- Xcode报错"The working copy 'xxx' has uncommitted changes"解决方案
- UnicodeEncodeError
- msf生成payload过滤
- ThinkPHP连接mongo的奇异现象
- 二叉树中序遍历的非递归方法