动态创建div(鼠标放上显示二维码)
最近的微信大行其道。各个网站上都给出的微信验证码,进行手机扫描加入。
怎么创建类似与点击鼠标弹出一个浮动的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(鼠标放上显示二维码)的更多相关文章
- 在iOS上实现二维码功能
http://blog.csdn.net/abcmx/article/details/8011904 如今二维码随处可见,无论是实物商品还是各种礼券都少不了二维码的身影.而手机等移动设备又成为二维码的 ...
- 显示二维码-智能TFT模块
应用范例: 使用 TOPWAY Smart LCD (HMT050CC-C) 显示二维码 第一步 建立工程 ① 开 Editor 软件, 点击菜单栏建立新工程File --> New Proje ...
- mac版微信web开发者工具(小程序开发工具)无法显示二维码 解决方案
微信小程序概念的提出,绝对可以算得上中国IT界惊天动地的一件大事,这可能意味着一场新的开发热潮即将到来, 我也怀着激动的心情准备全身心投入其中,不过截止目前,在官方网站上下载的最新版本都无法使用,打开 ...
- Node.js在指定的图片模板上生成二维码图片并附带底部文字说明
在Node.js中,我们可以通过qr-image包直接在后台生成二维码图片,使用方法很简单: var qr = require('qr-image'); exports.createQRImage = ...
- 【转】如何在您的PCB大作上添加二维码?
开篇先给大家来段新闻截选: “8月20日,新加坡总理李显龙在国庆群众大会上演讲时,称中国移动支付(电子支付)领先全球,新加坡的移动支付还很落后,上海路边摊都有移动支付,新加坡人去上海就像乡巴佬. 这番 ...
- 【转】mac版微信web开发者工具(小程序开发工具)无法显示二维码 解决方案
转自:https://www.cnblogs.com/stevenluo/p/6030445.html 微信小程序概念的提出,绝对可以算得上中国IT界惊天动地的一件大事,这可能意味着一场新的开发热 ...
- ESA2GJK1DH1K基础篇: 测试APP扫描Air202上面的二维码绑定通过MQTT控制设备(兼容SIM800)
前言 此程序兼容SIM800 如果想绑定SIM800,请把其IMEI号,生成二维码,用手机APP扫描. 实现功能概要 APP通过扫描二维码获取GPRS设备的IMEI号,然后设置订阅的主题:device ...
- ESA2GJK1DH1K微信小程序篇: 测试微信小程序扫描Air202上面的二维码绑定设备,并通过MQTT控制设备
前言 一,微信小程序篇小程序下载(该功能为小程序篇基础功能源码) 实现功能概要 微信小程序通过扫描GPRS上的二维码,绑定GPRS设备.然后使用小程序通过GPRS远程控制开发板上的继电器, 远程显示单 ...
- 如何在.NET上处理二维码
在移动设备,网站以及应用程序间传送数据,而使用二维码真是一种较快捷的方法,也避免了蓝牙配对的混乱状况.ZXing.NET是一个开源,多格式1D/2D条码图像处理库的C#实现,ZXing.NET是个相当 ...
随机推荐
- ACM二分查找模板
int main(){ == key int m; while ( l <= r ) { m = ( l + r ) >> 1; if ( x[m] == key ) return ...
- 数位dp总结 之 从入门到模板
转发自WUST_WenHao巨巨的博客 基础篇 数位dp是一种计数用的dp,一般就是要统计一个区间[le,ri]内满足一些条件数的个数.所谓数位dp,字面意思就是在数位上进行dp咯.数位还算是比较好听 ...
- dalvik.system.VMRuntime 隐藏api的迷惑
[Android UI界面]关于dalvik.system.VMRuntime 的 使用迷惑 我也遇到了相同问题.不知楼主现在解决了没有? 回答1: [Android UI界面]关于dalvik.sy ...
- rhel7安装oracle 11gR2
一.修改操作系统核心参数 在Root用户下执行以下步骤: 1)修改用户的SHELL的限制,修改/etc/security/limits.conf文件 输入命令:vi /etc/security/lim ...
- fullpagejs实现的拥有header和foooter的全屏滚动demo/fullpage footer
fullpagejs实现的拥有header和foooter的全屏滚动, 技术要点:给section元素加fp-auto-height类, <!DOCTYPE html> <html ...
- (6)《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记
1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距—— ...
- MTK处理器手机 解锁Bootloader 教程
目前很多手机都需要解锁Bootloader之后才能进行刷机操作 本篇教程教你如何傻瓜式解锁Bootloader 首先需要在设置-关于手机 找到版本号(个别手机可能是内核版本号,甚至其他) 然后 快 ...
- mac 下使用gcc 编译c函数
mac 终端其实和window 的cmd类似,由于mac 的os x 采用了unix 系统,所以,各种类似UNIX下的命令都有用.最近在看computer science ,用到了命令行. 下面是一个 ...
- 从0开始搭建SQL Server 2012 AlwaysOn 第三篇(安装数据,配置AlwaysOn)
这一篇是从0开始搭建SQL Server 2012 AlwaysOn 的第三篇,这一篇才真正开始搭建AlwaysOn,前两篇是为搭建AlwaysOn 做准备的 操作步骤: 1.安装SQL server ...
- vue小结1
(1)渐进式vue 构建用户界面的渐进式框架 只关注视图层 (2)vue中的两个核心点 响应的数据绑定:当数据发生改变时,自动更新视图 利用Object.definedProperty(该属性IE8不 ...