小案例之点击网页任意位置出现小爱心

本文用到了事件中的onclick事件和一些css属性

window.onload = function(){

document.οnclick=function loveHeart(a){//添加点击事件

var div0 = document.createElement("div");//创建爱心的最外层父元素

var heartList = ["heartLeft","heartRight"];//创建爱心需要的两个div名称的数组

div0.style.left = a.clientX-45+"px";//获取当前点击的页面位置的横坐标

div0.style.top = a.clientY-45+"px";//获取当前点击的页面位置的纵坐标

div0.style.position = "absolute";

Object.assign(div0.style,{//设置父元素的样式

width:"90px",

height:"90px"

});

createHeart(div0);

document.body.appendChild(div0);//将div0放在body中

//创建爱心所需要的两个div以及设置其样式

function createHeart(parent){

for(var i = 0;i<heartList.length;i++){//for循环创建两个div以及为其设置样式

var div = document.createElement("div");

Object.assign(div.style,{

width:"50px",

height:"75px",

backgroundColor: "red",

borderTopLeftRadius:"50% 25px",//为左侧div设置左上角的圆角边框以及偏移距离

borderTopRightRadius:"50% 25px",//为左侧div设置右上角的圆角边框以及偏移距离

position:"absolute",

left:i === 0 ? "11px" : "29px",//利用三目运算符可以有效的简化代码

top: "0px",

transform:i === 0 ? "rotate(-45deg)" : "rotate(45deg)"//将两个子div旋转

});

parent.appendChild(div);//将两个子div放到父div中

}

</script>

小案例之点击网页任意位置出现小爱心相关推荐

HTML小案例-使用CSS3实现网页加载loding动画
HTML小案例-使用CSS3实现网页加载loding动画话不多说先看效果 ** 以下为源代码 ** <!DOCTYPE html> <html lang="zh-CN&q ...
Freemarker入门小案例（生成静态网页的其中一种方式）
其实生成静态网页的方式有好多种,我昨天看了一下,Freemarker是其中一种,但是Freemarker现在我们都用得比较少了,现在用得ActiveMQ用来发送信息到静态页面,不过想了一下这个小东西, ...
jQuery——小案例：点击图片放大缩小
需求: HTML中有三张图片: 如果图片处于"大"状态,则点击图片可以缩小. 如果图片处于"小"状态,则点击图片可以放大. 代码: <!DOCTYPE h ...
jQuery点击网页任意空白区域隐藏div
JS代码: $(function () { $('#btnShow').click(function (event) { //取消事件冒泡 event.stopPropagation(); //按钮的 ...
GridView点击行任意位置设为选择状态
建立一个GridView并加上选择列,可以发现"选择" Button对应的脚本格式如下(第五行) οnclick="javascript:__doPostBack('Gr ...
Swift 3 点击屏幕任意位置隐藏键盘
func hideKeyboardWhenTappedAround() {let tap: UITapGestureRecognizer = UITapGestureRecognizer(target ...
微信小程序某一页面分享任意页面的小坑
最近在做一个微信小程序,遇到的坑挺多的,究其原因还是对小程序的运行机制不是很了解,因此才会有这么多的坑,先记录一个刚解决的问题. 在微信小程序某一页面A中分享其他任意在app.json中定义的页面如B ...
python编程小案例_用Python3编程写第一个小案例！-Go语言中文社区
用Python3编程第一步! 今天博主跟大家聊一聊如何使用Python3编程第一步!!不喜勿喷,如有建议欢迎补充.讨论! Come on! 在前面的几篇文章中我们已经学习了一些Python3 的基本语 ...
抽检小案例，使用flask，完成一个抽奖小案例
软件的安装设置,如果有安装以及有设置就是使用自己的额配置即可 a.安装python :https://www.python.org/ 下一步,下一步,直接安装b.修改为国内的软件包源头,避免下载包文件 ...

小案例之点击网页任意位置出现小爱心

小案例之点击网页任意位置出现小爱心相关推荐

最新文章

热门文章