本文分享给大家一个用jquery开发的图片漂浮效果。

jquery图片漂浮效果,常见的就是网页里四处漂来漂去的广告了,漂到边缘时还会反弹和拐弯。

下面来看具体的代码,先看要实现漂亮效果的这个jquery插件的源码:

(function($){
$.fn.adFloat=function(options){
return new AdFloat(this,options);
}
var AdFloat=function(element,options){
this.element=$(element);
this.options=$.extend({
width:100, //默认的广告的宽
height:150, //默认的广告的高
top:0, //默认的广告的Y坐标
left:0, //默认的广告的X坐标
delay:30, //延迟
step:4 //默认的广告每次移动的距离(像素)
},options);
this.interval=null;
this.xPos=this.options.left;
this.yPos=this.options.top;
this.yon=0;
this.xon=0;
this.isPause=false;
this.init();
};
AdFloat.prototype={
init:function(){
var me=this;
me.element.css("display","block");
me.element.css({position:"absolute",left:me.options.left,top:me.options.top,width:me.options.width,height:me.options.height,overflow:"hidden"})
me.element.hover(function(){clearInterval(me.interval)},function(){me.interval=setInterval(function(){me.changePos();},me.options.delay);});
$(document).ready(function(){me.start();});
},
changePos:function(){
var me=this;
var clientWidth=$(window).width();
var clientHeight=$(window).height();
var Hoffset=me.options.height;
var Woffset=me.options.width;
me.element.css({left:me.xPos+$(document).scrollLeft(),top:me.yPos+$(document).scrollTop()});
if(me.yon){
me.yPos=me.yPos+me.options.step;
}else{
me.yPos=me.yPos-me.options.step;
}
if(me.yPos<0){me.yon=1;me.yPos=0;}
if(me.yPos>=(clientHeight-Hoffset)){me.yon=0;me.yPos=(clientHeight-Hoffset);}
if(me.xon){
me.xPos=me.xPos+me.options.step;
}else{
me.xPos=me.xPos-me.options.step;
}
if(me.xPos<0){me.xon=1;me.xPos=0;}
if(me.xPos>=(clientWidth-Woffset)){me.xon=0;me.xPos=(clientWidth-Woffset);}
},
start:function(){
var me=this;
me.element.css("top",me.yPos);
me.interval=setInterval(function(){me.changePos();},me.options.delay);
}
}
})(jQuery);

要使用的时候,也是非常简单的:

$(function(){
$("#aijquery").adFloat({width:161,height:55,top:0,left:0})
});

jquery实现的让图片在网页的可视区域里四处漂浮的效果的更多相关文章

  1. js获取网页屏幕可视区域高度

    document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...

  2. jQuery中获取文档的高度、可视区域高度以及滚动条距页面顶部的高度

    在写页面的时候,经常会碰到这样的情况,就是要获取文档的高度.可视区域高度或者滚动条距页面顶部的高度等情况. 但我总是有些爱搞混淆了,这里还是简单做个笔记吧,这里只限于使用jQuery来获取. 1.获取 ...

  3. 图片懒加载--判断div ul中的li是否已经滑动到可视区域里

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. 【转载】实用的Javascript获取网页屏幕可见区域高度

    本文转载原地址:这里 document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 docu ...

  5. js获取网页屏幕可见区域高度

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  6. [js]获取网页屏幕可见区域高度

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  7. 实用的Javascript获取网页屏幕可见区域高度

    本文转载原地址:这里 document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 docu ...

  8. jQuery背景跟随鼠标移动的网页导航

    首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search     首页 PSD模板 CSS模板 特效插件 ...

  9. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

随机推荐

  1. 记开发个人图书收藏清单小程序开发(六)Web开发

    Web页面开发暂时是没有问题了,现在开始接上Ptager.BL的DB部分. 首先需要初始化用户和书房信息.因为还没有给其他多余的设计,所以暂时只有个人昵称和书房名称. 添加 Init Razor Pa ...

  2. 兼容性测试中如何切换和管理多个JDK版本

    本文由作者邹珍珍授权网易云社区发布. 一.测试背景: 项目对外提供JAR包,需要测试该JAR包对不同JDK版本(1.6至1.9版本)的兼容性.下面主要介绍在兼容性测试中,JDK多版本共存时如何配置环境 ...

  3. Exp2 后门原理与实践 20164323段钊阳

    220164323 Exp2 后门原理与实践 (1)例举你能想到的一个后门进入到你系统中的可能方式?在使用盗版软件,盗版系统,甚至游戏外挂时,往往会让我们关闭杀毒软件,.(2)例举你知道的后门如何启动 ...

  4. Verify the Developer App certificate for your account is trusted on your device.

    1.报错内容 Could not launch "CH5203" Verify the Developer App certificate for your account is ...

  5. “全栈2019”Java异常第十四章:将异常输出到文本文件中

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  6. Net Manager测试连接测试没有成功,用户权限问题,以管理员身份运行后测试成功

    Net Manager测试连接测试没有成功,截图如下:

  7. 根据IP获取IP定位

    http://ip.taobao.com/service/getIpInfo.php?ip=27.17.60.152 {,"}} 不确定是否有次数限制

  8. Qt5学习笔记(消息过滤器)

    T06EventFilter.pro HEADERS += \ MyWidget.h SOURCES += \ MyWidget.cpp QT += widgets gui MyWidget.h #i ...

  9. sql注入实例详解(二)

    前言 这篇文章就是一个最基本的SQl手工注入的过程了.基本上在sqlilabs上面的实验,如果知道了其中的全部知识点,都可以通过以下的步骤进行脱裤.下面的这个步骤也是其他的脱裤手段的基础.如果想要精通 ...

  10. mongodb主从备份 和 手动主从切换

    环境: 主机A:172.16.160.91 主机B:172.16.160.92 配置主机A [root@master zhxf]# cat docker-compose.yml version: '3 ...