点击弹出 +1放大效果 -- jQuery插件
20140110更新：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>提示插件</title>
<style>
body {margin:;padding:;font:12px/18px arial;color:#;}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
/**
* Created by 磊 on 14-1-9.
*/
;(function($){
$.fn.extend({
tipsbox: function(options) {
options = $.extend({
str: "+1",
startSize: "14px",
endSize: "40px",
interval: ,
color: "red",
style: "",
callback: function() {}
}, options); $("body").append("<span class='tips_box' style='"+ options.style +"'>"+ options.str +"</span>");
var box = $(".tips_box");
var self = $(this);
var top = self.offset().top;
var left = self.offset().left + self.width() / - box.width() / ;
//alert(layer.width());
box.css({
"position": "absolute",
"top": top,
"left": left,
"font-size": options.startSize,
//"font-weight": "bold",
"color": options.color
});
box.animate({
"top": top - self.height() / ,
"opacity": ,
"font-size": options.endSize
}, options.interval, function() {
box.remove();
options.callback();
});
}
});
})(jQuery);
</script>
</head>
<body> <p style="padding:100px;"><input id="btn" type="button" value="点击" style="width:100px;height:34px;font-size:16px;border:none;background-color:#f6f6f6;border:1px solid #ddd;border-radius:3px;color:#666;font-family:Microsoft YaHei;cursor:pointer;outline:none;"/></p> <script>
$(function() {
$('#btn').click(function() {
$('#btn').tipsbox({
style: 'font-weight:bold;',
callback: function() {
//alert("fuck");
}
});
});
});
</script> </body>
</html>
20140107更新：
最近工作的项目中，需要这样的功能，最初写了函数，满足不了需求，so。。。封装成了插件，考虑到几种情况，传递给一个元素，弹窗会出现在这个元素的位置。可以设置字体大小、颜色什么的。。最初文字大小、结束文字大小，动画完成时间等等。。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击弹出 +1放大效果 -- jQuery插件</title>
<style type="text/css">
body {margin:; padding:;font:12px/1.5 arial; color:#3E3E3E;}
p {margin-bottom:80px;}
#btn {width:90px;height:36px;border:none;background-color:#;color:#fff;font-size:14px;font-family:Microsoft YaHei;cursor:pointer;}
</style>
</head>
<body> <p> </p>
<p> </p>
<p> </p> <p style="text-align:center;"><button id="btn">点击我</button></p>
<p> </p>
<p> </p> <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script>
;(function($) {
$.extend({
tipsBox: function(options) {
options = $.extend({
obj: null, //jq对象，要在那个html标签上显示
str: "+1", //字符串，要显示的内容;也可以传一段html，如: "<b style='font-family:Microsoft YaHei;'>+1</b>"
startSize: "12px", //动画开始的文字大小
endSize: "30px", //动画结束的文字大小
interval: , //动画时间间隔
color: "red", //文字颜色
callback: function() {} //回调函数
}, options);
$("body").append("<span class='num'>"+ options.str +"</span>");
var box = $(".num");
var left = options.obj.offset().left + options.obj.width() / ;
var top = options.obj.offset().top - options.obj.height();
box.css({
"position": "absolute",
"left": left + "px",
"top": top + "px",
"z-index": ,
"font-size": options.startSize,
"line-height": options.endSize,
"color": options.color
});
box.animate({
"font-size": options.endSize,
"opacity": "",
"top": top - parseInt(options.endSize) + "px"
}, options.interval , function() {
box.remove();
options.callback();
});
}
});
})(jQuery);
</script> <script>
$(function() {
$("#btn").click(function() {
$.tipsBox({
obj: $(this),
str: "+998",
callback: function() {
//alert(5);
}
});
});
});
</script> </body>
</html>
其实很简单，就文字不断的增大的同时，透明度慢慢减小。。。。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>+</title>
</head> <body> <input type="button" value="狠狠的点我" id="btn" style="width:100px;margin:100px;" onclick="numPop(event, '+10');">
<input type="button" value="点我" id="btn" style="width:100px;margin:100px;" onclick="numPop(event, '+100分');"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function numPop(event, str){
var html = '<div id="pop_num">'+ str +'</div>';
$('body').append(html);
$('#pop_num').css({
'position': 'absolute',
'top': event.pageY + 'px',
'left': event.pageX + 'px',
'font-size': '20px',
'color': '#f30'
}); $('#pop_num').animate({
'font-size': '150px',
'opacity': ''
},'slow', function(){
$(this).remove();
});
}
</script> </body>
</html>
在写这个效果的时候，遇到一个问题，我最初是这样写的:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>+</title>
</head> <body> <input type="button" value="狠狠的点我" id="btn" style="width:100px;margin:100px;"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function(e){
var html = '<div id="pop_num">+1</div>';
$('body').append(html);
$('#pop_num').css({
'position': 'absolute',
'top': e.pageY + 'px',
'left': e.pageX + 'px',
'font-size': '20px',
'color': '#f30'
}); $('#pop_num').animate({
'font-size': '150px',
'opacity': ''
},'slow', function(){
$(this).remove();
});
});
});
</script> </body>
</html>
这样很容易就实现我需要的效果，但是考虑的程序中，可能不是每次都是 +1， 也可能是+10，所以要封装成函数，把想要的弹出的字符串当成参数传递给函数，于是我又这样写：
<input type="button" value="狠狠的点我" id="btn" style="width:100px;margin:100px;" onclick="numPop('+10');">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function numPop(str, e){
var html = '<div id="pop_num">'+ str +'</div>';
$('body').append(html);
$('#pop_num').css({
'position': 'absolute',
'top': e.pageY + 'px',
'left': e.pageX + 'px',
'font-size': '20px',
'color': '#f30'
});
$('#pop_num').animate({
'font-size': '150px',
'opacity': ''
},'slow', function(){
$(this).remove();
});
}
</script>
但是，却出错了，没能实现效果，问了一下QQ群里的同行，发现我两个地方写错了。。
首先，function numPop(str, e) 这个地方应该修改成 function numPop(event, str), event必须作为第一个参数，只能写成event，不能写成e、ev或者其他的；
其次，调用的时候，应该这么调用 onclick="numPop('event, +10');" 那个event也要写上。。
苍天啊，大地啊，这么简单的问题，我居然。。。
点击弹出 +1放大效果 -- jQuery插件的更多相关文章
- 基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type=" ...
- jQuery第二课 点击弹出一个提示框
选择器允许您对元素组或单个元素进行操作. jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元 ...
- jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...
- jQuery之点击弹出图标环形菜单
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- jQuery点击弹出层，弹出模态框，点击模态框消失
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块，点击弹出图片，并左右滚动幻灯片
1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- Javascript实现图片点击弹出
一直想给安装一个缩略图点击弹出的插件,但是找了找几乎都是用的php来做的,插件的使用和安装极其繁琐,于是上网查了些demo,自己实现了一个纯js的图片弹出插件. 实现的思路是通过编写hook图片的on ...
- jquery easyui 弹出消息框 (转载) jQuery EasyUI API 中文文档 - 消息框（Messager） http://www.cnblogs.com/hantianwei/archive/2012/03/19/2407113.html
<html> <head> <!-- 导入easyui插件的js和css样式; --> <link rel="stylesheet" ty ...
- jquery---点击弹出层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- JS备忘录
/** *删除数组指定下标或指定对象 */ Array.prototype.remove = function (obj) { for (var i = 0; i < this.length; ...
- 团队项目--站立会议 DAY4
小组名称:D&M 参会人员:张靖颜,钟灵毓秀,何玥,赵莹,王梓萱 项目进展: 1.张靖颜:筛选完元素后,把昨天优化完的再进行测试,进行进一步的检验.对于钟灵毓秀和赵莹同学编写的代码进行进一步审 ...
- [C++] socket -8 [命名管道]
::命名管道不但能实现同一台机器上两个进程通信,还能在网络中不同机器上的两个进程之间的通信机制.与邮槽不同,命名管道是采用基于连接并且可靠的传输方式,所以命名管道传输数据只能一对一进行传输. /* 命 ...
- Java并行程序设计模式小结
这里总结几种常用的并行程序设计方法,其中部分文字源自<Java程序性能优化>一书中,还有部分文字属于个人总结,如有不对,请大家指出讨论. Future模式 一句话,将客户端请求的处理过程从 ...
- SONATYPE NEXUS搭建MAVEN私服
1.为什么使用Nexus如果没有私服,我们所需的所有构件都需要通过maven的中央仓库和第三方的Maven仓库下载到本地,而一个团队中的所有人都重复的从maven仓库下载构件无疑加大了仓库的负载和浪费 ...
- [读书笔记]C#学习笔记三: C#类型详解..
前言 这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...
- Atitit..文件上传组件选型and最佳实践总结(3)----断点续传控件的实现
Atitit..文件上传组件选型and最佳实践总结(3)----断点续传控件的实现 1. 实现思路:::元插件,元设置... 1 2. 实现流程downzip,unzip,exec 1 3. Zip ...
- html-css样式表
一.CSS:Cascading Style Sheet—层叠样式表,其作用是美化HTML网页. 样式表分类:内联样式表.内嵌样式表.外部样式表 1.内联样式表 和HTML联合显示,控制精确,但是可重用 ...
- 每天一个linux命令（7）：mv命令
mv命令是move的缩写,可以用来移动文件或者将文件改名(move (rename) files),是Linux系统下常用的命令,经常用来备份文件或者目录. 企业中常用的 [root@ local]# ...
- Leetcode 27 Remove Element STL
和remove zero类似的方法完成该题 class Solution { public: int removeElement(vector<int>& nums, int va ...