这个控件时基于JQUERY开发的,所以要导入JQUERY包,把我写的控件代码放到一个js文件里面,然后引用,按照我的范例就可以使用了
-----控件代码
/*
让元素上下浮动的控件
options 参数介绍
options.top-》设置这个元素的top值
options.upPix-》设置这个元素向上移动的像素
options.downPix-》设置这个元素向下移动的像素
options.delay -》设置移动的速度
*/
$.fn.upDownControll = function(options) {
if (!(options && options instanceof Object)) {
options = new Object();
options.top = "100px";
options.upPix = "40px";
options.downPix = "40px";
options.delay = 2200;
}
var self = $(this);
var windowWidth = $(window).width(); //浏览器的宽度
var selfLift = (windowWidth - self.width()) / 2; //计算这个元素的left
if (options.left) {
selfLift = options.left;//如果用户给left那么就按用户设置的位置
}
self.css("position", "absolute");
self.css({ left: selfLift, top: options.top });
var up = function() {
self.animate({ top: "-=" + options.upPix }, options.delay, "", function() {
self.animate({ top: "+=" + options.downPix }, options.delay, "", function() { up(); });
});
};
up();
}
==========HTML代码
<div id="loginDiv" style="width:100px; height:100px;"></div>
---------JAVASCRIPT代码
$(function() {
options = new Object();
options.top = "300px";
options.upPix = "100px";
options.downPix = "100px";
options.delay = 500;
options.left = 100;
$("#loginDiv").upDownControll(options);
$(window).resize(function() {
$("#loginDiv").stop(); -----------------------//防止窗体改变大小,位置不是在原来的位置了
$("#loginDiv").upDownControll(options);
});
});
---------------------第二种方法,什么都不设置
$("#loginDiv").upDownControll();