文档章节

jquery 漂浮图片广告代码 兼容 精简版.

pureboys
 pureboys
发布于 2014/06/22 13:51
字数 207
阅读 653
收藏 9
(function($){$.fn.floatAd=function(options){var defaults={imgSrc:"",url:"",openStyle:1,speed:10};var options=$.extend(defaults,options);var _target=options.openStyle==1?"target='_blank'":'';var html="<div id='float_ad' style='position:absolute;left:0px;top:0px;z-index:1000000;cleat:both;'>";html+="  <a href='"+options.url+"' "+_target+"><img src='"+options.imgSrc+"' border='0' class='float_ad_img'/></a>";html+="</div>";$('body').append(html);function init(){var x=0,y=0;var xin=true,yin=true;var step=1;var delay=10;var obj=$("#float_ad");obj.find('img.float_ad_img').load(function(){var float=function(){var L=T=0;var OW=obj.width();var OH=obj.height();var DW=$(document).width();var DH=$(document).height();x=x+step*(xin?1:-1);if(x<L){xin=true;x=L}if(x>DW-OW-1){xin=false;x=DW-OW-1}y=y+step*(yin?1:-1);if(y>DH-OH-1){yin=false;y=DH-OH-1}if(y<T){yin=true;y=T}var left=x;var top=y;obj.css({'top':top,'left':left})};var itl=setInterval(float,options.speed);$('#float_ad').mouseover(function(){clearInterval(itl)});$('#float_ad').mouseout(function(){itl=setInterval(float,options.speed)})})}init()}})(jQuery);
    
$(document).ready(function(){
        $(function(){
            $("body").floatAd({
                imgSrc : '图片地址',
                url:'链接地址'
            });
        })
});


本文转载自:http://hi.baidu.com/burnwing/item/065a5e872893d451e73d1956

共有 人打赏支持
pureboys
粉丝 11
博文 156
码字总数 11406
作品 0
青岛
程序员
jquery实现的让图片在网页的可视区域里四处漂浮的效果

  本文分享给大家一个用jquery开发的图片漂浮效果。 jquery图片漂浮效果,常见的就是网页里四处漂来漂去的广告了,漂到边缘时还会反弹和拐弯。 下面来看具体的代码,先看要实现漂亮效果的这...

乌云上
06/05
0
0
jQuery 1.7增加了对html5的支持

切图网(www.qietu.com)讯:jQuery最新版本添加了对html5的支持,发布的版 本号为jQuery1.7。 jQuery对我们来说一点也不陌生,作为一个第三发的js插件,影响程度居然影响了整个javascript书...

tyshymy
2012/02/06
0
0
手把手教你怎么写jQuery插件

[原创作品]手把手教你怎么写jQuery插件   这次随笔,向大家介绍如何编写jQuery插件。啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长。点击左边我头像下边的“加入qq群...

什么是程序员
2015/07/08
0
2
jQuery零基础入门——(一)初识jQuery

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,补充了个人的理解和日常遇到的点,主干出处来自廖雪峰老师的技术分享。 大家好,欢迎来到我们新的课程。应部分读者的要求,为满足...

JandenMa
06/29
0
0
artDialog原生版与jquery有什么区别

问题描述 下载完artDialog发现了很多文件,而且据说artDialog有原生版和jquery,这两个版本有什么区别,使用时有什么不同吗? 解答 在artDialog的首页说明中写道: 它的消息容器甚至能够根据...

justjavac
2012/07/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

spring只

一、IOC(Inversion of Control)或者依赖注入(Dependency Injection) 1、底层实现原理:反射 2、三大核心接口: BeanFactory:简单容器系列,只是实现了容器最基本的功能。 ApplicationC...

狠一点
1分钟前
0
0
缓存架构SpringBoot集成Curator实现zookeeper分布式锁

一、分布式锁简介 1、什么是锁 在单机环境下,当存在多个线程可以同时改变某个共享变量时,就需要同步来实现该功能,使其线程安全。 而同步就是通过锁来实现的。锁保证了同一时刻只有一个线程...

架构师springboot
2分钟前
0
0
11《Java核心技术》之Java提供了哪些IO方式? NIO如何实现多路复用?

一、提出问题 IO 一直是软件开发中的核心部分之一,伴随着海量数据增长和分布式系统的发展,IO 扩展能力愈发重要。幸运的是,Java 平台 IO 机制经过不断完善,虽然在某些方面仍有不足,但已经...

飞鱼说编程
10分钟前
0
0
简单介绍Java 的JAR包、EAR包、WAR包区别

WAR包 WAR(Web Archive file)网络应用程序文件,是与平台无关的文件格式,它允许将许多文件组合成一个压缩文件。War专用于Web方面。大部分的JAVA WEB工程,都是打成WAR包进行发布的。 War是...

linuxprobe16
10分钟前
0
0
55:Mysql用户管理|常用sql语句|mysql数据库备份恢复

1、Mysql用户管理; 场景,为了安全,新建的站点,创建新的用户,或者给已有用户授权,对某个库或者某个表有权限; 语法: grant all on *.* to 'user'@'127.0.0.1' identified by 'password'; g...

芬野de博客
14分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部