IcemanZB-CSDN博客

原创 Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理

我们看看之前的拖拽在周围有东西的时候会出现什么问题？在高级浏览器中不会有啥问题，我们放到IE7下面测试一下，问题就出来了。如图我们可以很清楚的看到，文字都已经被选中了。那这个用户体验很不好，用起来也不方便。顺便提一下，我们之前加了一个return false;帮我们解决了很多问题，如果去掉这个的话,chrome也会出现一样的问题。那么也就是说这个return false;可以解决chrom

2015-02-16 09:22:52 1056

原创 Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理

今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能上次讲到我们的拖拽是不可拖出可视区范围的，在这基础上我们加个父级的div，不让他拖出父级。原理和之前的一样，简单吧。<style type="text/css">#div1 { width: 100px; height: 100px; background: red; pos

2015-02-15 09:09:34 883

原创 Javascript 拖拽雏形中的一些问题——逐行分析代码，让你轻松了解拖拽的原理

今天我们就来解决上一次拖拽雏形中的一些问题。下面看看有哪些问题？附上上期的Javascript代码，方便大家查看问题。<script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); var disX = 0;

2015-02-13 09:20:22 1050

原创 Javascript 拖拽雏形——逐行分析代码，让你轻松了解拖拽的原理

拖拽的原理：其实就是鼠标与左上角的距离保持不变。我们来看下图，这红点就是鼠标。拖拽拖拽实际上来说就是通过鼠标的位置来计算物体的位置，就是这么简单，就是这么任性。那这个距离怎么求呢？？鼠标的位置-物体位置的差值就是那个距离是吧。那这个斜线就是横线和竖线组成的。我们距离看下程序怎么做。/*实际上他改的就是某个div 的left top ，那他就动起来了。那样式中肯定要有绝对定位是吧。*/

2015-02-12 09:46:52 1183

原创 Javascript 完美运动框架——逐行分析代码，让你轻松了解运动的原理

大家一听这名字就知道，有了这套框架网上的效果基本都是可以实现的。实际上之前的运动框架还是有局限性的，就是不能让好几个值一块运动。那这个问题怎么解决呢？我们先来看看之前的运动框架function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else {

2015-02-11 10:23:49 1243

原创 Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理

所谓链式运动，就是一环扣一环。我们的很多运动实际上来说指的就是分阶段的，第一个阶段动完，下个阶段开始动。这个链式运动框架就是用来处理这些问题的。我们先来看下之前的运动框架,以下是Javascript 代码function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name];

2015-02-10 13:34:03 887

原创 Javascript 可同时变大变宽等一系列效果运动框架——逐行分析代码，让你轻松了解运动的原理

等待已久的可变大,变宽等一系列效果运动框架出炉了，现在还是个初级版本，能满足需求。我们看看是如何实现的。我们知道在Javascript 中 ‘.’等同于 ‘[]’ 例如： oDiv.style.height=oDiv.style[‘height’]那么，我们把要运动的属性作为一个参数，传入到之前函数中即可。透明度呢，需要单独处理，判断下即可。直接上代码。<style type="text/css"

2015-02-09 10:11:26 636

原创 Javascript 运动中Offset的bug——逐行分析代码，让你轻松了解运动的原理

我们先来看看这个bug 是怎么产生的。这里写代码片<style type="text/css"> #div1 { width: 200px; height: 200px; background: red; }</style><body> <div id="div1"> </div> <

2015-02-06 11:01:52 508

原创 Javascript 多物体运动——逐行分析代码，让你轻松了解运动的原理

我们先来看下之前的运动的代码，是否支持多物体运动，会出现怎么样的问题。 div { width: 100px; height: 50px; background: red; margin: 10px;

2015-02-05 09:15:28 463

原创 Javascript 匀速运动停止条件——逐行分析代码，让你轻松了解运动的原理

我们先来看下之前的匀速运动的代码，修改了速度speed后会出现怎么样的一个bug。这里加了两个标杆用于测试 style type="text/css"> #div1 { width: 100px; height: 100px; position: absol

2015-02-04 11:06:09 597

原创 Javascript 缓冲运动——逐行分析代码，让你轻松了解缓冲运动的原理

看过上一篇关于Javascript 匀速运动文章的朋友相信对于运动已经有了初步的了解接下来讲一下关于缓冲运动的原理 ,我会逐行分析代码，代码简单易懂，能马上理解其中的原理，适用于初学者。 #div1 { width: 100px; height: 100px; position: a

2015-02-03 10:31:31 613

原创 Javascript 匀速运动—— 应用案例：网站常用功能分享到

网站上会经常用到Javascript 中的运动，这次与大家分享一下一些运动的基本应用。方便大家在开发中能够直接使用。代码简单易懂，适用于初学者。最后会一步一步整理出一套自己的运动框架。应用案例效果图：鼠标移动到分享上，左边的div就会显示出来。移开会自己恢复。相信这个大家都会用到很实用，下面看看代码是如何实现的。 #div1 {

2015-02-02 10:34:02 429

原创 Javascript 无缝滚动

效果：鼠标移入图片停止滚动，鼠标移出自动滚动，可以调整向左或右方向滚动缓冲运动——逐行分析代码，让你轻松了解缓冲运动的原理

2015-01-30 09:42:03 602

转载 Javascript 字符串浏览器兼容问题

先看下不兼容的写法，若我想获取某个字符串的第几位 var str='aavvvcc'; console.info(str[0]);这种写法在IE 7以下的浏览器都不兼容，以下提供浏览器全兼容的方式 var str='aavvvcc';console.info(str.charAt(1)); 使用charAt

2015-01-29 09:27:43 415

转载 HTML5 drawImage 使用问题

转载自己博客园中的文章 http://www.cnblogs.com/IcemanZB/p/4125658.html DOCTYPE html>html> head> meta charset="utf-8"> title>title> script src="js/jquery-1.9.1.min.js" type

2015-01-28 09:32:04 604

转载分析JavaScript代码应该放在HTML代码哪个位置比较好

本文总结了多种放置JS代码的方法,需要的朋友可以参考下在哪里放置 JavaScript 代码？通常情况下，JavaScript 代码是和 HTML 代码一起使用的，可以将 JavaScript 代码放置在 HTML 文档的任何地方。但放置的地方，会对 JavaScript 代码的正常执行会有一定影响，具体如下所述。放置于之间将 JavaScript 代码放置于 HTML 文档的

2015-01-27 12:17:50 574

IcemanZB的专栏