JavaScript基础 在鼠标点击处生出图片(鼠标在哪点,图片在哪显示)

镇场诗:
    清心感悟智慧语,不着世间名与利。学水处下纳百川,舍尽贡高我慢意。
    学有小成返哺根,愿铸一良心博客。诚心于此写经验,愿见文者得启发。
——————————————————————————————————————————

code:

<!DOCTYPE html>
<html onclick="CreateImg(event)">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script type="text/javascript">
        //网页加载完成时调用的函数
        function Init()
        {
            document.body.bgColor = "blue";
        }

        //当点击网页的时候,触发这个函数
        //因为Body标记中没有内容,所以onclick不给body加。
        function CreateImg(e)
        {
            var imgObj = document.createElement("img");
            //设置参数
            //显示的图片
            imgObj.src = "images/sun.jpg";

            //定位
            imgObj.style.position = "absolute";
            imgObj.style.left = e.clientX + "px";
            imgObj.style.top = e.clientY + "px";

            document.body.appendChild(imgObj);
        }
    </script>
</head>
<body >
</body>
</html>

result:

  初始状态,

  鼠标点了两下后,

——————————————————————————————————————————
博文的精髓,在技术部分,更在镇场一诗。IDE: VS2015;浏览器: Firefox。
html+css+js,强,值得努力学习。传智播客的视频教程是我的学习资源,推荐。
如果博文有可以改进的地方,请留下评论,我会认真思考的。

注:我是一位正在努力的普通人,此文仅供测试与参考使用,不可做其他用途。当参考博文内容时,代表您已接受使用条款。

时间: 2024-11-06 03:51:45

JavaScript基础 在鼠标点击处生出图片(鼠标在哪点,图片在哪显示)的相关文章

Unity获取鼠标点击位置,物体朝鼠标点击处移动

大型游戏中经常会有这种场景,点击屏幕位置,人物就会朝着鼠标点击位置移动,下面我们就来实现这种效果. 首先,我们在场景中添加一个Plane,并且设置它的tag为Plane,然后,在Plane上面添加一个Cube,设置好位置,刚好放置在Plane上面,最后,给cube添加一个脚本,脚本内容如下: using UnityEngine; using System.Collections; public class RayCastTest : MonoBehaviour { //cube移动速度 publ

判断鼠标点击在div外时,更改背景图片

学习起步时,本人试着在web端界面上仿照qq客户端主菜单,做出了一个界面. 当做到qq主菜单的搜索框时,发现点击搜索框后,里面的背景图片会消失,如下面2张图所示:      点击前                                                                      点击后 尽管类似这种判断鼠标是否点击在div外,以更改背景图片的应用在web开发中并不多见,但是我们还是需要明白,应如何实现对鼠标是否点击在div外的判断. 在这里,我采用了如下代

JavaScript基础 event(For IE) 显示鼠标点击处的坐标值 距离窗口的距离 距离网页的距离 距离屏幕的距离

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

JavaScript基础 每1.5秒钟在网页中出现一个太阳的图片 整齐排列

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

【Unity笔记】将角色的碰撞体朝向鼠标点击方向——角色朝向鼠标

int floorMask; // 自动寻路层 void Awake() { floorMask = LayerMask.NameToLayer("Floor"); } void Turning() { Ray camRay = Camera.main.ScreenPointToRay(Input.mousePosition); RaycastHit floorHit; if (Physics.Raycast(camRay, out floorHit, floorMask)) { Ve

CSS鼠标点击式变化图片透明度

今天分享前端代码主题:jequery控制css图片透明度 很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css透明度属性. 如何改变呢?一种是纯css,一种使用jquery或者javascript代码控制.第一种使用:hover伪类选择器,本示例使用第二种. 先看最后效果: 第一步:放置图片 <ul id="test">        <li>            <

Pygame中鼠标点击之后,物体逐渐移动到鼠标点击坐标的方法

1 import pygame 2 from pygame.locals import * 3 from pygame.math import * 4 import sys 5 6 pygame.init() 7 size = width, height = 1600, 900 8 screen = pygame.display.set_mode(size) 9 color = (0, 0, 0) # 设置颜色 10 ball = pygame.image.load('dabai_new.gif

JavaScript获取鼠标点击坐标

如何用JavaScript获取鼠标点击时在canvas画布上的坐标呢: 代码如下: -------------------------------------------------------------- 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6

android基础之如何实现触屏监听和鼠标点击事件

直接上代码: android基础之如何实现触屏监听和鼠标点击事件