xjwolaile
- 浏览: 340238 次
- 性别:
- 来自: 杭州
-
文章分类
- 全部博客 (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>
<title>全屏可拖动的图片</title>
<!--设置style 的类型 查找到 dragem图片-->
<style type="text/css">
.tuodong{position:relative;}
</style>
<!--定义脚本的类型-->
<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 x,y;
var dobj;
<!--定义一个movemouse拖曳鼠标时触发的事件函数(e值)-->
function movemouse(e)
{
<!--判断isdrag-->
if (isdrag)
{
<!--将获取鼠标指针位置相对的左坐标的id放进dobj风格左里 下面就是将高放进dobj风格top里-->
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
<!--返回值 false否-->
return false;
}
}
<!--创建一个selectmouse查询鼠标的函数(e值)-->
function selectmouse(e)
{
<!--将产生这个事件的源对象 放进 fobj里-->
var fobj = nn6 ? e.target : event.srcElement;
<!--将将里面所有id集合定义到html 和 body 放进topelement里-->
var topelement = nn6 ? "html" : "body";
<!--循环fobj的名字 不等于 topelement 并且 fobj的类名 不等于 图片名-->
while (fobj.tagName != topelement && fobj.className != "tuodong")
{
<!--fobj 等于 fobj的 fobj parentNode 的获取某个元素的父节点 parentElement在 DOM 层次结构定义的上下级关系-->
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
<!--判断fobj的类名等于 图片名-->
if (fobj.className=="tuodong")
{
<!--isdrag 等于 是 doby 等于 fobj tx等于将dobj左的风格 parseInt 解析一个字符串，并返回一个整数 解析dobj高定义到 ty-->
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
<!--获得鼠标的高坐标放进x 获得鼠标的左坐标放进y-->
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
<!--获得要执行的事件是鼠标拖动事件-->
document.onmousemove=movemouse;
<!--返回值 否-->
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
</script>
</head>
<body>
<!--定义一个div的id 插入一个图片 类型名tuodong-->
<div id="tupian"><img src="图片111.jpg" class="tuodong"></div>
</body>
</html>
http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd>
<html>
<head>
<title>全屏可拖动的图片</title>
<!--设置style 的类型 查找到 dragem图片-->
<style type="text/css">
.tuodong{position:relative;}
</style>
<!--定义脚本的类型-->
<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 x,y;
var dobj;
<!--定义一个movemouse拖曳鼠标时触发的事件函数(e值)-->
function movemouse(e)
{
<!--判断isdrag-->
if (isdrag)
{
<!--将获取鼠标指针位置相对的左坐标的id放进dobj风格左里 下面就是将高放进dobj风格top里-->
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
<!--返回值 false否-->
return false;
}
}
<!--创建一个selectmouse查询鼠标的函数(e值)-->
function selectmouse(e)
{
<!--将产生这个事件的源对象 放进 fobj里-->
var fobj = nn6 ? e.target : event.srcElement;
<!--将将里面所有id集合定义到html 和 body 放进topelement里-->
var topelement = nn6 ? "html" : "body";
<!--循环fobj的名字 不等于 topelement 并且 fobj的类名 不等于 图片名-->
while (fobj.tagName != topelement && fobj.className != "tuodong")
{
<!--fobj 等于 fobj的 fobj parentNode 的获取某个元素的父节点 parentElement在 DOM 层次结构定义的上下级关系-->
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
<!--判断fobj的类名等于 图片名-->
if (fobj.className=="tuodong")
{
<!--isdrag 等于 是 doby 等于 fobj tx等于将dobj左的风格 parseInt 解析一个字符串，并返回一个整数 解析dobj高定义到 ty-->
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
<!--获得鼠标的高坐标放进x 获得鼠标的左坐标放进y-->
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
<!--获得要执行的事件是鼠标拖动事件-->
document.onmousemove=movemouse;
<!--返回值 否-->
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
</script>
</head>
<body>
<!--定义一个div的id 插入一个图片 类型名tuodong-->
<div id="tupian"><img src="图片111.jpg" class="tuodong"></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 ...
相关推荐
实例015 带导航菜单的主界面 12 实例016 图形化的导航界面 14 1.5 特色程序界面 15 实例017 隐藏式窗体 15 实例018 类似Windows XP的程序界面 18 实例019 软件启动界面 19 实例020 以树形显示的程序界面 20 ...
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...
实例015 带导航菜单的主界面 12 实例016 图形化的导航界面 14 1.5 特色程序界面 15 实例017 隐藏式窗体 15 实例018 类似Windows XP的程序界面 18 实例019 软件启动界面 19 实例020 以树形显示的程序界面 20 ...
实例015 带导航菜单的主界面 12 实例016 图形化的导航界面 14 1.5 特色程序界面 15 实例017 隐藏式窗体 15 实例018 类似Windows XP的程序界面 18 实例019 软件启动界面 19 实例020 以树形显示的程序界面 20 ...
实例015 带导航菜单的主界面 12 实例016 图形化的导航界面 14 1.5 特色程序界面 15 实例017 隐藏式窗体 15 实例018 类似Windows XP的程序界面 18 实例019 软件启动界面 19 实例020 以树形显示的程序界面 20 ...
第2章 jQuery 选择器/12 2.1 jQuery选择器概述/13 2.1.1 什么是选择器/13 2.1.2 选择器的优势/13 2.2 jQuery选择器详解/17 2.2.1 基本选择器/18 2.2.2 层次选择器/20 2.2.3 简单过滤选择器/22 2.2.4 内容...
实例043 将二维数组中的行列互换 53 实例044 利用数组随机抽取幸运观众 54 实例045 用数组设置JTable表格的列名与列宽 55 3.2 数组操作 57 实例046 数组的下标界限 57 实例047 按钮控件数组实现计数器界面 58 实例...