jQuery点击出现爱心特效
本文实例为大家分享了jQuery点击出现爱心特效的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>爱心效果</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<style type="text/css">
#love {
width: 30px;
height: 30px;
/*border: 1px solid red;*/
position: absolute;
}
#first {
width: 15px;
height: 26px;
background-color: red;
position: absolute;
right: 3.2px;
bottom: 0;
transform: rotate(45deg);
border-radius: 10px 10px 1px 1px;
opacity: 1;
}
#second {
width: 15px;
height: 26px;
background-color: red;
position: absolute;
left: 3.2px;
bottom: 0;
transform: rotate(-45deg);
border-radius: 10px 10px 1px 1px;
opacity: 1;
}
</style>
</head>
<body></body>
<script type="text/javascript">
function random(lower, upper) {
return Math.floor(Math.random() * (upper - lower)) + lower;
}
var body = document.getElementsByTagName("body")[0];
document.onclick = function(e) {
var num = random(0, 19);
// 颜色数组
var color = ["peru", "goldenrod", "yellow",
"chartreuse", "palevioletred", "deeppink",
"pink", "palegreen", "plum",
"darkorange", "powderblue", "orangered",
"orange", "orchid", "red",
"aqua", "salmon", "gold", "lawngreen"
]
var divmain = document.createElement("div");
var first = document.createElement("div");
var second = document.createElement("div");
// 给div加属性
divmain.setAttribute("id", "love");
divmain.setAttribute("class", "love");
first.setAttribute("id", "first");
second.setAttribute("id", "second");
// 向最外层内添加内层div
divmain.appendChild(first);
divmain.appendChild(second);
// 根据鼠标位置来确定div的位置
//divmain.style.top = e.pageY + "px";
//divmain.style.left = e.pageX + "px";
divmain.style.cssText = "top:" + e.pageY + "px;left:" + e.pageX + "px";
// 给心形div加随机颜色
first.style.backgroundColor = color[num];
second.style.backgroundColor = color[num];
body.appendChild(divmain);
$(".love").animate({
opacity: "0",
top: "-=50px"
}, 1500);
}
// 利用定时器来清除页面的垃圾
setInterval(function() {
var div = document.getElementsByClassName("love");
var len = div.length;
var num;
for(var i = len - 1; i >= 0; i--) {
num = parseInt(div[i].style.opacity);
if(num <= 0) {
div[i].remove();
}
}
}, 3500);
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
使用snowfall.jquery.js实现爱心满屏飞的效果
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 :after画两个重叠在一起的长方形,如图所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style medi
-
jQuery结合HTML5制作的爱心树表白动画
HTML代码如下: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <title>程序员用HTML5制作的爱心树表白动画- 柯乐义</title><base target="_blank" href="http
-
jquery+html5烂漫爱心表白动画代码分享
本文实例讲述了jquery+html5烂漫爱心表白动画代码.分享给大家供大家参考.具体如下: jquery+html5烂漫爱心表白动画是一款jquery html5 canvas电子版的烂漫爱心表白动画,效果相当不错,非常有创意,很适合进行表白. 运行效果图:----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery+html5烂漫爱心表白动画代码如下 <!DOC
-
jQuery点击出现爱心特效
本文实例为大家分享了jQuery点击出现爱心特效的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>爱心效果</title> <script type="text/javascript" src="jquery-3.2.1.
-
jquery点击缩略图切换视频播放特效代码分享
本文实例讲述了jquery点击缩略图切换视频播放特效.分享给大家供大家参考.具体如下: jquery点击缩略图切换视频播放是一款非常实用的播放代码,点击视频缩略图切换优酷视频播放的视频播放选项卡代码,支持flash视频切换选项卡. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery点击缩略图切换视频播放特效代码如下 <!DOCTYPE html
-
jQuery点击按钮弹出遮罩层且内容居中特效
本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devi
-
jQuery+CSS3文字跑马灯特效的简单实现
jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果图如下: 完整HTML代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=&
-
jQuery合作伙伴左右滚动特效
本文实例讲述了jQuery合作伙伴左右滚动特效,分享给大家供大家参考.具体如下: 一款基于jQuery合作伙伴左右滚动特效代码,是一款带左右箭头及自动滚动友情链接合作伙伴左右滚动网页特效,鼠标滑过停止自动滚动,鼠标离开自动滚动,点击左右按钮左右滚动Logo切换网页特效.可用于网站底部作为合作伙伴展示或友链展示的特效,是一款非常优秀的特效源码. 运行效果图:----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行
-
jQuery点击其他地方时菜单消失的实现方法
本文实例讲述了jQuery点击其他地方时菜单消失的实现方法.分享给大家供大家参考,具体如下: <script type="text/javascript"> function stopPropagation(e) { if (e.stopPropagation) e.stopPropagation();//停止冒泡 非ie else e.cancelBubble = true;//停止冒泡 ie } $(document).bind('click',function(){
-
jquery输入数字随机抽奖特效的简单实现代码
简介:jQuery自定义数值抽奖活动代码是一款点击开始按钮计算机会产生玩家输入范围内的随机数,点击停止按钮,将显示数字最终结果的效果. 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery自定义数值抽奖活动代码 - 我们</title><base target="_blank" /&g
-
jQuery实现TAB选项卡切换特效简单演示
本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery tab切换</title> <style type="text/css"> *{ margin:0; pad
-
javascript实现鼠标点击生成文字特效
前端实用脚本(鼠标点击生成文字特效) 你好! 这是你第一次写 博客 目的是为了记录常用到的技术知识以供同行参考学习和方便自己以后查阅 前言 最近在浏览一些博客的时候总是能够看到,当我点击鼠标的时候鼠标位置就会出现文字然后往上方浮动.当时比较好奇,然后空闲时间就去百度了一下这种效果是怎么实现的,然后结合一些博客整理了一下. 旧版本 1.单一的浮动效果 ,旧版本的只有一种颜色,比较单调: 2.没有遵循 : 可以run的demo才是好demo的原则 新版本 1.筛选了多种好看的颜色样式 2.复制代码到
-
js实现鼠标点击飘爱心效果
本文实例为大家分享了js实现鼠标点击飘爱心的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g