js元素页面飘动

Html

Css

#img {
	position:absolute;
	background:url("bg.png") no-repeat;
	background-size:100% 100%;
	width:200;
	height:200;
}
#img img {
	width:100%;
	height:100%;
}

/*
 *   speed //元素移动速度
 *   xPos  //元素一开始左距离
 *   yPos  //元素一开始上距离
 *   $('#div1').imgFloat({speed:30,xPos:10,yPos:10});
 *   $('#div2').imgFloat();   //不给参数默认（speed:15,xPos:0,yPos:0）
 */

(function($) {

jQuery.fn.imgFloat = function(options) {
        var own = this;
        var xD = 0;
        var yD = 0;
        var i = 1;
        var settings = {
            speed: 15,
            xPos: 0,
            yPos: 0
        };
        jQuery.extend(settings, options);
        var ownTop = settings.xPos;
        var ownLeft = settings.yPos;
        own.css({
            position: "absolute",
            cursor: "pointer"
        });

//$("#img").imgFloat();   //不给参数默认（speed:10,xPos:0,yPos:0）
$("#img").imgFloat({
    speed: 15,
    xPos: 10,
    yPos: 10
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

js元素页面飘动



代码描述：模仿网页广告飘动效果，使元素在页面中自由飘动，达到页面边界及回弹

/*
* speed //元素移动速度
* xpos //元素一开始左距离
* ypos //元素一开始上距离
* $('#div1').imgfloat({speed:30,xpos:10,ypos:10});
* $('#div2').imgfloat(); //不给参数默认（speed:15,xpos:0,ypos:0）
*/
如有需要在模块中添加内容，在div#img里面添加相应的html代码即可
（另附：如需关闭按钮
在div#img中添加一个关闭的icon，可通过定位放在想要的位置
点击关闭icon，使$('div#img').css('display','none');即可
）

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

Dream

相关代码

js元素页面飘动

最新