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="width:80%;margin:0px auto;z-index:9999">

    <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:80%;margin:0px auto;"><img style="width:90%; height:auto" src="1.jpg"></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的imagecropper插件做用户头像上传 兼容移动端

    在移动端开发的过程中,或许会遇到对图片裁剪的问题.当然遇到问题问题,不管你想什么方法都是要进行解决的,哪怕是丑点,难看点,都得去解决掉. 图片裁剪的jquery插件有很多,我也测试过很多,不过大多数都 ...

  5. jQuery实现等比例缩放大图片让大图片自适应页面布局

    通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种 ...

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

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

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

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

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

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

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

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

随机推荐

  1. linux 中断底半部机制对比（任务队列，工作队列，软中断）--由linux RS485引出的血案【转】

    转自:http://blog.chinaunix.net/uid-20768928-id-5077401.html 在LINUX RS485的使用过程中,由于各种原因,最后不得不使用中断底半部机制的方 ...

  2. 201871010126 王亚涛 《面向对象程序设计（Java）》第七周实验总结

    ---恢复内容开始--- 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com ...

  3. opencv局限：cv::FileStorage读取中，xml文件的第一层节点不能超过4个

    今天测试发现一个问题,cv::FileStorage读取中,xml文件的第一层节点不能超过4个. <?xml version="1.0"?> <opencv_st ...

  4. Virtualbox 修改硬盘的序列号等信息 例

    Virtualbox 修改硬盘的序列号等信息 例 http://blog.csdn.net/eidolon8/article/details/42709365 原创 2015年01月14日 14:24 ...

  5. （day46）DOM、BOM、事件

    目录 一.BOM (一)定义 (二)window对象 (三)window的子对象 (1)navigator对象 (2)screen对象 (3)history对象 (4)location对象 (5)弹出 ...

  6. matlab的clc,close,close all,clear,clear all命令

    clc:清除命令窗口的内容,对工作环境中的全部变量无任何影响 close:关闭当前的Figure窗口 close all:关闭所有的Figure窗口 clear:清除工作空间的所有变量 clear a ...

  7. EventBus事件总线（牛x版）

    事件总线: public interface IEventBus { void Trigger<TEvent>(TEvent eventData, string topic = null) ...

  8. ionic-环境搭建-入门

    环境搭建 1.官方推荐: npm install -g cordova ionic 使用npm国内安装小坑,下载慢,还是失败 2.先安装cnpm,使用淘宝镜像:: npm install -g cnp ...

  9. 初赛Part1

    计算机硬件 CPU CPU(中央处理器) = 运算器(ALC) + 控制器 + 寄存器, 主要任务是执行数据运算和程序控制. CPU的主要性能指标包括主频, 字长 ,高速缓存容量, 指令集等. 主频 ...

  10. Linux性能优化实战学习笔记：第三十五讲

    一.上节回顾 前面内容,我们学习了 Linux 网络的基础原理以及性能观测方法.简单回顾一下,Linux网络基于 TCP/IP 模型,构建了其网络协议栈,把繁杂的网络功能划分为应用层.传输层.网络层. ...