随笔分类 - 前端效果
摘要：text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:200px;
阅读全文
摘要：常用的 viewport meta 如下：11、width :控制viewport的大小，可以指定一个值，如600， 或者特殊的值，如device-width为设备的宽度（单位为缩放为100%的CSS的像素）2、height :和width相对应，指定高度3、initial-scale :初始缩放比例，页面第一次加载时的缩放比例4、maximum-scale :允许用户缩放到的最大比例，范围从0到10.05、minimum-scale :允许用户缩放到的最小比例，范围从0到10.06、user-scalable :用户是否可以手动缩放，值可以是：①yes、 true允许用户缩放；②no、fal
阅读全文
摘要：#fmjtest{ display:inline-block;}#fmjtest li{text-align:left;}div{width:100px;} testestsetse test
阅读全文
摘要：1.使用表格 的垂直居中特性2.div的绝对定位 已知高度的情况下比较好弄.3.用背景实现.前景元素visibility:hidden;4.父元素table-cell5.line-height 图片会跟随文字垂直居中.
阅读全文
摘要：页面上给window对象定义其onresize事件，在拉伸缩小窗口时，其onresize方法将被执行多次，并且其具体执行的次数在不同的电脑有不同的值，相当诡异，Firefox等其他浏览器则无此现象，故可认定此为IE浏览器的bug。看看代码：<html><head><script type="text/javascript"> function resizeFunc(){ alert(Math.random()); } </script></head><body> <div>Text...&l
阅读全文
摘要：--> 样式单的一个最重要的特点就是它可以作用于多种媒体，比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体，如"font-size"属性只对可卷动的媒体类型有效(屏幕)。 声明一个媒体属性可以用@import或@media引入：以下是引用片段：@importurl(loudvoice.css)speech; @mediaprint{ /*stylesheetforprintgoeshere*/ } 也可以在文档标记中引入媒体：以下是引用片段：<linkrel="stylesheet"type="text/css&quo
阅读全文
摘要：1、前端页面有哪三层构成，分别是什么？作用是什么？结构层（由 HTML 或 XHTML 之类的标记语言负责创建）、表现层（由CSS控制）、行为层（Javascript 语言和 DOM 主宰的领域）2、啥子是css内联式，外联式，嵌入式?内联式就是样式的属性内容直接跟在将要修饰的html标记里，如：<div style=”height:30px;font-size:12px;”></div>外联式就是通过<link href=”my.css” type=”text/css” rel=”stylesheet”/> 或者 @import url(my.css);
阅读全文
摘要：这是第一个 这是第二个 这是第三个 这是第四个 这是第五个 这是第六个
阅读全文
摘要：做了一个导航菜单,每一个item的背景图片都是不一样的.且都有hover效果.点中后也有对应的图片效果.每次切换背景的src,在图片缓存没有产生之前,的切换会有闪屏现象,后来想到了通过修改背景图片的position来实现样式转变,把hover效果和default效果合成一张图.这样首次打开页面时图片就加载完成了.消除了闪屏现象.
阅读全文
摘要：http://www.uploadify.com/利用此插件实现:Asp.Net无刷新上传并裁剪头像http://www.cnblogs.com/zhongweiv/archive/2011/11/29/CutAvatar.html
阅读全文
摘要：js代码:View Code var china = [ //直辖市 ['北京市'], ['上海市'], ['天津市'], ['重庆市'], //华北地区 ['河北省','石家庄','唐山','秦皇岛','邯郸','邢台','保定','张家口','承德','沧州','廊坊','衡水'], ['山西省','太原'
阅读全文
摘要：js实现城市级联选择，二级选择。代码实例：以下代码可以直接粘贴使用，但里面的城市并不完整。实现原理是利用 js的onchang方法，调用city.js文件里的changecity()函数，var text = city[index][i].split(“-”); 这个方法是把new Array()数组拆分进text变量数组里，然后text[0]是文本区域中的值，text[1]是选中的值。<script language=”javascript” src=”city.js”></script><form action=”" method=”post” na
阅读全文
摘要：http://code.google.com/p/talent-validate/downloads/listtalent validate 非常灵活和易用的Html前端输入验证框架http://rickharrison.github.com/validate.js/另一款js验证框架,也很小.
阅读全文
摘要：今天写一个全选功能,在chrome和firefox下测试都正常实现效果,到了ie下死活没效果.一番周折,测试发现勾选了以后还要点击其他位置才会触发onchange事件.用度娘查询了一下.有下面两种解决方式:用onclick事件代替1、<input type=checkbox onclick="alert(this.value)" value=huerreson>用onpropertychange事件代替2、<input type=checkbox onpropertychange="alert(this.value)" value=hu
阅读全文
摘要：Html中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素设置为可写．我们最常用的输入文本内容便是input与textarea 使用contentEditable属性后，可以在div,table,p,span,body,等等很多元素中输入内容． 如果想要整个网页可编辑，可在body标签内设置contentEditable contentEditable已在html5标准中得到有效的支持。 在IE8下设置表格可写不支持...
阅读全文
摘要：<script type="text/javascript"> function getClass(tagName, className) { //第一个参数 表示是className是所属那个dom标签下,这样为了提高检索效率 //如果是火狐择调用火狐的getElementsByClassName 内置函数 if (document.getElementsByClassName) { return document.getElementsByClassName(className) ...
阅读全文
摘要：今天看js教程,做了一个js放大镜效果,小小的开心了一把.下面为js源码:View Code <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>放大镜效果</title> <style type="text/css"> #div1 { width: 200px; height: 150px; padding: 5px; border: 1px solid #ccc; ...
阅读全文
摘要：<style><!-- .container, .container *{margin:0; padding:0;}.container{width:695px; height:202px; overflow:hidden;position:relative;}.slider{position:absolute;}.slider li{ list-style:none;display:inline;}.slider img{ width:695px; height:202px; display:block;}.slider2{width:2500px;}.slider2 li
阅读全文
摘要：效果图：js代码：var isIE = (document.all) ? true : false;var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id;};var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } }}var Extend = function(destination, source) { for (v
阅读全文