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 = […]
Firebug使用相关
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对象的所有命令和方法,这些命令可以写在文件中，也可以在控制台右侧的多行调试框中输入并点击运行来进行查看
HTML+CSS常见问题
常用技巧和经验 各元素在浏览器的样式尽可能的与新标准保持一到处： 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)
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 […]
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中，如下所示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<html> <head> <title>Alan's Blog</title> <style type="text/css"> a:hover{ color:red; } img{ border:5px solid black; } p{ font-size:10px; } table{ border:2px solid red; width:600px; } </style> <!-- Comment goes here --> </head> <body> <p>Surrounded by paragraph tags.</p> <a href="http://alanhou.org">Alan's Blog</a> <img src="logo.png" /> <table> <tr> <td>Column No.1</td><td>Column No.2</td> </tr> </table> </body> </html> |
在有些情况下，可以直接将属性嵌入到标签中来实现对样式的定义,属性的值（不管什么类型）可以使用单引号、双引号、不加引号（W3C的标准是使用双引号），属性是对标记功能的扩展或行为的修饰，多个属性中间用空格分开，每个属性几乎都是可选的。
|
1 |
<table border="1" cellpadding="1"></table> |
不论是HTML的标签还是属性都是不区分大小写的，但是推荐使用小写字母。HTML文档的注释格式为 <!– 注释内容 –>，在注释中不能再包含注释，在注释时要保证成对存在的标签保持完整。 在HTML源代码中，空格和换行将会被忽略。HTML中要显示一部分内容有时需使用字符实体，通常包含三部分:即以&开头，中间用一个实体名或是使用#号和一个编号，后面以分号;结束，如小于号<可以用 <或 <大于号>可以用> 或> 来进行显示。 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 […]
我的认证
