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. 解决eclipse中maven多模块项目显示不全的问题

    背景:在eclipse中导入maven项目,后来发现有的子模块不能正常的显示出现 原因:没有加载到子模块的pom文件 解决方法:重新导入:import-> 勾选项目->选择你缺少的项目的p ...

  2. Python 大佬 的经典设计格言 ---- 铭记于心

    美丽优于丑陋.清楚优于含糊.简单优于复杂.复杂优于繁琐.平坦优于曲折.宽松优于密集.重要的是可读性.特殊的案例不足以特殊到破坏规则.尽管实践可以打破真理.错误却不可置之不理.除非另有明确要求.面对模棱 ...

  3. web-程序逻辑问题

    题目 查看源码 http://ctf5.shiyanbar.com/web/5/index.txt 代码如下 <html> <head> welcome to simplexu ...

  4. C#基础表达式语句详解（下）

    书接上文: 4.选择语句:if语句和switch语句 4.1If语句:statement:两种格式:A与B A:If(boolean-expression)embedded-statement(嵌入式 ...

  5. uiautomator 安装和升级

    1.打开uiautomator sdk安装路径 < tools < uiautomatorviewer.bat # 双击点开 2.升级uiautomator包 1.uiautomatorv ...

  6. Kubernetes 集群分析查看内存，CPU

    Kubernetes方式 top命令查看所有pod,nodes中内存,CPU使用情况 查看pod root @ master ➜ ~ kubectl top pod -n irm-server NAM ...

  7. 图学Kubernetes

    所有图片来自:Kubernetes Patterns: Reusable Elements for Designing Cloud-Native Applications 本文图片摘要曾经在某大厂内网 ...

  8. LG4782 「模板」2-SAT问题 2-SAT

    问题描述 LG4782 题解 对于一个限制条件,建边如下: 如果\(x,-x\)在同一个强联通分量里,则不行,否则可以 构造方案:输出\(bel_i<bel_{i+n}\) \(\mathrm{ ...

  9. 基于Intel OpenVINO的搭建及应用，包含分类，目标检测，及分割，超分辨

    PART I: 搭建环境OPENVINO+Tensorflow1.12.0 I: l_openvino_toolkit_p_2019.1.094 第一步常规安装参考链接:https://docs.op ...

  10. 数据结构——链栈（link stack）

    /* linkStack.c */ /* 链栈 */ #include <stdio.h> #include <stdlib.h> #include <stdbool.h ...