javascript小记

发表于 2011/07/14 由 前端开发-武方博  745 views

js自定义方法–addClass function addclass(elm,newclass){ 　　var classes = elm.className.split(' '); 　　classes.push(newclass); 　　elm.className = classes.join(' '); }   split() 方法用于把一个字符串分割成字符串数组。 join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。可指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。 push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。提示：要想数组的开头添加一个或多个元素，请使用 unshift() 方法。     a.x = a = { }, 深入理解赋值表达式 var o = {x : 1}; var a = o;   a.x = a = {name:100};   console.log(a.x);    // undefined console.log(o.x);    // {name:100}   // a.x = a = {name:100}; // 等价于 a.x = (a = {name:100}); // 首先计算a.x的引......查看更多>>

发表在 javascript | 标签为 , | 留下评论

jQuery下拉菜单(根据元素位置定位)

发表于 2011/07/13 由 前端开发-武方博  1,065 views

鼠标移动到需要展现下拉菜单的元素上面以后显示下拉菜单 但是展开的菜单和下拉按钮不在一个元素下面，是根据下拉按钮的位置来定位的   演示地址：http://www.wufangbo.com/demo/jquery/13/index.html 下载地址：http://www.wufangbo.com/demo/jquery/13/13.rar   主要的js代码 <script type="text/javascript"> function getTop(e){ var offset=e.offsetTop; if(e.offsetParent!=null) offset+=getTop(e.offsetParent); return offset; }   function getLeft(e2) { if (e2.offsetParent) return (e2.offsetLeft + getLeft(e2.offsetParent)); else  return (e2.offsetLeft); }   $(function(){   show=false;   $("#menu li").each(function(){ $(this).hover(function(){        var top=getTop(this)+30  var left=getLeft(this)  $(".newMenu&qu......查看更多>>

发表在 jquery, 前端开发 | 标签为 , | 一条评论

javascript单行新闻滚动一例

发表于 2011/07/13 由 前端开发-武方博  982 views

  鼠标移动上去的时候有点小问题  直接上代码了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title> new document </title> <style type="text/css"> #scroll {margin:0;list-style:none;border:1px solid red;width:600px;height:28px;overflow:hidden} #scroll li {margin:0;padding:0 4px;font-size:12px;height:28px;line-height:28px;width:600px;} </style> <script type="text/javascript"> window.onload = function() {  dMarquee('scroll'); } fu......查看更多>>

发表在 javascript | 标签为 , , | 一条评论

谷歌加(google+)打不开可修改Host文件

发表于 2011/07/12 由 前端开发-武方博  3,271 views

  Google+国内暂无法访问，如果需要访问请在host文件（C:\windows\system32\drivers\etc）添加以下内容： 203.208.46.29 plus.google.com 203.208.46.29 talkgadget.google.com 203.208.46.29 picasaweb.google.com 203.208.46.29 lh1.ggpht.com 203.208.46.29 lh2.ggpht.com 203.208.46.29 lh3.ggpht.com 203.208.46.29 lh4.ggpht.com 203.208.46.29 lh5.ggpht.com 203.208.46.29 lh6.ggpht.com 203.208.46.29 lh6.googleusercontent.com 203.208.46.29 lh5.googleusercontent.com 203.208.46.29 lh4.googleusercontent.com 203.208.46.29 lh3.googleusercontent.com 203.208.46.29 lh2.googleusercontent.com 203.208.46.29 lh1.googleusercontent.com   需要google+1邀请码的朋友，请留下邮箱地址。我会尽可能的邀请大家。 查看更多>>

发表在 前端资讯 | 标签为 , , | 20 条评论

js随机生成滚动发货记录

发表于 2011/07/01 由 前端开发-武方博  1,628 views

先上下效果图， 订货人的姓名 电话号码 地址都是随机生成的，时间调用当前日期！     演示地址：http://www.wufangbo.com/demo/javascript/03/index.html 下载地址：http://www.wufangbo.com/demo/javascript/03.rar 代码（自行复制）   <html> <head> <title>test</title> </head> <script> //公告滚动 var tt1;     function start(){         demo=document.getElementById("xdemo");         demo1=document.getElementById("xdemo1");         demo2=document.getElementById("xdemo2");         if(demo2==null){             return;         }                 ShowN......查看更多>>

发表在 javascript | 标签为 , | 11 条评论

webkit内核下mediaplayer遮挡div

发表于 2011/06/18 由 前端开发-武方博  2,481 views

今天遇到了一个变态的问题，网页中插入windows media player的时候，在ie和火狐，opera里面一切正常，但是chrome里面div总是在播放器空间的下面， 用设置flash透明的方法解决不了，在网上也找不到相关的资料，由于要在播放器上面做一个弹出层，最后我的解决办法是加一个空的iframe把播放器给遮挡起来，当弹出层显示的时候把iframe也显示出来！弹出层关闭的时候iframe也隐藏！（弹出层插件外面的div改成iframe也可以的）多么变态的方法啊！因为在chrome里面播放器空间的层级好像没有iframe高！ 先看下图片 这是我的测试代码（变态的解决办法已经在上面列出来了，不再搞了，fuck,） 哪位大哥大姐有好的解决办法欢迎来搞我！   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <......查看更多>>

发表在 前端开发bug修复 | 标签为 , | 15 条评论

png24在ie6下透明终极测试

发表于 2011/06/12 由 前端开发-武方博  1,814 views

前一段时间项目中需要用到png透明，测试了好多都不可以 。 可能是项目中position用的太多了，本来可以修复png透明的时候 却出现了好多莫名其妙的BUG。 下面是两种最常用png修复方法，一种是用ie滤镜修复的！ 方法一：iepngfix.htc 演示地址：http://www.wufangbo.com/demo/css/09/01/index.html 下载地址：http://www.wufangbo.com/demo/css/09/01.rar 1：下载脚本，将其中的iepngfix.htc和blank.gif解压缩到合适的目录内，.htc即Html Components，该文件需要在CSS中被调用；blank.gif是一个1×1像素的透明GIF图片，缺少该文件会使<img>标签插入的PNG图象显示为红色的叉烧包。 2：在iepngfix.htc中修改blank.gif的路径，var blankImg =‘blank.gif的正确路径’，这是惟一一个需要修改的配置。 3：在css中将需要使用透明PNG的元素与.htc文件关联。 例如：*{behavior: url(iepngfix.htc) } 通过以上三步，IE6就能支持透明PNG图片了。 &nb......查看更多>>

发表在 css, 前端开发bug修复 | 标签为 , , | 4 条评论

图片鼠标经过显示边框hack一例

发表于 2011/06/12 由 前端开发-武方博  936 views

哈哈 在一个英文文章里面看见的 很有趣啊 老外比较有创意 先看下效果，看见效果的时候请各位大哥大姐们想想自己会怎么写这个的css   演示地址：http://www.wufangbo.com/demo/css/08/index.html 下载地址：http://www.wufangbo.com/demo/css/08/08.rar   哈哈 估计不会有人这样搞吧，反正我是没试过 看下CSS就会奇怪了吧 重点是图片hover的时候margin的负值！ css   .test{ width:800px; margin:0 auto; overflow:hidden;zoom:1;} .test li,.test a img,.test a{border:none;overflow:hidden;float:left;} .test a img{width:100px; height:100px;} .test a:hover {border: 3px solid #f00;} .test a:hover img {margin:-3px;}   html   <ul class="test"> <li><a href="#"><img src="01.jpg" /></a></li> <li><a href="#"><img src......查看更多>>

发表在 css | 标签为 , | 留下评论

谷歌LOGO在线弹电吉他效果

发表于 2011/06/10 由 前端开发-武方博  1,242 views

昨天google logo很给力，可以在logo上弹吉他了，扣了效果下来却一直没有声音， 今天在网上看才发现原来是因为flash在本地安全的原因，上传到服务器就可以了！ 点击这里去google LOGO弹吉他 查看更多>>

发表在 前端开发, 前端资讯 | 标签为 , | 2 条评论

jquery :nth-child()伪类选择器

发表于 2011/06/09 由 前端开发-武方博  916 views

本来是css3的伪类选择器，可惜浏览器不给力，大部分都不支持，jquery却给借鉴过来了， 用起来很给力很给力！ 使用:nth-child 貌似在chrome里面不支持群组选择的写法！要分开写！   语法： :nth-child(an+b) 为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和Safari3+。 描述： 伪类:nth-child()的参数是an+b，如果按照w3.org上的描述，写成中文，很可能会让人头晕，再加上笔者的文笔水平有限，所以我决定避开an+b的说法，把它拆分成5种写法共5部分来说明。 第一种：简单数字序号写法 :nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。 例子： li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/ 第二种：倍数写法 :nth-child(an) 匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。 例子： li:nth-child(3n){b......查看更多>>

发表在 jquery | 标签为 , | 留下评论

jquery 点点滴滴小记

发表于 2011/06/09 由 前端开发-武方博  1,756 views

字符截取显示 var text = $(“.content”).text(); var textNum = text.length; var textInt = text.slice(0,140); $(“.content”).each(function () { if (textNum >= 160) { $(this).html(textInt + “…” + “详细“) $(“.dis_btn”).click(function () { $(“.content”).text(text); }); return false; } else { $(“.content”).each(function () { $(this).text(text); }) } })   div做链接 $(“.pane-list li”).click(function(){     window.location=$(this).find(“a”).attr(“href”);return false; });   简单的炸屏效果 $(document).ready(function(){ setTimeout(“showBanner();”,5000); }); function showBanner(){ $(“.banner p:eq(0)”).slideUp(1000,function(){$(“.banner p:eq(1)”).slideDown(1000);}); }   单条滚动的新闻写法1 function scroll_news(){ $(function(){       $(&#......查看更多>>

发表在 jquery | 标签为 , | 3 条评论

分享一个webkit内核下浏览器滚动条效果

发表于 2011/05/13 由 前端开发-武方博  2,206 views

webkit内核下美化浏览器滚动条样式，支持chrome和safari浏览器   演示地址：http://www.wufangbo.com/demo/css/07/index.html 下载地址：http://www.wufangbo.com/demo/css/07/07.rar   直接上css   html {     overflow: auto; } body {     position: absolute;     top: 20px;     left: 20px;     bottom: 20px;     right: 20px;     padding: 30px;      overflow-y: scroll;     overflow-x: hidden; }   /* Let's get this party started */ ::-webkit-scrollbar {     width: 12px; }   /* Track */ ::-webkit-scrollbar-track {     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);      -webkit-border-radius: 10px;     border-radius: 10px; }   /* H......查看更多>>

发表在 css3 html5 | 标签为 , , , , , , | 一条评论

jQuery带缩略图左右滚动效果

发表于 2011/05/10 由 前端开发-武方博  5,029 views

这个效果比较常用,在很多商品展示页面会用到，例如淘宝店铺的图片展示和京东商城的商品展示页，其实这段代码很简单，直接看下效果好了！   演示地址：http://www.wufangbo.com/demo/jquery/12/index.html 下载地址：http://www.wufangbo.com/demo/jquery/12/12.rar HTML代码   <div class="pic_scroll">         <div class="pic_small">          <a href="#0"><img class="current" src="images/01.jpg" /></a>              <a href="#1"><img src="images/02.jpg" /></a>              <a href="#2"><img src="images/03.jpg" /></a>    &n......查看更多>>

发表在 jquery, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , | 留下评论

移动平台3G手机网站前端开发布局技巧汇总

发表于 2011/05/10 由 前端开发-武方博  5,213 views

您或许正在或准备参与一个WepApp项目，您或许正在Google搜索mobile development相关的文章，您或许是一名专业的WEB前端工程师，您或许想学习Mobile前端开发方面的技术，如果您被我说中了，呵呵那么这篇文章将为您带来意想不到的惊喜！当您看到这篇文章时，哥已经默认认为您是一名资深的WEB前端工程师，如果您不是，可能您会遇见许多不理解或听不懂的专业术语或前端技术（包括WEB、Mobile）。但是这没有关系，给自己一点信心吧，用心的阅读下去…… 自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备)。 开发者们都知道在高端智能手机系统中有两种应用程序：一种是基于本地（操作系统）运行的APP；一种是基于高端机的浏览器运行的WebApp，本文将主要讲解后者。 WebApp与Native App有何区别呢？ Native App： 1、开发成本非常大。 一......查看更多>>

发表在 移动网站开发 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 5 条评论
第 9 页，共 19 页12345678910111213141516171819