最近的微信大行其道。各个网站上都给出的微信验证码,进行手机扫描加入。

怎么创建类似与点击鼠标弹出一个浮动的div显示二维码的这种效果。

1.首先制作好这样的图片,写css样式

<style type="text/css">
#tip
{
position: absolute;
border: 1px solid #ccc;
display: none;
}
</style>

2.写javascript

    <script type="text/javascript">
$(function () {
$(function () {
var x = 10;
var y = 20;
$("#weixin").mouseover(function (e) {
var tip = "<div id='tip'><img src='images/0.jpg'/></div>";
$("body").append(tip);
$("#tip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" }).show("fast");
}).mouseout(function () {
$("#tip").remove();
}).mousemove(function (e) {
$("#tip").css({ "top": (e.pageY + y) + "px", "left": (e.pageX + x) + "px" });
});
})
})
</script>

3.写上标签,把标签的名字Id为weixin。

<span id="weixin" style="cursor:pointer">点击此处查看</span>

动态创建div(鼠标放上显示二维码)的更多相关文章

  1. 在iOS上实现二维码功能

    http://blog.csdn.net/abcmx/article/details/8011904 如今二维码随处可见,无论是实物商品还是各种礼券都少不了二维码的身影.而手机等移动设备又成为二维码的 ...

  2. 显示二维码-智能TFT模块

    应用范例: 使用 TOPWAY Smart LCD (HMT050CC-C) 显示二维码 第一步 建立工程 ① 开 Editor 软件, 点击菜单栏建立新工程File --> New Proje ...

  3. mac版微信web开发者工具(小程序开发工具)无法显示二维码 解决方案

    微信小程序概念的提出,绝对可以算得上中国IT界惊天动地的一件大事,这可能意味着一场新的开发热潮即将到来, 我也怀着激动的心情准备全身心投入其中,不过截止目前,在官方网站上下载的最新版本都无法使用,打开 ...

  4. Node.js在指定的图片模板上生成二维码图片并附带底部文字说明

    在Node.js中,我们可以通过qr-image包直接在后台生成二维码图片,使用方法很简单: var qr = require('qr-image'); exports.createQRImage = ...

  5. 【转】如何在您的PCB大作上添加二维码?

    开篇先给大家来段新闻截选: “8月20日,新加坡总理李显龙在国庆群众大会上演讲时,称中国移动支付(电子支付)领先全球,新加坡的移动支付还很落后,上海路边摊都有移动支付,新加坡人去上海就像乡巴佬. 这番 ...

  6. 【转】mac版微信web开发者工具(小程序开发工具)无法显示二维码 解决方案

    转自:https://www.cnblogs.com/stevenluo/p/6030445.html   微信小程序概念的提出,绝对可以算得上中国IT界惊天动地的一件大事,这可能意味着一场新的开发热 ...

  7. ESA2GJK1DH1K基础篇: 测试APP扫描Air202上面的二维码绑定通过MQTT控制设备(兼容SIM800)

    前言 此程序兼容SIM800 如果想绑定SIM800,请把其IMEI号,生成二维码,用手机APP扫描. 实现功能概要 APP通过扫描二维码获取GPRS设备的IMEI号,然后设置订阅的主题:device ...

  8. ESA2GJK1DH1K微信小程序篇: 测试微信小程序扫描Air202上面的二维码绑定设备,并通过MQTT控制设备

    前言 一,微信小程序篇小程序下载(该功能为小程序篇基础功能源码) 实现功能概要 微信小程序通过扫描GPRS上的二维码,绑定GPRS设备.然后使用小程序通过GPRS远程控制开发板上的继电器, 远程显示单 ...

  9. 如何在.NET上处理二维码

    在移动设备,网站以及应用程序间传送数据,而使用二维码真是一种较快捷的方法,也避免了蓝牙配对的混乱状况.ZXing.NET是一个开源,多格式1D/2D条码图像处理库的C#实现,ZXing.NET是个相当 ...

随机推荐

  1. java String, StringBuffer ,StringBulider 区别

    1. String 是不可变的(immutable): 创建后不能修改: 2. StringBuffer 线程安全的,可变字符串: 3. StringBuilder 线程不安全,所以性能比较高

  2. [POI2008]KUP

    Description 给一个\(n\times n\)的地图,每个格子有一个价格,找一个矩形区域,使其价格总和位于[k,2k] Input 输入k n(n<2000)和一个\(n\times ...

  3. 转: ORA-06508 could not find program unit being called: "DBSNMP.BSLN_INTERNAL

    告警日志中出现错误 Sun Jul 28 00:00:00 2013Errors in file /oracle/app/db/diag/rdbms/mis/MIS1/trace/MIS1_j001_ ...

  4. 415 Add Strings 字符串相加

    给定两个字符串形式的非负整数 num1 和num2 ,计算它们的和.注意:    num1 和num2 的长度都小于 5100.    num1 和num2 都只包含数字 0-9.    num1 和 ...

  5. AJPFX关于异常和file类的总结

    /** * 各位坛友注意啦!对我这个帖子有任何的疑惑的,可以尽管留帖提问,我会在看到的第一时间回贴,既然写得出这帖子,* 就要对看这帖子的人负责,所以有问题,尽管问!* * * 这块没学好的同学,可以 ...

  6. Android开发中使用startActivityForResult()方法从Activity A跳转Activity B出现B退出时A也同时退出的解决办法

    最近一个 App 中用到了 startActivityForResult() 方法,使用的时候却出现了一些问题,比如我在 Activity A 中调用该方法向 Activity B 中跳转,如果 B  ...

  7. SQL将查询出来的多列的值拼接成一个字符串

    -- 单列拼接,先查出一行,再加上逗号,接着拼接 查出的下一行 SELECT GROUP_CONCAT(user_id) FROM user; -- result 160,160,160,196 -- ...

  8. rabbitmq在storm中使用

    storm中只能进行任务计算,不能保存中间结果,最后结果. 这就有一个需求,保存计算结果,最好还是分布式的,因为storm也是分布式,大数据计算. 流行的分布式计算中使用队列保存数据居多. kafka ...

  9. GA详解

    转:http://blog.csdn.net/u010451580/article/details/51178225 本文是去年课题组周报中的一个专题讲解,详细讲了GA,由于是周报,所以十分详细.很适 ...

  10. 针对windowsserver 创建iis站点访问出错的解决方案(HTTP 错误 500.19 - Internal Server Error)

    错误如下:   服务器错误 Internet信息服务 7.0 错误摘要HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效. 详 ...