jQuery浮窗图片到页面中间的代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jquery漂浮广告代码-jq22.com</title>

<script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<style>

</style>

</head>

<body>

<div id="imgDiv" style="position:absolute;left:50px;top:60px;">

    <div id="a" style="width:40px;height:40px;position:absolute;left:460px;background:salmon;text-align: center;"><font size="+3">×</font></div>

    <div style="width:700px;height:500px;"><img style="width:700px;height:500px;" src="./1.png"></div>

</div>

<script>

var xin = true,

    yin = true;

var step = ;

var delay = ;

var $obj;

$(function() {

    $obj = $("#imgDiv");

    var time = window.setInterval("move(imgDiv)", delay);

    $obj.mouseover(function() {

        clearInterval(time)

    });

    $obj.mouseout(function() {

        time = window.setInterval("move(imgDiv)", delay)

    });

});

 function move(divName){

        var top = ($(window).height() - $(divName).height())/;

        var left = ($(window).width() - $(divName).width())/;

        var scrollTop = $(document).scrollTop();

        var scrollLeft = $(document).scrollLeft();

        $(divName).css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();

    } 

$(function() {

    $("#a").click(function() {

        var b = $("#a").parent();

        $(b).remove();

    })

})

$("#imgDiv").draggable();

</script>

</body>

</html>

jQuery浮窗图片到页面中间的代码的更多相关文章

  1. jQuery浮窗图片到页面中间的代码兼容移动端

    jQuery浮窗图片到页面中间的代码兼容移动端 <!doctype html> <html> <head> <meta charset="utf-8 ...

  2. JQuery插件让图片旋转任意角度且代码极其简单 - 摘自网友

    JQuery插件让图片旋转任意角度且代码极其简单 2012-04-01 09:57:03     我来说两句      收藏    我要投稿 引入下方的jquery.rotate.js文件,然后通过$ ...

  3. JQuery插件让图片旋转任意角度且代码极其简单

    引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").r ...

  4. 使用jquery插件实现图片延迟加载技术（懒加载）

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  5. 如何解决谷歌浏览器下jquery无法获取图片的尺寸

    代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代码在IE和火狐中没 ...

  6. struts2+jsp+jquery+Jcrop实现图片裁剪并上传

    <1> 使用html标签上传需要裁剪的大图. <2> 在页面呈现大图,使用Jcrop(Jquery)对大图进行裁剪,并且可以进行预览. <3> 选择好截取部分之后发 ...

  7. Jquery+css实现图片无缝滚动轮播

    Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...

  8. 用jquery向网页添加背景图片 拉伸 模糊 遮罩层 代码

    方法一:手动添加 1.在body内任意位置添加html代码 <div id="web_bg" style=" position:fixed; _position:a ...

  9. jquery.lazyload.js图片延迟加载(懒加载)--转载

    一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...

随机推荐

  1. SAP 同一个序列号可以同时出现在2个不同的HU里？

    SAP 同一个序列号可以同时出现在2个不同的HU里? 答案是可以的. 如下图示,HU 180141003288里的序列号11810010540121, 而序列号11810010540121已经出现在另 ...

  2. 关于重学Linux的随笔

    毕业已有半年, 现在想想真的后悔, 大学没有认真学Linux, 导致现在Linux操作抓瞎, 连服务器都搭不起来. 下定决心重学Linux, 不追求能比上大佬, 但是要熟练, 常用命令要熟悉. 作为一 ...

  3. 09、日志轮转＋rsync同步

    logrotate   -  rotates,  compresses,  and    mails system logs 日志轮转 rotate 日志切割 轮转   切割   备份   归档 常见 ...

  4. 分母为0的坑(float)

    分母不能为0 对于int 类型,如果分母为0,在程序运行时,会报错. 而对于float 类型,如果分母为0,则不会报错,而是会返回一个infinity(无穷大),也就是NAN. 因为除一个无穷小的数, ...

  5. Everybody Dance Now

    一.摘要 作者提出了一种简单的动作迁移方法,实现了"do as I do":给定一个人跳舞的源视频,作者可以在目标对象表演标准动作的短短几分钟后,将该表演转移到一个新的(业余的)目 ...

  6. JS高阶---对象创建模式（5种）

    [前言] 函数高级部分先看到这里,接下里看下面向对象高级部分 .对象创建模式 .继承模式 [主体] (1)Object构造函数模式 案例如下: 测试结果如右图所示 (2)对象字面量形式创建 案例如下: ...

  7. c# 第12节 分支语句if、switch、三位运算符

    本节内容: 1:流程控制语句分类 2:分支语句之if的使用 3:分支语句之switch的使用 4:分支语句之三位运算符 5:分支语句比较 1:流程控5:制语句分类 2:分支语句之if 3:分支语句之s ...

  8. 201871010136-赵艳强《面向对象程序设计（java）》第四周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...

  9. 代码审计-strcmp比较字符串

    <?php $flag = "flag{xxxxx}"; if (isset($_GET['a'])) { if (strcmp($_GET['a'], $flag) == ...

  10. eclipse配置JDK和设置编译版本的几种方法

    eclipse配置JDK和设置编译版本的几种方法  2016-12-13 16:08             http://blog.csdn.net/gnail_oug/article/detail ...