| 字数统计: 802(字)

js实现放大镜特效

发表于 2016-03-30 | 分类于前端 | 阅读次数

js实现放大镜特效

效果

实现原理：

鼠标在小图片上移动时，通过捕获鼠标在小图片上的位置，定位大图片的相应位置

技术点

事件捕获
- onmouseover
- onmouseout
- onmousemove
定位
- offsetLeft
- offsetTop
- offsetWidth
- offsetHeight
- event.clientX
- event.clientY
计算
浏览器兼容性

问号部分即：
objBigBoxImage.style.left
很容易求出

同理可以求出
objBigBoxImage.style.top

源码
github clone地址:

    <!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        #demo {
            display: block;
            width: 400px;
            height: 255px;
            margin: 50px;
            position: relative;
            border: 1px solid #ccc;
        }
        #small-box {
            position: relative;
            z-index: 1;
        }
        #float-box {
            display: none;
            width: 160px;
            height: 120px;
            position: absolute;
            background: #ffffcc;
            border: 1px solid #ccc;
            filter: alpha(opacity=50);
            opacity: 0.5;
        }
        #mark {
            position: absolute;
            display: block;
            width: 400px;
            height: 255px;
            background-color: #fff;
            filter: alpha(opacity=0);
            opacity: 0;
            z-index: 10;
        }
        #big-box {
            display: none;
            position: absolute;
            top: 0;
            left: 460px;
            width: 400px;
            height: 300px;
            overflow: hidden;
            border: 1px solid #ccc;
            z-index: 1;;
        }
        #big-box img {
            position: absolute;
            z-index: 5
        }
    </style>
    <script>
        //页面加载完毕后执行
        window.onload = function () {
            var objDemo = document.getElementById("demo");
            var objSmallBox = document.getElementById("small-box");
            var objMark = document.getElementById("mark");
            var objFloatBox = document.getElementById("float-box");
            var objBigBox = document.getElementById("big-box");
            var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
            objMark.onmouseover = function () {
                objFloatBox.style.display = "block"
                objBigBox.style.display = "block"
            }
            objMark.onmouseout = function () {
                objFloatBox.style.display = "none"
                objBigBox.style.display = "none"
            }
            objMark.onmousemove = function (ev) {
                var _event = ev || window.event;  //兼容多个浏览器的event参数模式
                var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
                var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
                if (left < 0) {
                    left = 0;
                } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
                    left = objMark.offsetWidth - objFloatBox.offsetWidth;
                }
                if (top < 0) {
                    top = 0;
                } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
                    top = objMark.offsetHeight - objFloatBox.offsetHeight;
                }
                objFloatBox.style.left = left + "px";   //oSmall.offsetLeft的值是相对什么而言
                objFloatBox.style.top = top + "px";
                var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
                var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
                objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
                objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
            }
        }
    </script>
</head>
<body>
<div id="demo">
    <div id="small-box">
        <div id="mark"></div>
        <div id="float-box"></div>
        <img src="image/macbook-small.jpg"/>
    </div>
    <div id="big-box">
        <img src="image/macbook-big.jpg"/>
    </div>
</div>
</body>
</html>

解决兼容性问题
测试工具：IETester
详情讲解

主要思路：加一个遮罩层

另附jQuery实现代码

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<script src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0
}
#demo {
display: block;
width: 400px;
height: 255px;
margin: 50px;
position: relative;
border: 1px solid #ccc;
}
#small-box {
position: relative;
z-index: 1;
}
#float-box {
display: none;
width: 160px;
height: 120px;
position: absolute;
background: #ffffcc;
border: 1px solid #ccc;
filter: alpha(opacity=50);
opacity: 0.5;
cursor: move;
}
#mark {
position: absolute;
display: block;
width: 400px;
height: 255px;
z-index: 10;
background: #fff;
filter: alpha(opacity=0);
opacity: 0;
cursor: move;
}
#big-box {
display: none;
position: absolute;
top: 0;
left: 460px;
width: 400px;
height: 300px;
overflow: hidden;
border: 1px solid #ccc;
z-index: 1;;
}
#big-box img {
position: absolute;
z-index: 5
}
</style>
<script>
    $(function(){
        var markWidth = $('#mark').width(),
            markHeight = $('#mark').height(),
            floatBoxWidth = $('#float-box').width(),
            floatBoxHeight = $('#float-box').height(),
            percent = $('#big-box').width() / $('#float-box').width()
        $('#mark').on('mouseover', function(){
            $('#float-box').show()
            $('#big-box').show()
        }).on('mouseout', function(){
            $('#float-box').hide()
            $('#big-box').hide()
        }).on('mousemove', function(e){
            e = e || window.event
            var markOffset = $('#mark').offset()
            var left = e.clientX - markOffset.left - floatBoxWidth / 2,
                top = e.clientY - markOffset.top - floatBoxHeight / 2
            if(left < 0) left =0
            else if(left > markWidth - floatBoxWidth) left = markWidth - floatBoxWidth
            if(top < 0) top =0
            else if(top > markHeight - floatBoxHeight) top = markHeight - floatBoxHeight
            $('#float-box').css({left: left+'px', top: top+'px'})
            $('#big-box>img').css({left: -left*percent+'px', top: -top*percent+'px'})
        })
    })
</script>
</head>
<body>
<div id="demo">
<div id="small-box">
<div id="mark"></div>
<div id="float-box"></div>
<img src="image/macbook-small.jpg"/>
</div>
<div id="big-box">
<img src="image/macbook-big.jpg"/>
</div>
</div>
</body>
</html>

参考：

慕课网用JS实现放大镜特效

| 字数统计: 352(字)

python中的布尔类型运算

发表于 2016-03-25 | 阅读次数

python中的布尔类型运算

布尔运算在计算机中用来做条件判断，根据计算结果为True或者False，计算机可以自动执行不同的后续代码。

在Python中，布尔类型还可以与其他数据类型做 and、or和not运算，请看下面的代码：

1 2	a = True print a and 'a=T' or 'a=F'

计算结果不是布尔类型，而是字符串 ‘a=T’，这是为什么呢？

因为Python把0、空字符串’’和None看成 False，其他数值和非空字符串都看成 True，所以：

True and ‘a=T’ 计算结果是 ‘a=T’
继续计算 ‘a=T’ or ‘a=F’ 计算结果还是 ‘a=T’
要解释上述结果，又涉及到 and 和 or 运算的一条重要法则：短路计算。

在计算 a and b 时，如果 a 是 False，则根据与运算法则，整个结果必定为 False，因此返回 a；如果 a 是 True，则整个计算结果必定取决与 b，因此返回 b。
在计算 a or b 时，如果 a 是 True，则根据或运算法则，整个计算结果必定为 True，因此返回 a；如果 a 是 False，则整个计算结果必定取决于 b，因此返回 b。

所以Python解释器在做布尔运算时，只要能提前确定计算结果，它就不会往后算了，直接返回结果。

| 字数统计: 715(字)

node.js写一个http小爬虫

发表于 2016-03-07 | 分类于前端 | 阅读次数

node.js的cheerio 写的http小爬虫

参考慕课网进击Node.js基础（一）
爬取得本课程的章节目录

安装 cheerio

1	npm install cheerio

代码

var http = require('http')
var cheerio = require('cheerio')
var url = 'http://www.imooc.com/learn/348'
function filerChapters(html){
	var $ = cheerio.load(html)
	var chapters = $('.chapter')
	// [{
	// 	chapterTitle:'',
	// 	videos:[
	// 		title:'',
	// 		id:''
	// 	]
	// }]
	
	var courseData = []
	chapters.each(function(item){
		var chapter = $(this)
		var chapterTitle = chapter.find('strong').text();
		var videos =chapter.find('.video').children('li')
		var chapterData = {
			chapterTitle:chapterTitle,
			videos:[
			]
		}
		videos.each(function(item){
			var video = $(this).find('.J-media-item')
			var videoTitle =video.text()
			var id = video.attr('href').split('video/')[1]
			chapterData.videos.push({
				title:videoTitle,
				id:id
			})
		})
		courseData.push(chapterData)
	})
	return courseData
}
function printCourseInfo(courseData){
	courseData.forEach(function(item){
		var chapterTitle=item.chapterTitle
		console.log(chapterTitle+ '\n');
		item.videos.forEach( function(video) {
			console.log('  【'+ video.id +'】'+ video.title +'\n');
		});
	})
}
http.get(url,function(res){
	var html = ''	
	res.on('data',function(data){
		html += data
	})
	res.on('end',function(){
	var courseData=filerChapters(html)
	printCourseInfo(courseData)
	})
}).on('error',function(){
	console.log('获取课程数据出错！')
})

运行

node crawler.js

                          第1章 前言
                                      带你了解为什么要学习 Nodejs。
【6687】
                                  1-1 Node.js基础-前言
                                                                          (01:20)
                                                                      开始学习
【6688】
                                  1-2 为什么学习Nodejs
                                                                          (05:43)
                                                                      开始学习
                          第2章 安装 Nodejs
                                      学习在 windows、Linux 及 Mac 系统下安装 Nodejs。
【6689】
                                  2-1 Node.js基础-课程简介
                                                                          (01:19)
                                                                      开始学习
【6690】
                                  2-2 Nodejs版本常识
                                                                          (01:02)
                                                                      开始学习
【6691】
                                  2-3 Windows下安装Nodejs
                                                                          (04:43)
                                                                      开始学习
【6692】
                                  2-4 Linux下安装Nodejs
                                                                          (06:24)
                                                                      开始学习
【6693】
                                  2-5 Mac下安装Nodejs
                                                                          (03:55)
                                                                      开始学习
                          第3章 等不及了来尝鲜
                                      先来配一个Nodejs服务。
【6694】
                                  3-1 Node.js基础-起一个web服务器
                                                                          (05:14)
                                                                      开始学习
【6695】
                                  3-2 Node.js基础-命令行中体验
                                                                          (02:47)
                                                                      开始学习
                          第4章 模块与包管理工具
                                      学习 Nodejs 模块及管理工具。
【6697】
                                  4-1 Node.js 的模块 与 Commonjs 规范
                                                                          (03:44)
                                                                      开始学习
【6700】
                                  4-2 模块的分类
                                                                          (00:45)
                                                                      开始学习
【6701】
                                  4-3 简单的Nodejs模块
                                                                          (09:23)
                                                                      开始学习
                          第5章 横扫 Nodejs API
                                      Nodejs API任你学习。
【6705】
                                  5-1 Node.js-不要陷入版本选择的深渊
                                                                          (02:32)
                                                                      开始学习
【6710】
                                  5-2 URL网址解析的好帮手
                                                                          (10:30)
                                                                      开始学习
【6711】
                                  5-3 QueryString参数处理小利器
                                                                          (06:40)
                                                                      开始学习
【6712】
                                  5-4 HTTP知识先填坑
                                                                          (09:43)
                                                                      开始学习
【6713】
                                  5-5 HTTP知识填坑之“以慕课网为例分析”
                                                                          (10:13)
                                                                      开始学习
【7557】
                                  5-6 HTTP 事件回调进阶
                                                                          (17:51)
                                                                      开始学习
【7558】
                                  5-7 HTTP 源码解读之先了解作用域、上下文
                                                                          (20:50)
                                                                      开始学习
【7963】
                                  5-8 HTTP 源码解读
                                                                          (22:08)
                                                                      开始学习
【7964】
                                  5-9 HTTP 性能测试
                                                                          (09:15)
                                                                      开始学习
【7965】
                                  5-10 HTTP 小爬虫
                                                                          (17:33)
                                                                      开始学习
【8525】
                                  5-11 事件模块小插曲
                                                                          (15:15)
                                                                      开始学习
【8837】
                                  5-12 Node.js：request方法
                                                                          (17:56)
                                                                      开始学习

由于慕课网课程页面DOM结构有所变更，代码的内class与原教程相比做了些改动

| 字数统计: 187(字)

CSS实现简单图片展示

发表于 2016-03-07 | 分类于前端 | 阅读次数

CSS实现简单图片展示

效果：

css部分

  
div,ul,li,dl,dt,dd{
	margin:0;
	padding:0;
}
ul,li,dl,dt,dd{
	list-style:none;
}
.demo{
	margin:0 auto;
	width:930px;
}
.demo ul li{
	float:left;
	width:300px;
	margin-right:6px;
	position:relative;
}
.demo ul li img{
    border:none;
	position:relative;
	z-index:22;
}
.demo ul li a{
	width:300px;
    display:block;
	border:2px solid #ccc;
}
.demo ul li a:hover{
	border:2px solid #C03;
}
.demo ul li a span{
    position:absolute;
	z-index:33;
	bottom:2px;
	left:2px;
	width:300px;
	height:40px;
	filter:alpha(Opacity=50);
	-moz-opacity:0.5;
	opacity: 0.5;
	background:#000;
	color:#fff;
	line-height:40px;
	text-align:left;
	display:none;
}
.demo ul li a:hover span{
	display:block;
}

html部分

<div class="demo">
<ul>
   <li>
     <a>
       <img src="1.jpg"  />
       <span>keep moving</span>
     </a>
   </li>
   <li>
     <a>
       <img src="2.jpg"  />
       <span>stay hungry </span>
     </a>
   </li>
   <li>
     <a>
       <img src="3.jpg"  />
       <span>stay foolish</span>
     </a>
   </li>
</ul>

参考
慕课网图片展示特效

| 字数统计: 187(字)

js闭包

发表于 2016-03-07 | 分类于前端 | 阅读次数

js闭包

闭包
（1）概念
闭包是指有权访问另一个函数作用域中的变量的函数。
（2）特性
闭包只能取得包含函数中任何变量的最后一个值。
（3）创建方式
在一个函数内部创建另一个函数。
（4）原理
在一个函数内部中定义的函数会将包含函数（外部函数）的活动对象添加到其作用域中，直至解除对内部函数的应用，内部函数被销毁，外部函数的活动对象才会被销毁。
（5）实例

function closure(){
    var result=[];
    for (var i = 0; i < 4; i++) {
        result[i]=function(){
            console.log(i);
            return i;
        }
    };
    return result;
}
var result=closure();
for (var i = 0; i < 4; i++) {
    result[i]();
};
//4 4 4 4

| 字数统计: 546(字)

canvas之arcTo

发表于 2016-02-21 | 分类于前端 | 阅读次数

canvas之arcTo

canvas提供画圆弧有两种方法，一个是arc，另一个就是arcTo，arc挺简单的，这里就不再说了，单说一下arcTo。
arcTo的作用是绘制介于两条切线之间的弧，语法是arcTo（x1,y1,x2,y2,r）,其中x1，y1是起始点的坐标，x2，y2是终点的坐标，r则是圆弧的半径。这里面有个很大的误区，一般的初学者看到这里，都会错误的判断起始点的位置，如图1所示：

正确的理解应如图2所示，起始点位于两条切线相交的位置，另外，终点也并不是弧的终点，而是另一条切线上的任意一点，拿图2来说，终点是竖直的那条切线上的一点。有人会问，可不可以在起始点的上面那里，因为切线是直线，可以延伸的。答案是当然可以，但这样的结果是圆弧就会向上弯曲，而不是向下弯曲了。
按我的理解，可以总结为，起始点控制前半段弧的方向，终点控制后半段弧的方向，至于r嘛，控制弧的大小。

下面一个简单的动画帮助理解

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Insert title here</title>  
<style>  
canvas {  
    width: 400px;  
    height: 400px;  
    background-color: #EEEEEE;  
}  
</style>  
<script>  
    window.onload = function() {  
        var canvas = document.getElementById('canvas');  
        var arcToPoint1 = {x:120, y:40};  
        var arcToPoint2 = {x:60, y:80}  
        var context = canvas.getContext('2d');  
        if (!canvas || !canvas.getContext) {  
            return;  
        } else {  
            timer = setInterval(function(){  
                if (arcToPoint2.x < 150) {  
                    arcTo (context, arcToPoint1, arcToPoint2);  
                    arcToPoint2.x += 2;  
                } else {  
                    clearInterval(timer);  
                }  
            }, 300);  
        }  
    }  
      
    function arcTo () {  
        var startPoint = {x: 20, y: 40};  
        var context = arguments[0];  
        var arcToPoint1 = arguments[1];  
        var arcToPoint2 = arguments[2];  
        var context = canvas.getContext('2d');  
          
        context.clearRect(0,0,context.canvas.width, context.canvas.height)  
          
        context.beginPath();  
        context.moveTo(startPoint.x, startPoint.y);  
        context.strokeStyle = "red";  
        context.lineWidth = 1;  
        context.arcTo(arcToPoint1.x, arcToPoint1.y, arcToPoint2.x, arcToPoint2.y, 40);  
        context.stroke();  
          
        context.beginPath();  
        context.moveTo(startPoint.x, startPoint.y);  
        context.strokeStyle = "black";  
        context.lineWidth = 1;  
        context.lineTo(arcToPoint1.x, arcToPoint1.y);  
        context.fillText('arcToPoint1', arcToPoint1.x + 10, arcToPoint1.y - 5)   
        context.stroke();  
          
        context.beginPath();  
        context.moveTo(arcToPoint1.x, arcToPoint1.y);  
        context.strokeStyle = "black";  
        context.lineWidth = 1;  
        context.lineTo(arcToPoint2.x, arcToPoint2.y);  
        context.fillText('arcToPoint2', arcToPoint2.x + 10, arcToPoint2.y + 10)   
        context.stroke();  
    }  
</script>  
</head>  
<body>  
    <canvas id="canvas">  
        此游览器不支持canvas标签  
    </canvas>  
</body>  
</html>

参考
HTML5 canvas arcTo() 方法
 Canavs arcTo方法的理解

| 字数统计: 93(字)

canvas绘制移动端写字面板

发表于 2016-02-10 | 分类于前端 | 阅读次数

canvas绘制移动端写字面板

GitHub：https://github.com/AlexZ33/canvas_demo
演示链接

主要知识点

鼠标事件响应
屏幕坐标canvas坐标转换
Viewpoint
屏幕自适应（jquery实现）
屏幕触控响应事件（touch）

参考：
慕课网学写一个字
 HTML meta viewport属性说明(mark)
移动端touch事件和click事件的区别
 jQuery Mobile Touch 事件

| 字数统计: 157(字)

canvas绘制闪烁星星效果

发表于 2016-01-25 | 分类于前端 | 阅读次数

canvas绘制闪烁星星效果

GitHub：https://github.com/AlexZ33/canvas_demo/tree/gh-pages
演示链接

主要知识点

如何轮播序列帧
canvas API
- drawImage();
- globalAlpha;
- Save;
- Restore
如何添加鼠标事件
循环调用 Window API
-requestAnimFrame(function(){});
-setTimeout(function(){},time);
-setInterval(function(){},time);
三者的区别

总体思路

搭建网页结构
绘制背景
绘制女孩图片
鼠标点画圆闪烁变动，以及连线其他原点
requestAnimationFrame 更新画面

参考：
慕课网 canvas实现星星闪烁特效
 GameLoop的几种实现方式
 Javascript中的setTimeout,setInterval,requestAnimFrame
[Request Animation Frame for Better Performance]https://software.intel.com/en-us/html5/hub/blogs/request-animation-frame-for-better-performance/