月份: 2013-09

jquery banner广告文字图片滚动插件,支持图片以及文字滚动水平左右滚动,垂直上下滚动,幻灯片焦点图片滚动

jquery banner广告文字图片滚动插件。

用他可以制作: 

1. 文字水平左右滚动,文字垂直上下滚动。文字间歇滚动,文字无缝衔接滚动。支持滚动方向控制按钮。

 2. 图片水平左右滚动,图片垂直上下滚动。图片间歇滚动,图片无缝衔接滚动。图片滚动方向控制按钮。 

3. 幻灯片焦点图片水平滚动,幻灯片焦点图片垂直滚动。 

  

在线演示:http://www.17sucai.com/preview/1/2013-05-06/jquery%E5%9B%BE%E7%89%87%E6%96%87%E5%AD%97%E6%BB%9A%E5%8A%A8%E6%8F%92%E4%BB%B6/demo.html

下载地址:http://pan.baidu.com/s/1bnzkjgF

jquery文字特效限制内容列表字符长度或文字个数

在网站项目中为了保证页面的美观,对于一些标题特别长的标题都习惯截取前N个字符,然后加上“……”。

一般处理的时候直接由服务器程序来截取文字,这样生产的html中标题文字不全,会一定程度的影响网站的seo优化。

我们也也可考虑在网站的前端,用过js脚本来截取字符。这样在html中输出的嗨是全部标题,不影响网站的seo优化。又能起到美观的作用。

下面就是一个用jquery写的文字截取。希望对大家能有所帮助。
用jquery文字特效限制内容列表字符长度或文字个数

<script type="text/javascript">
    $(document).ready(function() {
        var arrLinks = $(".ranklist a");
        arrLinks.each(function() {
            var s = $(this).text(),
            l = $(this).text().length,
            n = 18; //设置字符长度为18个 
            if (l > n) {
                //文本所有内容用a标签的title属性提示文本全部内容
                $(this).attr("title", s);
                s = $(this).text(s.substring(0, n) + "...");
            }
        });
    });
</script>

核心部分
在线演示地址:http://demo.lrxin.com/jquery/text/jQuery%cf%de%d6%c6%ce%c4%d7%d6%b8%f6%ca%fd/

下载地址:http://pan.baidu.com/share/link?shareid=1454481964&uk=1010090726

封装成jquery插件。

/**
 * $.txtCur();
 * @charset utf-8
 * @extends jquery.1.8.3
 * @example
 * $('.info').txtCur({n:50});
 * $('.info').txtCur({n:50,z:'...',isTitle:1});
 */
(function($){   
    $.fn.extend({     
         txtCur: function(options) {   
		    //默认参数
            var defaults = {
			     /**截取长度 */
                 n:60, 
				 /*结尾添加字符*/
                 z:'...' ,
				 /*是否在标签上 添加 title 属性*/
				 isTitle :  true
               			 
            }        
            var options = $.extend(defaults, options);   
            return this.each(function(){
			    var o = options;   
                var $this = $(this);				
               	var s = $this.text(),
				l = $this.text().length,
				n = o.n; //设置字符长度为18个 
				if (l > n) {
					//文本所有内容用a标签的title属性提示文本全部内容
					if(o.isTitle) {$(this).attr("title", s);}
					s = $this.text(s.substring(0, n) + o.z);
				}
				/**/
 
            });   
        }   
    });   
       
})(jQuery);

页面前端的水有多深?再议页面开发

但凡从事互联网的人基本都会写几行html,用过Word的人用Dreamweaver也能做出规整的页面,所以大部分人会很自然地认为“页面 的开发没什么技术含量,很简单”。不仅有这种普遍的认知,对从业者来说也有很多疑惑:做页面前端实现,没问题;兼容性,小case;图片集成,一直都在 用……还能有什么问题?瓶颈啊、天花板啊、转型啊、出路啊就在从业者中广泛讨论。是不是真的没什么问题了呢?网易邮箱前端技术中心也设立好几年了,似乎有 着讨论不完的话题,也经常会有一些新的想法让大家为之一振。那么页面开发还有哪些要求,还要做些什么,这里面的水有多深,让我们舀舀看。
在 不同的时期对页面前端的看法似乎是多变的。在互联网早期的时候,小车还是比房子贵的,烧饼和粉丝还只是用来吃的,菊花还只是用来泡茶的。那时的页面设计风 格相对单一,对应的页面需求比较简单,并且当时的浏览器也基本是IE6的天下,javascript也只是网页特效的代名词,HTML页面本身没有引起太 多人的关注,似乎只要能用div甚至table加css辅助把图片定好位,把页面内容预留好就OK了,并且这种观念存在了很长一段时间。随着页面内容的丰 富,设计风格的发展,交互复杂性的增加,AJAX的应用,浏览器的更新换代,又让大家重新对最基本的页面本身重视起来。然后热议的就是浏览器的兼容性,碰 到问题最热衷的就是满网络搜索hack,顺便再骂骂IE6、7……当这些都做一遍后,似乎又遇到了瓶颈,又开始寻找出路。我们就从这个阶段开始说起。
实现效果图是最基本的工作
把 视觉稿通过页面代码的方式表现出来包含了两个基本诉求:1.能够真实反映视觉稿;2.能够通过浏览器的兼容。这两个诉求的达成需要我们有追求细节的态度和 一定的页面功底,能完成这两个内容就可以初步进入页面前端的从业者行列了,但这就代表着我们可以胜任页面开发的工作了?不,才刚刚开始!
与设计师的沟通和项目的参与
沟 通很重要。先抛出几个问题:我们有没有和设计师探讨过某些效果对低端浏览器渲染效率影响比较大?有没有探讨过部分效果可以用CSS3实现从而使得结构更加 简洁清晰?有没有在代码和视觉中寻追求过平衡?页面前端的开发向基本用户,编写的代码也直接作用在浏览器上,我们有义务对页面的稳定性和渲染效率负责。我 们也经常碰到项目在总体进度压力下导致的设计与页面前端开发同步进行,这时更有必要尽量多地获取项目信息,了解我们还要做些什么,这些可以帮助我们充分考 虑重用和框架拓展。
良好的页面结构
页 面结构的编写好比盖房的地基建设,其好坏会直接影响到CSS代码的质量、js开发、后台开发还会影响到以后的页面拓展、迭代和页面调整。拿到视觉稿后,不 要忙着动手开始,多观察思考。先分析布局,划分框架,然后规划结构,编写代码。特别在大型项目中,合理使用模块化的开发不论从整体进行还是拓展维护都有相 当大的好处。
关于hack
很 多同学在页面开发时上网搜索最多的就是hack了,是否我们完全要依赖hack来实现页面兼容性,答案是否定的。大家经常比喻IE6向我们撒了一个谎,结 果我们要再撒一百个谎来圆这个谎。不否认IE6经常让我们口吐鲜血,但不代表我们用更多的“谎言”来弥补就可以心安理得。大部分情况下可以通过变换思路调 整HTML结构,或使用一些虽然无法解释但相对安全的css来干掉hack。谁都无法预计使用hack什么时候会让我们栽一个大跟头。比如触发 layout或position:relative就可以帮助解决很多IE6的问题。
优美的代码
现 在很多web项目功能复杂,代码规模也会变得很庞大,如何更好地进行协同开发和维护是我们面临的一个问题。需要考虑完善统一的规划,还有要养成良好的代码 开发习惯才会在面临各种情况时游刃有余。翻阅页面代码,看到合理的标签使用、良好的注释、清晰的代码结构、用意准确的css不仅犹如欣赏一个艺术品,更为 下游开发和协同开发降低了不小的沟通成本,我们有什么理由不去这么做呢?举个反面例子:div滥用是现在比较典型的一个问题。数数看自己使用的标签有多少 个呢?不同的语义都该使用对应的标签代码,特别是HTML5提供了更丰富的语义化标签,它们都苦苦地在等待战场上的冲锋号,让我们去解放它们吧!
无障碍页面开发
可 访问性与易用性是非常主观且人性化的东西。普通人看上去上完美呈现的页面在特殊群体中不一定显得那么贴心。当盲人用读屏软件在页面某个区域内陷入循环时, 我们应该感到内疚。只能说目前国内的网站对此的重视程度还远远不够,这就需要我们共同努力,让更多的人感受到我们的热情。
保障效率
作 为项目开发中比较靠前的一环,页面开发可能需要尽早完成为项目争取时间,这就需要我们尽可能地提高效率。“工欲善其事,必先利其器”,除了实战经验和代码 习惯的形成可以帮助我们提高效率外,想要提高对自己开发的进度掌控能力,还有很多辅助工具可以帮助我们进行页面开发。比如使用Less或Sass可以帮助 我们拓展和组织CSS,大大提高CSS的编写效率增加了可维护性。比如可以通过zen coding的自动自动完成和自定义代码块让你可以剑指如飞。甚至还见过通过自定义输入法的代码块关键字来提升开发速度的。多多发掘一定会找到最合适自己 使用的工具。
针对服务器的优化
页 面开发也需要了解服务器的优化,尽量减小服务器负担。比如css sprite就是一个典型减小服务器请求数的例子。在网易邮箱的页面前端开发中大家不停地在做着各种优化,比如一直在寻求文件大小与服务器请求数的平衡; 为了尽可能提高缓存利用率采用了补丁升级;对class名进行了混淆压缩避免命名过长的冗余;应用base64减少请求数量等等措施。这些都是综合权衡的 结果,需要考虑各个方面整体优化。因为当页面访问量达到一定的数量级时,再小的一点优化都会达到可观的效果,再小的问题都可能会形成巨大的灾难。
拥抱HTML5
这 是一个充满机会的时代,HTML5时代的来临伴随着移动互联网的兴起创造了更大的机会,还有太多的东西值得我们去学习去发现。 HTML5提供了丰富的JS API接口,需要我们去研究;CSS3的绚丽吸引了足够多的眼球,需要我们去研究;移动设备上如何开发更加适配的页面,需要我们去研究……
Stay Hungry, Stay Foolish
水 是越舀越多了,却发现原来下面还深不见底,上面的内容越是深入研究就越会发现更多山川需要翻越。保持饥饿状态,用眼睛去努力发现发掘,不断丰富技能才能找 到定位,突破瓶颈,正所谓“唯有高屋建瓴方可水到渠成”。形成本文是因为之前和同行讨论到瓶颈的问题,想给自己,给页面前端的同学一起找找定位,梳理一下 思路。拿苹果CEO在斯坦福演讲的一句话“Stay Hungry, Stay Foolish”和大家共勉。
本文转自:http://ntesmailfetc.blog.163.com/blog/static/206287061201241692848617/

基于jquery的 搜索框 默认文字,及select下拉框美化效果

搜索框select下拉框美化

基于jquery的 搜索框 默认文字,及select下拉框美化效果

下载地址:http://pan.baidu.com/share/link?shareid=2366705926&uk=1010090726

在线演示:http://demo.lrxin.com/jquery/form/jquery%20%b1%ed%b5%a5%c3%c0%bb%af%20input%20%bf%f2%c4%a3%c4%e2select%d1%a1%d4%f1%bf%f2%20%bb%f1%c8%a1%d1%a1%b6%a8%b5%c4value%d6%b5.html

这个jquery.pngFix.js在处理IE5.5和IE6png半透明方面已经超神了!

这个jquery.pngFix.js在处理IE5.5和IE6png半透明方面已经超神了!

在网上找个很多关于 处理 png图片在ie6下半透问题的方法,多多少少都有些限制或瑕疵。

例如有些仅支持: <img src=”pngtest.png” />

有些支持背景,但不支持背景位置定位 background-position 属性。
而这个完全支持,超神了!

<script type=”text/javascript” src=”jquery-latest.pack.js”></script>
<script type=”text/javascript” src=”jquery.pngFix.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(document).pngFix();
});
</script>

 

下载地址:http://pan.baidu.com/share/link?shareid=3635301467&uk=1010090726

官方网址:http://jquery.andreaseberhard.de/pngFix/index.html

 

html img Src base64 图片显示

Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。比如上面那串字符,其实是一张小图片,将这些字符复制黏贴到火狐的地址栏中并转到,就能看到它了,一张1X36的白灰png图片。
  在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。
  目前,Data URI scheme支持的类型有:
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
  base64简单地说,它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具,在PHP中可以用函数base64_encode() 进行编码,如echo base64_encode(file_get_contents(‘wg.png’));
目前,IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入。

 

举个图片的例子:

 

网页中一张图片可以这样显示:

<img src=“http://www.letuknowit.com/images/wg.png”/>
也可以这样显示:
<img src=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>