用JS做的小事例，鼠标点击出现东西！！

悠悠 2022-08-21 08:56 102阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html  οnclick="createImg(event)"xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">  
<head>  
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  
<title>网页标题</title>  
<meta name="keywords" content="关键字列表" />  
<meta name="description" content="网页描述" />  
<link rel="stylesheet" type="text/css" href="" />  
<style type="text/css"></style>  
<script type="text/javascript">  
  
function createImg(e)\{  
//创建照片节点  
var img\_node=document.createElement("img");  
//追加到父节点中、  
document.body.appendChild(img\_node)  
//添加照片路径  
img\_node.src="images/xingxing.gif";  
  
//设置宽度高度  
var img\_width =getRandom(85,25);  
var img\_width\_half =img\_width/2;  
var p\_x=e.clientX- img\_width\_half;  
var p\_y=e.clientY- img\_width\_half;  
//这里必须用css样式  
img\_node.style.width=img\_width+"px";  
img\_node.style.position ="absolute";  
img\_node.style.top=p\_y+"px";  
img\_node.style.left=p\_x+"px";  
//不能这个方法删除图片  
// img\_node.οnclick=removeImg(this);  
//创建删除图片的节点  
img\_node.setAttribute("onclick","removeImg(this)");  
\}  
//创建一个随机函数  
function getRandom(max,min)\{  
   
return Math.floor(Math.random()\*(max-min)+min);  
   
   
\}  
//删除星星  
function removeImg(obj)\{  
document.body.removeChild(obj);  
   
   
\}  
  
</script>  
</head>  
<body bgcolor="\#000">  
  
</body>

</html>

效果图如下：

发表评论取消回复

表情：

评论列表（有 0 条评论，102人围观）

还没有评论，来说两句吧...

相关阅读

相关模拟鼠标点击

< DOCTYPE HTML PUBLIC -WCDTD HTML TransitionalEN> <table style="WIDTH: 100%; TABLE-LAYO

痛定思痛。/ 2023年10月18日 08:13/ 0 赞/ 108 阅读

相关 js 鼠标点击位置获取

event.offsetY/X 众所周知event.offsetX可以获取鼠标点击位置距包含元素的左边界距离今天做项目的时候需要用到距离就研究一番这一堆函数

本是古典何须时尚/ 2022年11月28日 15:29/ 0 赞/ 185 阅读

相关解决bootstrap按钮点击出现阴影

![在这里插入图片描述][2021052210021215.png] 代码如下: <style> html body{

短命女/ 2022年10月14日 14:57/ 0 赞/ 137 阅读

相关用JS做的小事例，鼠标点击出现东西！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

悠悠/ 2022年08月21日 08:56/ 0 赞/ 103 阅读

相关导航栏点击出现提示框（弹出层）

导航栏点击出现提示框（弹出层） 2018年10月26日 15:17 1.先给导航栏下的<a>标签设属性 data-method="" ，其他理应可以（没有尝试），给

灰太狼/ 2022年05月14日 15:08/ 0 赞/ 282 阅读

相关 css3鼠标点击出现波浪动态效果案例现场

css3鼠标点击出现波浪动态效果案例现场话不多说先上图： ![这里写图片描述][70] 代码：（有es6语法注意兼容问题，推荐Chrome打开） <ht

你的名字/ 2022年05月13日 06:38/ 0 赞/ 197 阅读

相关页面点击出现文字上浮

偶然间浏览博客园看到点击出现文字效果于是打开控制台看了看鼠标单击事件核心代码如下 <script type="text/javascript">

落日映苍穹つ/ 2022年04月02日 17:58/ 0 赞/ 173 阅读

相关 js模拟点击坐标、鼠标轨迹

<!doctype html> <html lang="en"> <head> <meta charset="utf-8">

客官°小女子只卖身不卖艺/ 2022年02月26日 05:52/ 0 赞/ 1063 阅读

相关 js实现禁用，鼠标不可点击

本文所讲的禁用针对的是没有disable属性的元素，如div、li标签等，有该属性的元素如input、button标签等需要禁用可直接对此属性进行设置。鼠标不可点击主要是

古城微笑少年丶/ 2022年01月22日 04:37/ 0 赞/ 914 阅读

相关 css、js实现页面点击出现随机文件特效

![70][] 代码如下： <html> <body> <div>单击显示随机文字</div> </body> <script

小鱼儿/ 2021年05月12日 11:55/ 0 赞/ 398 阅读