0

JS实现放大镜效果

Posted by Alan on September 14, 2014 in HTML5&CSS3, 无门无派 |

电商网站中会经常出现图片的放大效果,在产品页面尤为常见,如淘宝、京东、一号店等网站都会采用悬浮鼠标在右侧出现图片放大效果。 要实现这种效果可能过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 = […]

Tags: , ,

0

Firebug使用相关

Posted by Alan on August 17, 2014 in HTML5&CSS3, 电商经验 |

Firebug是网页浏览器Firefox下的一款开发类插件,集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手。在日常使用中常会同时安装其扩展Yslow来一并对网站进行调试。同时为了兼容其它浏览器,还开发有Firebug Lite,功能略弱于Firebug。 安装完后要开启Firebug,可点击浏览器工具栏中的图标,也可按下F12开启,关闭方法与开启方法相同,另外按下Ctrl+F12将会在弹出的窗口中开启Firebug的调试窗口。调试窗口中主要包含控制台标签、HTML标签、CSS标签、脚本标签、DOM标签、网络标签和Cookies标签,可通过点击调试窗口左上角的,然后在可见面板中勾选或取消勾选来显示或隐藏相应的标签,调试窗口右上侧还有搜索窗口,能过搜索方便找到所需查看的内容。 控制台标签为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对象的所有命令和方法,这些命令可以写在文件中,也可以在控制台右侧的多行调试框中输入并点击运行来进行查看

Tags: , , ,

0

HTML+CSS常见问题

Posted by Alan on August 16, 2014 in FAQ |

常用技巧和经验 各元素在浏览器的样式尽可能的与新标准保持一到处: https://github.com/necolas/normalize.css 针对IE,其中的edge表示按照可用的最新模式显示 按窗口大小显示 如何去除iPhone上视频默认的播放按钮 在应用html5的video标签时,明明加了autoplay=”true”,可是在iPhone上打开时还会出现播放按钮,这时需要加一段CSS来进行去除(视频在具体的class或id内的请自行加入): 清除样式和浮动 在书写代码过程中,很多元素可能在不同浏览器中会自带margin,padding等样式以及自带浮动,可能过建立一个类似下面这样的通用的CSS代码来进行统一处理,避免实际展现效果出现偏差。 清除浮动可采取两种方法, clear:both或width:100%; overflow:hidden; 针对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名如 假设以上的文件名为ie6Fixpng.js并和修复文件一并放在js文件下,则在待修复文件头部加入如下代码: 这样png文件在IE6中也可以透明显示了。 HTML中文乱码 通过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(),将会出现同样的报错 如何判断是否微信浏览器 PHP代码 如何去除iPhone, iPad上视频的默认播放按钮? 在iPhone, iPad的Safari浏览器中视频默认会出现一个播放按钮,想要去除这个按钮只需通过伪元素来设置即可(*代表所有标签,也可设置video)

Tags: , , ,

0

Html and JavaScript Mumbo Jumbo Part 1

Posted by Alan on January 7, 2014 in 个人随笔 |

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 […]

Tags: ,

0

HTML和CSS概述及HTML基本语法

Posted by Alan on March 19, 2013 in Coding |

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 […]

Tags: , , , , , ,

Copyright © 2012-2018 记录点滴生活 | Alan Hou的个人博客 All rights reserved.