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. SAP 公司间STO场景中外向交货单过账后自动触发内向交货单功能的实现

    SAP 公司间STO场景中外向交货单过账后自动触发内向交货单功能的实现 如下STO,是从公司代码SZSP转入CSAS, 如下图示的内向交货单180018660.该内向交货单是在外向交货单8001632 ...

  2. SAP MM 公司间STO里外向交货单与内向交货单里序列号对应关系

    SAP MM 公司间STO里外向交货单与内向交货单里序列号对应关系 笔者所在的A项目,后勤模块里有启用HU管理,序列号管理,批次管理等功能,以实现各个业务场景下的追溯. 公司间转储订单流程里,如果是整 ...

  3. Try-Catch-Finally语句块执行问题

    Try-Catch-Finally语句块执行问题 记录一个今天某公司的面试问题,其实我问题回答对了,但是面试官问我动手验证过没有,这还真没有,纯理论,被怼惨了,希望自己能变得更强大. Try-Catc ...

  4. Jenkins的CI持续集成

    Jenkins的CI持续集成 全局配置 系统管理->全局工具配置,配置Git,JDK和Maven 1)解压maven到当前目录 tar zxf apache-maven-3.5.4-bin.ta ...

  5. GCN实现3

    参考 : 首先看两篇论文,大概了解一下原理性的东西: GRAPH CONVOLUTIONAL NETWORKS THOMAS KIPF, 30 SEPTEMBER 2016 http://tkipf. ...

  6. Linux 读写锁

    线程的读写锁函数: 1,读写锁的初始化与销毁,静态初始化的话,可以直接使用PTHREAD_RWLOCK_INITIALIZER. #include <pthread.h> int pthr ...

  7. odoo10学习笔记十：Actions

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/11189319.html actions定义了系统对于用户的操作的响应:登录.按钮.选择项目等. 一:窗口ac ...

  8. ubuntu 用户名配置及磁盘挂载

    创建用户 我们创建的这个用户要放到 sudo 用户组,以便于我们可以执行一些需要 root 权限的操作. sudo useradd -m -s /bin/bash username sudo user ...

  9. 如何解决问题：程序无法正常启动(0xc0000022)

    如何解决问题:程序无法正常启动(0xc0000022) 下文是由NeoSmart技术,通过全球网络上的工程师开发者和技术人员一起收集起来的信息,进行汇总并编辑而成的. 错误现象 该错误一般会通过警告, ...

  10. AssetBundleMaster_ReadMe_CN

    在开始使用之前, 建议先导入到一个空的工程里, 通过ReadMe的一步步引导使你对整个框架以及文件结构进行熟悉, 之后再考虑导入到现有工程中使用, 完整看完教程大概需要2个小时左右. 先看看文件夹结构 ...