JS实现放大镜效果

电商网站中会经常出现图片的放大效果,在产品页面尤为常见,如淘宝、京东、一号店等网站都会采用悬浮鼠标在右侧出现图片放大效果。
要实现这种效果可能过JS或jQuery等代码来实现,示例效果如下(通过将鼠标悬浮在下面的图片上进行查看):

首先通过getElementById或其它方法来获取各个对象,然后通过onmouseover和onmouseout事件来显示和隐藏放大镜和右侧图片,示例代码如下:

objMark.onmouseover = function(){
objFloatBox.style.display = "block";
objBigBox.style.display = "block";
}

objMark.onmouseout = function(){
objFloatBox.style.display = "none";
objBigBox.style.display = "none";
}

核心代码为onmousemove事件

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;//使用window.event解决IE兼容问题

var left = _event.clientX - objDemo.offsetLeft - objMark.offsetLeft - objFloatBox.offsetWidth/2;
var top = _event.clientY - objDemo.offsetTop - objMark.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";
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";
}

Firebug使用相关

Firebug是网页浏览器Firefox下的一款开发类插件,集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手。在日常使用中常会同时安装其扩展Yslow来一并对网站进行调试。同时为了兼容其它浏览器,还开发有Firebug Lite,功能略弱于Firebug。 安装完后要开启Firebug,可点击浏览器工具栏中的Firebug图标图标,也可按下F12开启,关闭方法与开启方法相同,另外按下Ctrl+F12将会在弹出的窗口中开启Firebug的调试窗口。调试窗口中主要包含控制台标签、HTML标签、CSS标签、脚本标签、DOM标签、网络标签和Cookies标签,可通过点击调试窗口左上角的Firebug图标,然后在可见面板中勾选或取消勾选来显示或隐藏相应的标签,调试窗口右上侧还有搜索窗口,能过搜索方便找到所需查看的内容。 Firebug调试窗口 控制台标签为JS命令行操作,显示JS错误信息、提示信息和日志信息,可在右侧窗口键入代码; HTML标签显示页面的所有HTML源代码,可能过直接修改代码的方式查看修改后的结果, 只需要所需修改代码上双击或右击在弹出窗口中选择”编辑HTML…”即可进行编辑,而要定位到页面上相应元素的代码,可通过在相应页面元素上右击选择“使用Firebug查看元素”,也可点击小甲虫右侧的点击查看页面元素图标即“点击查看页面中的元素”图标(快捷键Ctrl+Shift+C)然后直接点击需查看的元素来定位到相对应的代码; CSS标签下可编辑页面的CSS源代码,如同对HTML的修改一样,可通过双击来对样式来进行修改,对于字体大小等数值还可以通过方向键↑和↓来进行更改,这种修改每次会调整1个单位,而按下Ctrl键加方向键每次调整0.1个单位,按下Shift键加方向键每次调整10个单位; 脚本标签中显示页面的脚本,也可在该标签对脚本进行调试; DOM标签显示所有的页面对象和DOM属性; 网络标签显示页面各元素的下载情况和所花费的时间,以及HTTP请求和头信息; Cookies标签显示页面请求的Cookies,可对页面中的cookie进行查看和修改。

JavaScript控制台

Firebug的控制台可以很方便地对JavaScript代码进行调试,控制台内置了很多命令方便对JS进行调试,如console.log()命令可以打印出日志,以下代码可以输出日志结果2014年8月31日

console.log("%d年%d月%d日",2014,8,31);

其中的%d称为占位符,代表数字,此外浮点数的占位符为%f,字符串占位符为%s,对象的占位符为%o,输出的内容也可以为变量,如console.log(i),除日志输出外还有信息输出console.info(),debug输出console.debug(),警告输出console.warn(),错误输出console.error()。对输出的内容可进行分组,使用console.group()命令:

console.group("group1");
console.log("101");
console.log("102");
console.log("103");
console.groupEnd();
console.group("group2");
console.log("201");
console.log("202");
console.log("203");
console.groupEnd();

控制台中还有用于调试JS代码运行速度的命令console.time(),使用示例如下:

console.time("test");
for(var i=1; i<10000; i++){

}
console.timeEnd("test");

控制台还包含其它命令,可通过console.dir(console)来查看console对象的所有命令和方法,这些命令可以写在文件中,也可以在控制台右侧的多行调试框中输入并点击运行来进行查看
Firebug控制台

HTML+CSS常见问题

常用技巧和经验

CSS HACK

各元素在浏览器的样式尽可能的与新标准保持一到处:

https://github.com/necolas/normalize.css
针对IE,其中的edge表示按照可用的最新模式显示

<meta http-equiv="X-UA-Compatible" content="IE-edge, chrome=1">

按窗口大小显示

<meta name="viewport" content="width=device-width, initial-scale=1">

如何去除iPhone上视频默认的播放按钮

在应用html5的video标签时,明明加了autoplay=”true”,可是在iPhone上打开时还会出现播放按钮,这时需要加一段CSS来进行去除(视频在具体的class或id内的请自行加入):

video::-webkit-media-controls {display: none !important}

清除样式和浮动

在书写代码过程中,很多元素可能在不同浏览器中会自带margin,padding等样式以及自带浮动,可能过建立一个类似下面这样的通用的CSS代码来进行统一处理,避免实际展现效果出现偏差。

清除浮动可采取两种方法, clear:both或width:100%; overflow:hidden;

/*样式清除*/
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,id,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:12px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none; border:none; background:none;}
textarea{resize:none;}
a{text-decoration:none; color:#656565;}

/*清除浮动*/

.clearfix:after{content:""; display:block;clear:both;}
.clearfix{zoom:1;}

/*小技巧解决浮动问题*/
.fl{float:left;}
.fr{float:right;}

针对IE的小技巧

IE系列尤其是IE 6经常会出现样式问题,可通过IE Tester来进行查看,CSS Hack中一个重要的技术是可通过\9来将特别的样式仅对IE系列生效,如line-height:35px\9可用于解决IE 6中默认输入框(input)中文字垂直不居中问题,其中\9代表所有的IE系列浏览器

解决IE6对PNG透明度不支持的问题

IE6是不支持PNG图片的的透明度的,网上有很多方式来解决这一兼容性问题,这里介绍其中的一种,通过以下链接下载js修复文件

http://www.dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a-min.js

然后新建一个js文件来处理需要修复的标签或class,id名如

DD_belatedPNG.fix('div,ul,ol,li,dt,dd,dl,span,img,a,em,strong,h1,h2,h3,h4,h5,h6,p')

假设以上的文件名为ie6Fixpng.js并和修复文件一并放在js文件下,则在待修复文件头部加入如下代码:

<!--[if IE 6]>
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2FDD_belatedPNG_0.0.8a-min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Fie6Fixpng.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<![endif]-->

这样png文件在IE6中也可以透明显示了。

HTML中文乱码

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

通过getContext操作Canvas对象返回空

在使用JS操作Canvas时出现如下报错
TypeError: null is not an object (evaluating ‘canvas.getContext’) Safari
Uncaught TypeError: Cannot read property ‘getContext’ of null  Chrome
这通常是由于多次重复使用了getContext或者是在DOM加载完成前调用了getContext方法
对于后一种,可以把JS代码放到body的后半部分,也可以封装到一个函数,如init,并通过如下两种中的一种方法调用

	window.onload=init;
	window.addEventListener("load", init, true);

注:如果使用window.onload=init(),将会出现同样的报错

如何判断是否微信浏览器

window.onload = function(){
    if(isWeiXin()){
        ... ...
    }
}
function isWeiXin(){
    var ua = window.navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true;
    }else{
        return false;
    }
}

PHP代码

function is_weixin(){ 
	if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== false ) {
			return true;
	}	
	return false;
}

如何去除iPhone, iPad上视频的默认播放按钮?

在iPhone, iPad的Safari浏览器中视频默认会出现一个播放按钮,想要去除这个按钮只需通过伪元素来设置即可(*代表所有标签,也可设置video)

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none
}

Html and JavaScript Mumbo Jumbo Part 1

I want to start a journey of getting to know those jargons with you,  fancy words like HTML, CSS, Javascript, JQuery, AJAX, PHP, MySQL aren‘t really as straightforward as they sounded to be. As a member from the sales team, you shouldn’t be expecting to become an expect on any of these subjects, after all, this is just a blog from an amateur.

What is HTML after all? Hypertext Markup Language or HTML(standardized by W3C or World Wide Web Consortium) is a browser-side language which can be interpreted by different browsers to present you all the beautiful and ugly billions of web pages out there. Basically with HTML you use a pair of tags(open tag and close tag) to present elements:<p></p> for paragraph, <h1></h1> for heading 1 etc. But there’re tags without closing tag, such as <br /> tag and <hr />tag. Like any language, HTML has its own grammar, always surrounded by <html></html>tags(the DTD(Document Type Definition) is another story), within which there’re <head></head>and <body></body> tags. Within head tags you’ll have title, meta(description, keyword), link(for CSS),script(which can also be put in body tags) tags. The main content are all located in body tags, here we’ll meet H1 through H6, p,table, div, span, ul, ol and other tags.

CSS is the short form of Cascading Style Sheets, which formats the HTML elements with different styles(be it background image, padding, margin or font size). It’s worth noting that you can format the margin or padding on four sides independently in a single line of code, it goes clockwise(namely top, right, bottom, left). CSS can be a individual .css file or embedded within the html files.

JavaScript was formerly known as EMCAScript(Sorry, EMCAScript is a standard, JS was firstly know as Livescript and developed by Netscape), but then renamed as JavaScript, probably it was due to this buzzword Java came around at the time it was renamed. We’ll talk more about JavaScript in the future.

Comparing to CSS and JS, HTML is like the building blocks of a web page, it controls the structure, CSS and JS are there to make the web pages in style and improve the interactivity.

HTML和CSS概述及HTML基本语法

HTML(Hypertext Markup Language超文本标记语言)是WEB页面的描述性语言,而CSS(Cascading Style Sheets层叠样式表)用于定义网页的外观和布局(字体、背景、文本、位置、边缘、列表等),JavaScript用来实现客户端的交互,PHP(Hypertext Preprocessor)是服务器端脚本语言,用于实现动态网页的功能,CSS和JavaScript以及PHP都可以嵌入在HTML中应用。
HTML文件通常有两种后缀名.html和.htm,一个典型的HTML文件由多个成对的开启<**>和闭合标签</**>加上相应内容组成(并非所有的标签都是成对的,如<br />),CSS文件的后缀名为.css,对外单独存取的css文件可通过类似<link href=”style.css” rel=”stylesheet” type=”text/css”/>的语句来调用,也可写在html的head中,如下所示

在有些情况下,可以直接将属性嵌入到标签中来实现对样式的定义,属性的值(不管什么类型)可以使用单引号、双引号、不加引号(W3C的标准是使用双引号),属性是对标记功能的扩展或行为的修饰,多个属性中间用空格分开,每个属性几乎都是可选的。

不论是HTML的标签还是属性都是不区分大小写的,但是推荐使用小写字母。HTML文档的注释格式为 <!–  注释内容  –>,在注释中不能再包含注释,在注释时要保证成对存在的标签保持完整。

在HTML源代码中,空格和换行将会被忽略。HTML中要显示一部分内容有时需使用字符实体,通常包含三部分:即以&开头,中间用一个实体名或是使用#号和一个编号,后面以分号;结束,如小于号<可以用 &lt;或 &#60;大于号>可以用&gt;  或&#62; 来进行显示。

HTML颜色的设置:设置颜色时可以是一个关键字(如Red, Blue)或RGB的数字格式(如#cccccc),下图为w3c(World Wide Web Consortium)所支持直接使用的16种颜色名以及对应的RGB16进制值,6位16进制的值是这样分配的,前两个代表R即Red,中间两个代表G,即Green,后面两个代表,B即Blue,两位16进制值可以从00到FF,即0到255,也就是这种方法可标识256*256*256=16777216种颜色
Color names and sRGB values
black = “#000000” green = “#008000”
silver = “#C0C0C0” lime = “#00FF00”
gray = “#808080” olive = “#808000”
white = “#FFFFFF” yellow = “#FFFF00”
maroon = “#800000” navy = “#000080”
red = “#FF0000” blue = “#0000FF”
purple = “#800080” teal = “#008080”
fuchsia = “#FF00FF” aqua = “#00FFFF”

HTML的主体标记包括三部分:

网页文件的最外层标签<html>

头部标签<head>,头部信息是不会显示在浏览器的内容中,可包含基本的描述如标题<title>,网页的公共属性如样式<style>等,其中还有<base />,<link />,<meta>,<title></title>用于定义网页标题,显示在浏览器的标题栏中,有助于搜索引擎优化(SEO);<base href=”” />为基底网址标记,用于设定浏览器中文件的默认绝对路径,如果设定,网页中的其它文件只需写入相对地址即可 ; <link rel=”” type=”” href=”” />用于设置所调用外部文件的链接,并确定当前页面与外部资源之间的关系;元标签meta有两种:<meta name=”” content=””>和<meta http-equiv=”” content=””>,前者用于在网页中加一些描述信息,如keywords, description, robots(值包含index, noindex, follow, nofollow, all, none), author, copyright,后者用于在HTML文档中模拟HTTP协议响应的消息头,例如告知浏览器有关缓存模式、字符集等信息,如Content-Type(字符集), refresh(设置刷新频率), expires(设置缓存时间), Windows-Target(分帧显示位置), Page-Enter,Page-Exit(进入页面和退出页面的物资)。

正文部分<body>标签,包含文本、图片、链接、表单等主体内容,也就是浏览器中显示的所有内容。body体中可指定多种属性,如bgcolor, alink, vlink, margin, padding,但这些通常通过css来进行控制,还有些其它通用属性:id, name, class, style。

除这三个部分,还有一个定义语法规则的DTD(Document Type Definition)即文档类型定义,如下面所示的内容