用jQuery将页面制成简单画板

$(function () {

$(document).on(‘mousedown‘, function (e) {

var e = e || window.event;

$(document).on(‘mousemove‘, function (e) {

var e = e || window.event;

var x = e.pageX;

var y = e.pageY;

$(‘<div></div>‘).css({

‘position‘: ‘absolute‘,

‘width‘: ‘5px‘,

‘height‘:‘5px‘,

‘borderRadius‘:‘50%‘,

‘left‘: x, ‘top‘: y })

.appendTo(‘body‘); $(‘div‘).css(‘background‘,

function Color() {

var r = parseInt(Math.random() * 256);

var g = parseInt(Math.random() * 256);

var b = parseInt(Math.random() * 256);

return "rgb(" + r + ‘,‘ + g + ‘,‘ + b + ")";

});

})

$(document).on(‘mouseup‘, function () {

$(document).off(‘mousemove‘).off(‘mouseup‘);

})

})

})

原文地址:https://www.cnblogs.com/huanxijiuhao/p/9215472.html

时间: 2024-10-02 23:22:33

用jQuery将页面制成简单画板的相关文章

02.Jquery Mobile介绍以及Jquery Mobile页面与对话框

一.为什么要学Jquery Mobile   JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用的也是比较多的   二.Adobe Dreamweaver CS6 环境搭建以及软件破解   软件安装步骤:   http://www.phonegap100.com/article-79-1.html            软件下载链接地址:   http://bbs.phonegap100.co

(01)创建第一个jQuery Mobile页面

jQuery Mobile 是一个适配pc端和移动端的前台开放框架,当然很多时候主要用于移动端的开发.怎样搭建一个jQuery Mobile的开发环境呢?其实很简单,我们只需要引入的css.js和images等资源文件即可. 引入这些资源文件有两个方法: 1.从 CDN 中引入 jQuery Mobile 这个方法比较简单,你只需要引入css和js文件即可,不需要引入images文件,它们都已经存放在cdn服务器上了,当然这样不好的地方就是你不可以修改图片或者是js和css文件了. <!--jQ

js原生 + jQuery实现页面滚动字幕

js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 代码如下: <div class="box"> <ul class="list"> <li>这是滚动加载的第1条数据</li> <li>你猜猜这是第几条滚动加载的文字</li> <li>

ECSHOP中transport.js和jquery的冲突的简单解决办法

ECSHOP中transport.js和jquery的冲突的简单解决办法 一流资源网近日在ECSHOP网站加入了几个JS特效代码,在谷歌.火狐下正常,在各版本IE下都不常,左思不得其解. 最后才知道原来是"ECSHOP中transport.js和jquery的冲突" 因为通用头部文件中引用了 1 {insert_scripts files='transport.js,utils.js'} transport.js与jquery有冲突.原因不多讲.在网上找到一个最简单解决办法: 成功了,

jQuery EasyUI 窗口 – 创建简单窗口

jQuery EasyUI 窗口 – 创建简单窗口 创建一个窗口(window)非常简单,我们创建一个 DIV 标记: <div id="win" class="easyui-window" title="My Window" style="width:300px;height:100px;padding:5px;"> Some Content. </div> 现在运行测试页面,您会看见一个窗口(win

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 页面事件与 deferred

在系列的上一篇文章<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解>中,Kayo 介绍了除页面事件外的其他 jQuery Mobile 事件,而页面事件由于事件数较多,并且涉及 jQuery 中一个比较复杂的对象 deferred ,因此在本文中单独说明.jQuery Mobile 页面事件使用分为页面加载事件 (Page load events),页面跳转事件 (Page change events),页面显示/隐藏事件 (

jquery实现页面局部刷新

后台管理中总是使用frameset进行分成部分进行管理,但是感觉很不好用,尤其是页面间调转还要判断window.parent,太令我费神了,于是学习使用XMLHttpRequest进行页面局部刷新.代码如下: Java代码   <html> <head> <script type="text/javascript"> window.onload = function(){ document.getElementById("email&quo

用html+css+jQuery实现的一个简单的图片切换特效

这篇文章主要介绍了用html+css+js(jQuery)实现的一个简单的图片切换特效,需要的朋友可以参考下. 记得要引入一个jQuery库文件,可以是网上在线的,也可以是本地的,注意路径. 如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="htt

nodejs + jquery Mobile构建一个简单的移动web (客户端)

前面展示了使用nodejs技术和jqm来搭建一个简单的支持CRUD操作应用的服务端部分(参见:nodejs + jquery Mobile构建一个简单的移动web(服务端) ),服务端采用nodejs技术实现,使用了mongodb数据库和轻量级web开发框架expressJS, 路由使用restful风格,所以你也可以使用restify来开发. 客户端的实现主要通过ajax调用实现.使用jade模板引擎. 客户端主要包含两个文件:layout.jade和index.jade 1. layout.