当一个页面内容很长的时候，侧边栏栏目可能显得太短，当窗口滑动到靠下的位置，则侧边即失去了展示内容的机会。很多新闻资讯类网站如新浪、网易、CSDN等，会在边栏的右下角以固定的小弹窗形式，以提供更多的内容展示方式，但这并不适合博客和web2.0风格的网站。 现在很多的独立博客和网站如人人网等，都使用了让侧边栏模块随滚动条滑动而位置固定的效果。就是当一个页面很长的时候，设定侧栏内容会跟随滚动条，这种效果适用于评论较...
代码如下: 无标题文档 $(document).ready(function(){ var headHeight=$(".header").height()+10; var nav=$(".nav"); $(window).scroll(function(){ if($(this).scrollTop()>headHeight){ nav.addClass("navFix"); } else{ nav.removeClass("navFix"); } }) }) *{ margin:0; padding:0;} body{ _background-attachment:fixed; _background-image:url(about:blank);} //实现ie6不支持fixed方法 .header{ width:1000px; hei...
超链接提示效果： 代码如下: //$(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title; this.title = ""; var tooltip = ""+ this.myTitle +""; //创建 div 元素 $("body").append(tooltip); //把它追加到文档中 $("#tooltip") .css({ "top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px" }).show("fast"); //设置x坐标和y坐标，并且显示 }).mouseout(function(){ this.t...
代码如下: $(function() { $(".designerspanel").each(function(){ $(this).find(".tabspanel #show:not(:first)").hide(); }); $(".designerspanel li").click(function(){ idname=$(this).parents('.designerspanel').attr('id'); current=$("#"+idname+" li:eq(0)").attr('class'); current=current.replace("black",""); $("#"+idname+" ...
导航菜单比较实用，当然还是选择经典的，代码最少的，效果最好的喽，各位童鞋请围观哦，废话不说， 效果图如下，欢迎评价： 看代码： 代码如下: 一款带动画效果的经典二级导航菜单Jquery特效 html, body, ul, li, h1, h2, h3, h4, h5, h6, fieldset, legend {padding:0; margin:0;} body {font:12px/normal Verdana, Arial, Helvetica, sans-serif;} ul,li {list-style-type:none; text-transform:capitalize;} clear{clear...
当页面需要显示的内容较多时，我们很多人采用分页的方法解决。 而有的时候，分页的效果却又是非常令人厌恶的。滚动条无疑是一种简单而又高效的一种方式。而这里，处于对用户体验的考虑，我使用Jquery实现了一种类似“滚动停靠”的效果。这样当我们向下滚动内容的时候，搜索框会“悬挂（停靠）”在窗口顶端。 这样做的好处是，当用户需要重新筛选内容的时候，不必再次向上滚动，随时可以输入条件进行搜索。 以下是我实现这个效果的思...
代码如下: // live主要用于对动态加载出来的元素绑定事件 // 产品目录 $(".lm_div_q dd").live({ mouseenter: function() { $(this).find("strong").addClass("tj_strong"); $(this).find("strong").next().slideDown(200); // 显示下拉框 }, mouseleave: function() { $(this).find("strong").removeClass("tj_strong"); $(this).find("strong").next().slideUp(200); // 隐藏下拉框 } }); // hover直接绑定事件// 产品目录 $(".l...
这种商城的效果网上很多，但大多是插件，要么JS写的太过于复杂，对于学习的童鞋来说看起来比较费劲，这个看起来比较简单，也比较容易理解，各位童鞋需要的请围观，也欢迎各位评价，贴代码（为方便使用，代码复制即可用，无需另外添加东西）： 代码如下: 商城常用滚动的效果，简单实用 $(function(){ var len = $(".num > li").length; var index = 0; var adTimer; $(".num li").mouseover(function(){ index = $(".num li")...
其实主要是jquery 层选择器的应用，jquery 高手可以跳过。。。 网易相册效果图如下：当鼠标移动经过照片就显示“设为封面｜删除”，移开后就隐藏，此效果在web开发中经常会用到。故总结一下直接上代码： 代码如下: Insert title here .al_info{display: none;} #imgdiv {float: left;width: 170px;height: 130px; display: block; padding:15px 10px;} #imgdiv img{width:160px;height:140px;} jQuery(document).ready(fun...
此Jquery插件是一款非常实用的特效，是很多网站不可缺少的推广神兵利器，传统的一般都用百度、加网的分享插件，但样式外观都不怎么好看，用户体验效果差一点，此作品不但有分享功能，还具备了动画效果，提高了用户体验。由于用了CSS3，为了可以看到插件的最佳效果，建议大家使用谷歌、火狐等浏览器。。。作品包括以下功能： 1、弹出层 2、遮罩层 3、动画效果 4、CSS3 效果如下： 源码下载 代码片段(1) 代码如下: $(document).read...
动画效果 show():显示 hide()隐藏 $().toggle():显示和隐藏效果切换 都可以传入参数，speed.fadeOut(淡出) fadeIn(淡入) fadeToggle();淡入淡出切换 fadeTo(2000,0.3)将图片显示到透明度为30%的程度滑动显示 slideDown()： slideUp(): slideToggle(): 都可以传入一个speed参数。$(:animated);获取正在执行动画的元素。 将正在执行动画的元素停止： $(:animated).stop():停止当前的动画。 stop(true)表示清除队列中的所有的动画，即...
代码如下: .divFrame { width:260px;border:1px solid #666;font-size:10pt; } .divTitle { background-color:#eee;padding:5px; } .divContent { padding:5px;display:none; } .divCurrColor { background-color:red; } $(function () { $('.divTitle').click(function () { $(this).addClass('divCurrColor').next('.divContent').css('display', 'block'); }) }) 主题 链接一 链接二 链接三 JavaScript教程/参考手册...
在网站建设中，特别是做商城和产品网站，通常会用到导航弹出菜单，像是jquery写的仿京东导航菜单，一个经典的左侧多级导航菜单，学会了可以任意改变布局。京东菜单已经有不少JS前端爱好者仿写过，今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单，精简版代码 先看下jquery仿京东导航效果： 前端html代码如下： 代码如下: baidu baidu goolge google yahoo yahoo microsoft microsoft html{color:#666;bac...
代码如下: 表单类失去焦点的效果 代码如下: $(function(){ $(":input").focus(function(){ //此处可获取各种表单如（：text/:button） $(this).addClass("focusa"); if ($(this).val()==this.defaultValue){ $(this).val(""); } }).blur(function(){ $(this).removeClass("focusa"); if ($(this).val()==""){ $(this).val(this.defaultValue); } }); }); 各种表单的类型： 代码如下: 文本框 密码框 提交按钮 重置按钮 单...
多的不说了，直奔主题，分享一个放大效果的popup dialog，项目中可以根据自己的需求来写css，我打算复用到metro风格的site上去。 看起来动画效果还是比较cool的，如果加上了处理后的效果更佳： 代码如下: body { background: #ace; font: 12px/1.2 Arial, Helvetica, sans-serif; } ul li { background:#fff; margin:5px; width:100px; height:100px; float:left; } #transition { background:transparent; display:none; po...