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. i春秋-“百度杯”CTF比赛 十月场-Login

    源码发下提示 尝试登陆 得到个什么鬼, 但是相应包里发现个可疑的东西   //  CTF中的0 和1 这些一般都有套路的 然后在请求头里 改为 1 ##代码审计来了..   分析了半天 后来看了别人的 ...

  2. maven 学习---用Eclipse创建一个Maven Web项目

    下面是使用 Eclipse 来创建一个Maven Web项目的说明.这是相当简单的. 现在让我们开始吧! 1: 启动 Eclipse, 点击 File->New->Other 2: 在弹出 ...

  3. DjangoForm 提交验证

    用户提交数据的验证 1.创建模版 -- class LoginForm(forms.Form):.... 2.将请求交给模版,创建一个对象 -- obj = LoginForm(request.POS ...

  4. Spark之RDD

    Spark学习之路Spark之RDD 目录 一.RDD的概述 1.1 什么是RDD? RDD(Resilient Distributed Dataset)叫做弹性分布式数据集,是Spark中最基本的数 ...

  5. 2.4 Scala函数式编程

    一.函数定义与使用 1.函数的定义 2.匿名函数 举例: Scala自动推断变量类型,不用声明: 一个下划线只能表示这一个参数的一次出现 二.高阶函数 定义:函数定义的括号里仍然是个函数的函数,叫作高 ...

  6. git的使用(二)

    GITHUB 简介 github可以是全世界最大的同性交友网站,其实就是和百度云一个性质. gitHub于2008年4月10日正式上线,除了git代码仓库托管及基本的 Web管理界面以外,还提供了订阅 ...

  7. mybatis-config.xml 知识点

    typeAliases 标签:配置别名,主要用于 XML 文件中的 resultType 参数. mappers 标签:配置所有的 mapper. MyBatis 和 Spring Boot 配合使用 ...

  8. 莫烦TensorFlow_05 add_layer

    import tensorflow as tf import numpy as np def add_layer(inputs, in_size, out_size, activation_funct ...

  9. dateNode 启动不了

    dateNode 启动不了 进去路径中找到  name和data文件夹,current下面分别有 一个 version文件,打开发现两个clusterId都不一样 把name和data文件里面的ver ...

  10. luoguP2260 [清华集训2012]模积和

    题意 \(\sum\limits_{i=1}^{n}\sum\limits_{j=1}^{m}n\%i*m\%j*[i!=j]\) \(\sum\limits_{i=1}^{n}\sum\limits ...