
web前端
文章平均质量分 53
GiantChan
这个作者很懒,什么都没留下…
展开
-
使IE兼容placeholder属性
如题。 近日在开发的过程中遇到一个问题,还是IE的兼容性问题,在webkit内核的浏览器中,我们可以设置placeholder来在form中的控件里添加提示性语言。但是在IE这个属性是不被支持的。 在网上逛了很久,找到了一个解决的方法,直接用js模拟: //LET IE SUPPORT PLACEHOLDER ATTRIBUTE //autofocu原创 2014-01-16 14:50:32 · 2431 阅读 · 0 评论 -
form中元素的排列
如题。 form中的元素都是内联的元素。但是我们又需要他有一定的格式,那么这里的排版如何实现呢? 一个是可以使用表格布局。 这里我们尝试的是dl.dd标签。 通过这两个标签我们可以很自由地进行表格的排版。。原创 2014-01-16 20:37:54 · 4071 阅读 · 0 评论 -
一款非常漂亮的bootstrap表单checkbox/radio样式推荐
如题。http://www.bootcss.com/p/icheck/这个bootstrap提供的icheck插件,首先是非常小。效率相对较高。其优点如下图所示:可以有十种颜色可以供用户自定义。样式也是够丰富的。更重要的是,其样式是根据css来的。也就是用户如果觉得不爽,可以直接修改css文件来达到进一步的自定义。如果你使用一个盒子来包住它。元素的大小就会根据父级元素来进行原创 2014-03-02 10:48:15 · 32072 阅读 · 1 评论 -
js实现省市区三级联动select
如题。 使用js模拟省市区三级联动select。 需要的插件如下: jquery.provincesCity.js:http://pan.baidu.com/s/1i3KC3hN provincesdata.js:http://pan.baidu.com/s/1sjNebjZ 需要同时引入jquery.原创 2014-01-16 15:22:06 · 4871 阅读 · 0 评论 -
js获取关于客户端显示屏幕的相关数据
如题: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高)原创 2014-01-16 14:37:02 · 1209 阅读 · 0 评论 -
检测浏览器的内核js并输出的语句
如题。 参考链接:1. http://leeyee.github.io/blog/2009/08/24/javacript-broswer-check/ 2. http://www.gracecode.com/posts/696.html 3. http://原创 2014-01-16 12:21:52 · 2728 阅读 · 0 评论 -
使用backgroundPosition来定位背景图片
*{ background:url(背景图片链接) X坐标 Y坐标;}如题。 这个问题大家一定会遇到。当你在制作网页的时候,一开始的背景图一定是每张图都切出来,一个button的hover效果,要准备两张背景图。这种做法主要有两个缺点: 1.图片在hover的时候会出现切换闪动; 2.如果要修改背景图,需要同时更换图片和修改源原创 2014-01-15 14:12:46 · 1822 阅读 · 0 评论 -
jquery 对select的操作
如题。 使用js直接操作select。一般会使用到下面的几个命令: var tmp = document.getElementById("select");//创建option方法1var tmpOp = document.createElementByTagName("option");tmp.value = "1"tmp.appendChild(tm原创 2014-01-15 19:20:58 · 1656 阅读 · 0 评论 -
jQuery animate方法
如题。 使用jQuery animate的方法能够对某一个元素的css属性执行渐变效果。 执行语句: $("元素(class或ID)").css({属性初始状态}).stop().animate({元素结束状态}, { duration: 持续时间 }); 使用这个语句基本上可以实现很多效果。 例如,让元素从透明原创 2014-01-15 18:53:36 · 1168 阅读 · 0 评论 -
js编程自我提醒
如题。 这一次使用的js语句有些多,但是触发执行这些语句的函数又主要是在window.onload=function(){}和 $(document).ready(function(){});函数中。在编写的时候为了省点麻烦,我偷懒没有将每个功能进行封装,直接将函数的语句写在了函数里面。导致的结果就是,需求一改动,整个函数的变动就特别大。整个文档的结构就变得非常杂乱。原创 2014-01-15 17:51:15 · 738 阅读 · 0 评论 -
radio控件使用
如题。 radio控件的使用,是通过name属性来控制的。只要你的radio的name是相同的。则可以使得该组中的radio控件只有一个可以被选中。 如果要控制某一个radio是默认选中的,则在该标签内加入checked即可。原创 2014-01-16 14:42:52 · 15289 阅读 · 0 评论 -
js实现购物车数量增减联动价格变化
如题。 使用js实现一个购物车中常见的功能:购物数量增减功能。 我实现的效果如图: 两边是两个input,中间是一个input输入框。HTML: JS://根据选择的数量计算总价,并显示出来function setTotal(){ var t = $("#num"); var tmp = docume原创 2014-01-16 10:33:53 · 10803 阅读 · 1 评论 -
IE7 overflow:hidden bug
如题。 IE7中,对某一个块级元素设置了overflow:hidden,该元素露出的部分无法被隐藏。 网上的解决方法,是在该元素的上层元素CSS属性中添加position:relative的属性。这样子就可以正常显示了。原创 2014-01-16 20:22:58 · 722 阅读 · 0 评论 -
侧边栏滚动跟随--兼容IE7 safari chrome firefox
RT.很多网站为了提高点击率,都会将最新的文章,或者是一些广告放在转载 2014-08-29 14:21:51 · 955 阅读 · 0 评论 -
修正clear:both失效
如题。 在网页开发过程中,我们经常会使用float这个功能,来对元素进行定位。但是这种做法导致了一个问题,就是原来该元素所在流式布局的位置会消失,对于应该在该元素下方显示的元素,其布局会变得混乱。这个时候,我们就可以使用clear:both这个功能来清楚浮动。 但是,有些时候这个clear:both的功能却会失效,这里给大家介绍一个好方法: http转载 2013-11-18 21:03:28 · 2829 阅读 · 0 评论 -
利用jQuery srollTop()函数实现类似锚点的定位效果-兼容chrome,firefox,IE,safari
如题。 在网页开发的过程中,锚点可以实现页面快速定位。 《1》 常见的情况,是同一个页面内导航和锚点的配合,但是跳转时是直接切换,效果生硬。 《2》 不同页面间的跳转,涉及到跳转后定位到设定的页面的锚点,可以使用URL传参实现。具体实现方法如下: 在导航栏中设定好跳转到的页面原创 2013-12-20 18:23:34 · 5163 阅读 · 1 评论 -
自定义滚动条插件--mCustomScrollbar
RT.插件官方网址:http://manos.malihu.gr/jquery-custom-content-scroller/中文翻译网址:http://www.qianxingzhem.com/post-1602.html原创 2014-08-29 13:59:02 · 2321 阅读 · 0 评论 -
前端页面实现组件从左向右不间断循环滚动
RT.我之前写过一个原创 2014-08-29 11:28:28 · 3231 阅读 · 0 评论 -
前台截取一定长度的后台返回文字,并在后面加省略号
RT.不废话,直接上代码.window.onload = function(){ var text = document.getElementById('infoText'), str = text.innerHTML, textLeng = 150; if(str.length > textL转载 2014-08-29 14:48:18 · 1383 阅读 · 0 评论 -
HTML页面图片自动适应宽度
RT.这个是之前做微信微站的时候yizhi转载 2014-08-06 18:54:19 · 5520 阅读 · 0 评论 -
html中文本控制相关知识总结
如题。html的组成部分不就是图片,视频,音乐,还有占大头的文字吗?在实现了内容的完整表达之后,我们追求让页面布局显得更加合理,更加美观。这设计到对这些元素的css样式的各种操作。首先,先研究一下文字吧。这是w3cschool中控制文字样式的一篇总结的文章。http://www.w3school.com.cn/css/css_text.asp这是css对文本操作主要的样式原创 2014-03-02 13:34:51 · 821 阅读 · 0 评论 -
js/jquery模拟radio单选效果
如题。现在我们已经不满足于仅仅使用原生单选按钮了。我们当然希望让自己的样式别出一格,可以随意修改其样式。 实现样式的话,使用ul/li进行配合是最好的。因为我们可以通过jquery很方便地获取到ul中li的个数。思路就是:1.给每一个li赋予一个序列化的编号。2.通过jquery.$("ul>li").length获取到ul中li的个数,选中的onclick函原创 2014-03-02 10:29:57 · 3993 阅读 · 0 评论 -
网页左中右布局
如题。 网页的左中右布局。实现类似于截图中的效果: 我使用三个div块级元素来实现这个布局。 外层使用一个大的div将其包住,高宽都限制。就把它们命名为div-left, div-middle,div-right吧。 其中,div-left的width:47%;div-middle的width:6%;原创 2014-01-15 17:42:11 · 2798 阅读 · 0 评论 -
弹出对话框层蒙版-基于lightbox-me插件
如题。 最近希望能够做一个弹出层,这个弹出层可以用来代替原生的alert。 这个弹出层可以根据自己的需要来自定义。整个结构和样式都可以重写。 这是官方主页的地址:http://buckwilson.me/lightboxme/ 使用的方法如下: JS代码: $('#pop-type0').lightbox原创 2014-01-05 22:05:18 · 1516 阅读 · 0 评论 -
css样式优先级
如题: 这是一篇非常好的文章:http://www.cnblogs.com/xugang/archive/2010/09/24/1833760.html 样式的优先级多重样式(Multiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。一般情况下,优先级如下:(外部样式)External转载 2013-11-25 11:01:29 · 970 阅读 · 0 评论 -
网页前端兼容问题
如题。 先收藏一片来自其他博客的文章:http://www.68design.net/Web-Guide/HTMLCSS/37154-1.html CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且D转载 2013-11-22 17:28:29 · 1515 阅读 · 0 评论 -
元素float,margin等属性使用总结
如题。 如果是一开始接触网页开发的筒子,可能会经常遇到一些问题,例如,几个元素在一起,想要通过float来将元素进行左右对齐,却发现怎么也对齐不了。或者对元素进行margin等属性. 首先,是float 。float来说,根据DOM的结构,一个元素要进行float,该节点的父节点之下所有的节点都应该float。否则不会有float的效果出现。原创 2013-11-20 15:22:33 · 1586 阅读 · 0 评论 -
HTML页面中input元素在android浏览器中获得焦点后页面放大解决方法
如题。 在开发微信端微店页面的过程中,页面需要使用焦点轮播图,由于开发周期短,所以直接使用之前适配在电脑端页面的焦点轮播图。这个焦点轮播图是设置了960px的宽度,为了适配页面,所以在开发的时候页面元素全部参照焦点轮播图的尺寸来进行设计。 在这个页面中,如果不使用HTML5专门为移动终端网页开发设计的viewport标签,在苹果的safari浏览器下,默认是以全原创 2013-11-20 14:09:29 · 9084 阅读 · 0 评论 -
iframe对透明的支持
如题。 iframe下的png格式和gif图片均无法显示透明。 iframe如果不对各种参数进行设置,则会出现各种问题。例如,iframe的transparent透明属性。这个属性只有将其设置成支持透明,子页面上的png和gif等透明格式的图片的背景才能够透明。 之前一次没有设置,一直以为是IE浏览器的兼容问题,通过各种尝试之后,发现了这个问题。原创 2013-11-18 20:11:44 · 1084 阅读 · 0 评论 -
制作定位于网页底部的footer
如题。 现在很多网页的登陆页面都很炫。 底部的footer都采用了一个半透明的黑色色块加上各种版权信息。实现方法如下: div的底色设置为#FFF。然后设置其opacity值为0.66。opacity的参数可能要对不同的浏览器作兼容。 然后,我们设置登陆页面,在footer的div中将footer的position设置为"fi转载 2013-11-18 21:23:45 · 1729 阅读 · 0 评论 -
网页增加返回按钮
如题。 最近在做微信移动端开发,微信移动端有个很恶心的东西就是上面左上角有一个返回按钮,一按就返回到微信公众平台点击进去的第一个页面。虽然微信内置浏览器有前进和返回的按钮,但是对于用户来说,显然习惯了点击左上角的返回按钮,于是就会造成许多的误操作。对于我们的微店来说,也是个很碍事的东西,必须去掉。 首先,隐藏掉微信内置浏览器的工具栏,微信官方的开发接口提供了解决原创 2013-11-18 20:57:53 · 7162 阅读 · 3 评论 -
HTML5对手机等移动终端的网页适配
如题。 一个电脑端的页面尺寸是非常大的。在针对移动端的设备开发中,就必须采取一些特殊的处理方法。 html5提供了一个非常便捷的解决方法:viewport。 通过这个meta标签就可以使得页面在移动端的设备屏幕全屏显示,并且禁止用户使用触屏的缩放功能。使用该标签后,建议对网页下的所有元素的宽度都采用百分比设置。也可以通过javascript中的转载 2013-11-18 20:23:29 · 8561 阅读 · 0 评论 -
后台管理界面,使用a标签配合iframe实现动态局部刷新
如题。 在写后台管理系统时,需要实现后台界面的局部动态刷新。 左边的导航栏使用a标签进行设置,通过href和target属性的配合,就可以将iframe中的子页实现动态刷新。 如题: 假设iframe的id设置为test.name也为test.转载 2013-11-18 19:10:40 · 5649 阅读 · 0 评论 -
自定义日期时间选择器
如题。 对于移动端网页开发来说,有时候会涉及到时间日期的选择。由于安卓,IOS,windows phone各家手机系统的不同,如果单纯使用select来实现日期时间选择功能将造成各个HTML在各个不同的手机终端下面的功能操作不一致。 现在我给大家推荐一款基于jQuery开发的插件,这个插件能够使得在各个不同的操作系统下面实现操作界面的统一,是一款非常有用的利器。原创 2013-11-25 23:00:15 · 3588 阅读 · 9 评论 -
网页富文本编辑器推荐
如题。 进行网页开发的时候,textarra并不能够满足我们的所有需要。如果你正在寻找合适的富文本编辑插件,我这里可以给大家推荐几款: 百度Ueditor: 这个editor是我目前正在使用的。功能强大,直接网页自定义,而且部署非常简单。 项目主页:http://ueditor.baidu.co原创 2013-11-27 14:23:31 · 4369 阅读 · 0 评论 -
<script>中text/javascript和application/javascript两个不同属性的区别
如题。 我最近在做的一个项目里面遇到一个小问题。就是我写在标签中的javascript语句,在chrome,safari,firefox,IE9.10.11上面都可以正常运行,但是到了IE8以下的浏览器就无法运行了。 一开始以为是我的语句里面有一些兼容性问题,于是我又单独写了个例子去运行,同样的javascript代码在各个浏览器中都成功运行,可是到了我的项目原创 2014-01-03 13:11:01 · 15765 阅读 · 1 评论 -
position:absolute后使得元素居中
如题。 网页布局中有一种情况是这样子。 两个元素,A,B均为块级元素,但是我需要A作为底,而B显示在A上面,并且相对于A确定在某个位置。 考虑使用position.position有三种,分别是fixed,relative,absolute。 static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行原创 2014-01-05 21:42:52 · 1887 阅读 · 0 评论 -
【同域】根据iframe中引用的网页的高度来修改父级页面的iframe高度-iframe自适应子页高度
如题。 网上提供了很多方法。但是在进行测试的时候都会出现这样那样的问题。在一个好同学的帮助下,我使用了这种方法来实现了这个功能。 在父级页面iframe元素外部使用一个元素包围住。然后设置的初始高度不需要设置,设置好宽度,然后被包围的iframe的高度宽度均设置为100%;你也可以不用div,直接通过子页中的方法来修改父级页面iframe的高度。原创 2013-12-20 19:49:40 · 6194 阅读 · 2 评论 -
jquery实现页面返回按钮
如题。 当网页比较长之后,我们需要在页面添加一个返回顶部的功能。这个功能我们实现的方法有很多,例如,可以使用window.scrollTo(0,100)来实现。 如果我要求实现的效果炫一些。 例如,当页面滑动到一定的距离之后再出现这个返回按钮,返回按钮出现与消失要有淡出淡入的效果,来吧,让我用下面这段函数做出这个效果吧: js原创 2013-12-20 19:11:00 · 2464 阅读 · 0 评论 -
使用Jquery实现顶部导航栏在页面滑动到自身所在位置之后固定在顶部的效果
如题。 《1》 我们经常会实现一种效果,这种效果让页面内的导航条在页面向下拉动的过程中一直固定在某个位置。有时候在顶部,有时候在侧边。实现的方法非常简单,只需要通过CSS进行元素的控制。 要点有:position:fixed;通过bottom、top、left和right四个属性来对元素在页面中的位置进行调整。 基本上对这两个原创 2013-12-20 18:56:11 · 10602 阅读 · 1 评论