您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

  • 简洁jquery下拉菜单效果

    简洁jquery下拉菜单效果

    记得之前搞个页面中,大致效果是这样的点击后一个显隐,使用的hover来着,当鼠标快速移入移除的时候,有个明显的bug,虽然之前说过stop可以实现来着.搞web前端开发的就是得折腾人,现在没什么事情,想整个反面教材,没成功,先这样吧,简洁jquery下拉菜单效果

    $(document).ready(function(){ $(".menu li").hover( function(){ $(this).find(".menuUl").show(); }, function(){ $(this).find(".menuUl").hide(); } ); })

    代码太简单了,就这么点,明天好好想想那个hover bug如何出来的.
    在线效果DEMO

  • jquery实现图片墙特效多张小图片集合图片墙排列布局

    jquery实现图片墙特效多张小图片集合图片墙排列布局

    jquery更新到1.8了,很是速度呐,想当初从1.4版本开始,陪伴着jquery经历的不少时间啦.下面分享一个jquery实现图片墙特效多张小图片集合图片墙排列布局

    之前前端开发经理要求搞的,趴下了放自己网站上去,觉得不错,趴下了精简个,以备后面用哈.

    这个还真的很炫啊,jquery图片特效用多张小图片集合排列出图片墙布局,jquery图片墙鼠标滑过图片动画提示图片详细信息,记得以前在discuz论坛上看到类似的效果

    主要javascript如下

    <script type="text/javascript">/*会员图片墙*/var memberShow = function(val){ var mem_div = $("."+val); var memli = mem_div.find("li.memLI"); var mem_len = memli.length; var pop_info = mem_div.find(".popInfo"); var layer_Mode = mem_div.find(".layerMode"); var thumb1 = [];//缓存数组 var thumb2 = [];//缓存数组 var init_left,init_top; var hovertime; /*图片位置随机显示*/ function imgRand(){ //随机生成条目,加载随机的样式,插入dom里面,先隐藏 for(var i = 0; i<mem_len; i++){ thumb1[i] = i; thumb2[i] = i; } var thumb1_len = thumb1.length; var thumb2_len = thumb2.length; var index = 0; (function(){ if(index >= mem_len){ return; } var s_index = parseInt(Math.random()*thumb2_len); //显示随机数 memli.eq(thumb2[s_index]).css('visibility','visible'); thumb2.splice(s_index,1); thumb2_len--; index++; window.setTimeout(arguments.callee,50); })(); } imgRand(); memli.bind({ mouseover : function(){ THIS = $(this); hovertime = setTimeout(function(){ pop_info.css({"display":"block"}); var addinfo = THIS.find(".addInfo").html(); pop_info.html(addinfo); var position = THIS.position(); var new_left,new_top; var cssShadow; var _margin; if(position.left <= mem_div.width() - pop_info.width()){ new_left = position.left -2; cssShadow = "imgShadow1"; _margin = "left"; pop_info.find("img").css("float","left"); pop_info.find("p").css({"float":"left","margin-left":"-50px"}); } if(position.left > mem_div.width() - pop_info.width()){ new_left = position.left - THIS.width()*3 -5; cssShadow = "imgShadow2"; _margin = "right"; pop_info.find("img").css("float","right"); pop_info.find("p").css({"float":"right","margin-right":"-50px","text-align":"right"}); } if(position.top <= mem_div.height() - pop_info.height()){ new_top = position.top - 2; } if(position.top > mem_div.height() - pop_info.height()){ new_top = position.top - THIS.height()*2 - 4; } pop_info.css({"top":new_top,"left":new_left}); pop_info.find("img").addClass(cssShadow); if(_margin == "left"){ pop_info.find("p").animate({ marginLeft: "0px" }, 300 ); } else if(_margin == "right"){ pop_info.find("p").animate({ marginRight: "0px" }, 300 ); } layer_Mode.fadeTo("fast", 0.6); },300); }, mouseout: function(){ clearTimeout(hovertime); } }) pop_info.bind('mouseout',function(){ layer_Mode.css({"display":"none"}); pop_info.css({"display":"none","top":0,"left":0}); pop_info.html(""); })}$(document).ready(function(){ memberShow("memberShow");})</script>

    在线效果DEMO

  • jquery特效显示隐藏更多品牌信息

    jquery特效显示隐藏更多品牌信息

    前端开发中,做的最多的就是那些电子商务类型的网站,有时一个宝贝有好多属性,或者有好多品牌,但是空间有限,不好全部呈现,我们设置一个按钮,点击下显示全部,再次点击下隐藏部分。
    下面咱用jquery来实现这个效果

    <script type="text/javascript">$(document).ready(function(){ var $brand=$(".ulDiv"); var $toggleBen=$("div.more>a"); //获取 显示 按钮 $toggleBen.click(function(){ if($brand.is(":visible")){ //如果元素显示 $brand.hide(); $(".more a span").text("显示"); $("ul li a").removeClass("cc"); }else{ $brand.show(); $(".more a span").text("隐藏"); $("ul li a").filter(":contains('男装'),:contains('智能机'),:contains('美容护肤')").addClass("cc"); } return false; });})</script>

    代码主要参考锋利的jquery
    说明略有不同,锋利的jquery是把js在头部就加载,这样随便你怎么刷新都没事;但是大家晓得一般我们是把js文件放底部的,这样就带来一个问题,刷新的时候,首先把所有的DOM加载进来,然后隐藏部分节点,很明显有网页有个自动显隐。这样不是我们要的效果。
    js还是那样,我们把需要隐藏的节点用css控制下,勿用js隐藏,这样无论你怎么刷新都木有压力啦。
    在线效果DEMO

  • jquery仿凡客诚品图文切换效果

    jquery仿凡客诚品图文切换效果

    前端开发过程中需要不断学习,不断温习。最近计划白天继续温习jquery,晚上学习下原生javascript,然后利用一些时间做做推广SEO来着。计划暂时这些。
    白天活干完,弄个jquery仿凡客诚品图片切换的效果
    以前写的不是很好,今天重新做个 jquery特效,其实很简单,漠然回首也就那回事。
    先来个原型吧,锋利的jquery第一个例子,相信大家都很熟悉。没错,你绝对没看错。
    代码如下

    <div class="menu"> <div class="has_children"> <span>第一张</span> <a href="">11111111</a> <a href="">11111111</a> <a href="">11111111</a> <a href="">11111111</a> <a href="">11111111</a> <a href="">11111111</a> </div> <div class="has_children"> <span>第二张</span> <a href="">22222222</a> <a href="">22222222</a> <a href="">22222222</a> <a href="">22222222</a> <a href="">22222222</a> <a href="">22222222</a> </div> <div class="has_children"> <span>第三张</span> <a href="">33333333</a> <a href="">33333333</a> <a href="">33333333</a> <a href="">33333333</a> <a href="">33333333</a> <a href="">33333333</a> </div> <div class="has_children"> <span>第四张</span> <a href="">44444444</a> <a href="">44444444</a> <a href="">44444444</a> <a href="">44444444</a> <a href="">44444444</a> <a href="">44444444</a> </div></div><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){// $(".has_children").click(function(){// $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();//点击后效果// }) $(".has_children").mouseover(function(){ $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();//鼠标移动过去效果 })})</script>

    原书是点击后的效果,我又加了个鼠标移动上去。
    现在适当的修改下css和js就可以了。
    在线效果原型DEMO 在线效果图文切换DEMO

  • jquery和javascript实现返回网页顶部

    jquery和javascript实现返回网页顶部

    jquery博客现在准时下班,最近加的蛮累的,估计有加班后遗症了,擦。。。。

    话说有时候,付出和你收获的不一定成正比,纠结在此,矛盾。。。。

    妈妈在煮可口的饭菜。早回来,也没什么事,看到好多网站上比如新浪微博之类的有页面拉到最下面,然后有个返回顶部的,我感觉蛮好,用户体验没得说,个人对新浪的产品很感兴趣,佩服那些奋斗在新浪的前端开发们。

    jquery版 DEMO           javasript版 DEMO

  • javascript实现兼容IE chrome firefox等主流浏览器的设置主页收藏页面代码

    javascript实现兼容IE chrome firefox等主流浏览器的设置主页收藏页面代码

    终于周六了,可以好好休息下。赶项目,jquery特效忙的马不停蹄,需求一直在变化,唯一不变的,去解决一个又一个的bug。

    我们的页面上有时需要收藏或者设置主页等功能,便于用户再次访问的时候,要么收藏夹要么一打开就有,今天也来一段,方便自己喝他人以后查阅,http://www.jqueryba.com/548.html。

    function addCookie(){  // 加入收藏夹 if (document.all){ window.external.addFavorite('http://www.jqueryba.com', 'jquery博客'); }else if (window.sidebar){ window.sidebar.addPanel('jquery博客', 'http://www.jqueryba.com', ""); }}function addCookie2(){ try{ window.external.AddFavorite('http://www.jqueryba.com','jquery博客'); }catch(e){ (window.sidebar)?window.sidebar.addPanel('jquery博客','http://www.jqueryba.com',''):alert('请使用按键 Ctrl+d,收藏jquery博客'); }}function setHomepage(){  // 设置首页 if (document.all){ document.body.style.behavior = 'url(#default#homepage)'; document.body.setHomePage('http://www.jqueryba.com'); }else if (window.sidebar){ if (window.netscape){ try { netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); }catch (e) { alert("该操作被浏览器拒绝,如果想启用该功能,请在地址栏内输入 about:config,然后将项 signed.applets.codebase_principal_support 值该为true"); } } var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch); prefs.setCharPref('browser.startup.homepage', 'http://www.jqueryba.com'); }}

    在线效果DEMO

     

  • js实现离伦敦奥运会还有多少天(简易版)

    js实现离伦敦奥运会还有多少天(简易版)

    jquery特效没事看看新闻,最近报的最多的就是伦敦奥运会了,今天谁谁状态如何,练习什么,说什么鼓舞的壮志。腾讯也是老弹这样的新闻。

    期待中国健儿取得佳绩,金牌榜第一,偶耶。

    整个伦敦奥运会倒计时jquery

     

    <script type="text/javascript">// <![CDATA[   var timedate= new Date("July 28,2012");   var times= "伦敦奥运会";   var now = new Date();   var date = timedate.getTime() - now.getTime();   var time = Math.floor(date / (1000 * 60 * 60 * 24));   if (time >= 0)   document.write( "现在离"+times+"还有: "+time +"天")// ]]></script>

    在线效果DEMO

     

  • jquery特效 点击弹出层

    jquery特效 点击弹出层

    最近jquery特效公司天天加班,苦逼的很啊,到家都差不多10点了,累啊。天气又是很闷热。哎。。。。。

    这两天又感上百度大检查,好多站被K啊,哎,你叫咱小站长们咋弄嘛。

    早上又是早早的起来没事,弄个简单的jquery效果  点击弹出层

     

    <script type="text/javascript">// 渐变弹出层$(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定事件处理 event.stopPropagation(); var offset = $(event.target).offset();//取消事件冒泡 $("#racePop").css({ top:offset.top + $(event.target).height() + "px", left:offset.left });//设置弹出层位置 $("#racePop").show(speed);//动画显示 }); $(document).click(function(event) { $("#racePop").hide(speed) });//单击空白区域隐藏 $("#racePop").click(function(event) { $("#racePop").hide(speed) });//单击弹出层则自身隐藏});</script>

    在线效果DEMO

  • jquery特效 简易下拉菜单

    jquery特效 简易下拉菜单

    前端开发中不少运用到jquery下拉菜单,记得jquery博客刚入行的时候,一直拿这个练习,俗话说的好,好记性不如烂笔头,熟能生巧。亲爱的朋友们,如果你需要的话,多看demo,多自己动手敲,你会达到自己心中的目标。

    在线效果DEMO

    最近公司有点小忙,没有及时博客,周末的时候清除了一些友情链接,发现要么对方网站不能打开的,要么干脆没有咱友情链接,更过分的是在a标签中加rel="nofollow",亲这个太不厚道了,既然友情链接,大家都得互相尊重嘛,你弄这个,我就不太好理解了,比如jquery特效想把一些不好打开的或者上面有问题的站链接删掉,我之前都会通知下,有QQ的Q下,没Q的我也说下。

    Say goodbye 那些之前随意去掉咱友情链接的朋友们。

  • jquery简易收缩展开效果特效

    jquery简易收缩展开效果特效

    都9点多了,天气依然很炎热,睡不着啊,jquery博客整个简单jquery特效收缩展开吧。

    主要代码就那点,这个只是个简单的特效,后期可以衍生很多复杂的,前端开发需要大家自己慢慢摸索,多动手,亲们慢慢折腾吧。

    $(document).ready(function(){ $(".box h1").toggle(function(){ $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); },function(){ $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); });});

    在线效果DEMO

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!