xjwolaile
- 浏览: 340259 次
- 性别:
- 来自: 杭州
-
文章分类
- 全部博客 (354)
- 学习 (219)
- 工作 (69)
- 前端技术 (188)
- 个人评论 (1)
- 工作总结 (1)
- 工作的方法 (1)
- 代码库 (1)
- jQuery (63)
- javascript (4)
- css (4)
- 网络通信协议 (3)
- web (7)
- 服务端性能 (1)
- 优化 (1)
- html5 (4)
- serialize (1)
- 上线页面 (1)
- ie6 (6)
- js (1)
- iframe (1)
- flash (1)
- a (1)
- img (1)
- 页面tms的要求 (1)
- kissy (3)
- 需求也页面 (0)
- 需求页面 (2)
- 视频插件 (1)
- 切图片 (1)
- map (1)
- display (1)
- 浮动定位 (1)
- 大小图片的切换功能 (2)
- demo (1)
- margin (1)
- a标签 (1)
- border (1)
- 侧导航 (1)
- 切换PNG格式的css (1)
- padding (1)
- 显示添加和删除 (1)
- 滚动条 (1)
- 和图片处理 (1)
- 移动端 (1)
- 定位 (1)
- 移动端的包的引入作用与直接拨打电话的A标签 (1)
- git (1)
- node.js (1)
- Zepto (1)
最新评论
-
幻紫1992：
还有分页的功能、、(⊙o⊙)嗯
[JS代码库] -
幻紫1992：
就是没有返回顶部的按钮，这个页面、、
[JS代码库] -
幻紫1992：
很受用，O(∩_∩)O谢谢啦~
[JS代码库] -
nlnl520coco：
想下个东西 规则太苛刻了 网站得改进
[JS代码库] -
hxp520520：
new Limiter() 这个对象是kissy API里面的 ...
Limiter的简单demo--20131029
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd>
<html>
<head>
<!--首先把图片放上来给图片一个id-->
<!--选择事件-->
<!--获得图片的坐标-->
<!--获得页面其他地方的坐标-->
<!--让图片移动到鼠标点击的坐标上-->
<!--插入脚本-->
<script language="javascript" type="text/javascript">
<!--将页面内所有元素的一个集合定义到 ie, 将里面所有id集合定义到nn6里, 将否 定义到 isdrag里面, 定义 x y, 定义 doby-->
var ie=document.all;
var nn6=document.getElementById && !document.all;
var isdrag=false;
var dobj;
var x,y;
//var setp=10;
<!--定义dianji函数-->
function dianji()
{
<!--获得dian 的id 点击的事件-->
document.getElementById("dian").onmouseup=function(oEvent)
{
<!--判断事件是用点击左键还是右键-->
if (!oEvent) oEvent=window.event;
if (oEvent.button==0)
{
<!--获得在图片里距左的坐标-->
x=document.body.scrollLeft+event.clientX;
<!--获得在图片里距上的坐标-->
y=document.body.scrollTop+event.clientY;
//alert(x);
//alert(y);
}
}
}
<!--定义mousePosition函数-->
function mousePosition(ev){
<!--判断页面的坐标 返回页面坐标-->
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
<!--获得页面坐标距左的坐标 获得页面距上的坐标-->
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
<!--定义mouseMove函数-->
function mouseMove(ev){
//var img1 = document.getElementById("dian");
// if(img1.style.pixelLeft <(main.clientWidth-img1.clientWidth-setp)){
// img1.style.pixelLeft =img1.style.pixelLeft+setp;
// }
<!--循环图片到下一个坐标-->
ev = ev || window.event;
var mousePos = mousePosition(ev);
for (i=0;i<100;i++)
{
for(j=0;j<1000;j++){document.getElementById("numText").value=j;}
document.getElementById("tupian").style.left = i;
document.getElementById("tupian").style.top = i;
}
}
<!--获得moseMove-->
document.onmousedown = mouseMove;
</script>
</head>
<body>
<!--插入一个输入框-->
<input type="text" size="2" id = "numText" />
<!--定义div和图片-->
<div id="tupian" style="position:relative;top:10;left:10;"><img src="图片111.jpg" id="dian" onmousedown="dianji()"></div>
</body>
</html>
http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd>
<html>
<head>
<!--首先把图片放上来给图片一个id-->
<!--选择事件-->
<!--获得图片的坐标-->
<!--获得页面其他地方的坐标-->
<!--让图片移动到鼠标点击的坐标上-->
<!--插入脚本-->
<script language="javascript" type="text/javascript">
<!--将页面内所有元素的一个集合定义到 ie, 将里面所有id集合定义到nn6里, 将否 定义到 isdrag里面, 定义 x y, 定义 doby-->
var ie=document.all;
var nn6=document.getElementById && !document.all;
var isdrag=false;
var dobj;
var x,y;
//var setp=10;
<!--定义dianji函数-->
function dianji()
{
<!--获得dian 的id 点击的事件-->
document.getElementById("dian").onmouseup=function(oEvent)
{
<!--判断事件是用点击左键还是右键-->
if (!oEvent) oEvent=window.event;
if (oEvent.button==0)
{
<!--获得在图片里距左的坐标-->
x=document.body.scrollLeft+event.clientX;
<!--获得在图片里距上的坐标-->
y=document.body.scrollTop+event.clientY;
//alert(x);
//alert(y);
}
}
}
<!--定义mousePosition函数-->
function mousePosition(ev){
<!--判断页面的坐标 返回页面坐标-->
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
<!--获得页面坐标距左的坐标 获得页面距上的坐标-->
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
<!--定义mouseMove函数-->
function mouseMove(ev){
//var img1 = document.getElementById("dian");
// if(img1.style.pixelLeft <(main.clientWidth-img1.clientWidth-setp)){
// img1.style.pixelLeft =img1.style.pixelLeft+setp;
// }
<!--循环图片到下一个坐标-->
ev = ev || window.event;
var mousePos = mousePosition(ev);
for (i=0;i<100;i++)
{
for(j=0;j<1000;j++){document.getElementById("numText").value=j;}
document.getElementById("tupian").style.left = i;
document.getElementById("tupian").style.top = i;
}
}
<!--获得moseMove-->
document.onmousedown = mouseMove;
</script>
</head>
<body>
<!--插入一个输入框-->
<input type="text" size="2" id = "numText" />
<!--定义div和图片-->
<div id="tupian" style="position:relative;top:10;left:10;"><img src="图片111.jpg" id="dian" onmousedown="dianji()"></div>
</body>
</html>
分享到：
发表评论
-
Zepto
2015-08-15 13:49 1231Zepto Zepto，是一个比较 ... -
node.js的学习-20140611
2014-06-11 23:17 767//创建一个h1方法里面舒服一个nihao functi ... -
node.js的学习-20140609
2014-06-09 23:01 578Node.js 是一个基于Chrome JavaScript ... -
git的学习-20140604
2014-06-04 23:30 530Git使用 首先 开启"G ... -
PC和移动端的页面的一些差距-20140525
2014-05-25 23:46 876首先 1、标签、描述等描述清晰准确 2、网站结构3层树状结构 ... -
Bootstrap排版基础样式和响应式图片-20140521
2014-05-22 00:41 2735Bootstrap基础排版样式 .col-xs-* // ... -
Bootstrap特性、设计和组件-20140519
2014-05-19 22:22 710特点 Bootstrap是基于jQuery框架开发的，它在j ... -
Bootstrap流式布局-20140515
2014-05-16 00:26 14747流布局是一种适应屏幕的做法。即不固定块的宽度，而是采用百分比作 ... -
Bootstrap的宽度和分辨率的差别-20140514
2014-05-14 23:05 6260首先在bootstrap里面所有 ... -
Bootstrap的认识-20140513
2014-05-14 00:09 1376通过公司的两个比较大 ... -
jquery初步认识-20140123
2014-01-24 01:30 690一、原型模式结构 // 定义一个jQuery构造函数 ... -
html5的特殊标签作用-20140114
2014-01-15 01:04 912<base>、定义页面中所有链接的基准URL & ... -
ie下的指定样式-20140106
2014-01-08 00:00 7661. <!--[if !IE]><!--&g ... -
margin-left在IE6下左浮动加倍-20140102
2014-01-02 23:04 748一、IE6下如果line-height超出本身区块的heigh ... -
浮动存在的问题-20131229
2013-12-29 23:00 540看一个正常的浮动案例 <!DOCTYPE h ... -
在ie6下同张图片不能外面包有a标签后在画热区-20131223
2013-12-23 23:47 867最近在做页面有的发现一个问题 <div class ... -
ie6下导航存在的问题和-2013-12-20
2013-12-21 00:51 637最近在做事的时候发现一个有趣的问题，在上网也找过但是都没有很好 ... -
按比例展示的小js-20131217
2013-12-18 00:41 430做需求的做到一个关于这个功能的项目所以记下来 Math.ra ... -
定位需要注意-20131214
2013-12-15 01:07 694在CSS中关于定位的内容 ... -
flash在Safari下的BUG-20131212
2013-12-12 01:09 768<object width="940&qu ...
相关推荐
54. **月食错误理解**：月食不是每个月农历十五都会发生，还需要地球、月球和太阳的特定位置关系。 55. **日食观察**：当地球、月球和太阳排列成直线时，可能发生日食。 56. **环形山特征**：环形山的边缘通常较...
实例155 如何在图片中移动文字 220 4.7 图像动画 221 实例156 动画背景窗体 221 实例157 随鼠标移动的图像 223 实例158 十字光标定位 224 实例159 抓取鼠标指针的形状 225 实例160 图像的上下对接显示 226 ...
0193 获得指定月的最后一天 127 0194 在指定的日期上加上3月 127 0195 实现倒计时功能 128 0196 判断指定年份是否为闰年 129 0197 调用系统设置日期对话框 129 0198 将秒数转化成hh:mm:ss格式 129 0199...
0193 获得指定月的最后一天 127 0194 在指定的日期上加上3月 127 0195 实现倒计时功能 128 0196 判断指定年份是否为闰年 129 0197 调用系统设置日期对话框 129 0198 将秒数转化成hh:mm:ss格式 129 0199...
实例155 如何在图片中移动文字 220 4.7 图像动画 221 实例156 动画背景窗体 221 实例157 随鼠标移动的图像 223 实例158 十字光标定位 224 实例159 抓取鼠标指针的形状 225 实例160 图像的上下对接显示 226 ...
本书《学习Cocoa Touch for iOS》由Jeff Kelley撰写，于2012年6月27日由Apress出版社出版。该书共有393页，ISBN号为1430242698，以PDF格式提供，文件大小约为5.36MB。本书主要面向iOS开发者，旨在帮助他们深入了解...
实例155 如何在图片中移动文字 220 4.7 图像动画 221 实例156 动画背景窗体 221 实例157 随鼠标移动的图像 223 实例158 十字光标定位 224 实例159 抓取鼠标指针的形状 225 实例160 图像的上下对接显示 226 ...
第1篇 Java编程基础 第1章 Java开发环境的搭建（教学视频：9分钟） 2 1.1 理解Java 2 1.2 搭建Java所需环境 3 1.2.1 下载JDK 3 1.2.2 安装JDK 4 1.2.3 配置环境 5 1.2.4 测试JDK配置是否成功 7...
第1篇 Java编程基础 第1章 Java开发环境的搭建（教学视频：9分钟） 2 1.1 理解Java 2 1.2 搭建Java所需环境 3 1.2.1 下载JDK 3 1.2.2 安装JDK 4 1.2.3 配置环境 5 1.2.4 测试JDK配置是否成功 7 实例1 开发第一个Java...
第1篇 Java编程基础 第1章 Java开发环境的搭建（教学视频：9分钟） 2 1.1 理解Java 2 1.2 搭建Java所需环境 3 1.2.1 下载JDK 3 1.2.2 安装JDK 4 1.2.3 配置环境 5 1.2.4 测试JDK配置...
2002年12月 第1章 Linux基础 1 1.1 Unix概述 1 1.1.1 Unix的历史 1 1.1.2 Unix的特点 3 1.1.3 Unix的现状和未来 5 1.2 Linux基础知识 5 1.2.1 Linux的历史 6 1.2.2 Linux的技术特点 6 1.2.3 Linux的版本 7 1.2.4 ...
第1篇 Java编程基础 第1章 Java开发环境的搭建（教学视频：9分钟） 2 1.1 理解Java 2 1.2 搭建Java所需环境 3 1.2.1 下载JDK 3 1.2.2 安装JDK 4 1.2.3 配置环境 5 1.2.4 测试JDK配置是否成功 7 实例1 开发第一个Java...
第五章 系统常用命令及格式转换 30 1．Msconfig 系统的关闭起动项命 30 2．Dxdiag系统信息查看命令 30 3．Gpedit.msc计算机管理命令 31 4．格式之间的转换，使用winavi进行转换 32 5．常用的快捷键，使用快捷可以...
实例155 如何在图片中移动文字 220 4.7 图像动画 221 实例156 动画背景窗体 221 实例157 随鼠标移动的图像 223 实例158 十字光标定位 224 实例159 抓取鼠标指针的形状 225 实例160 图像的上下对接显示 226 ...
48 实例048 向提示框中添加图标 49 第2章 控件应用 51 2.1 TextBox控件应用 52 实例049 只允许输入数字的TextBox控件 52 实例050 限制用户名称长度及设置密码文本 54 实例051 自动删除...