jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层

2016-02-19 15:59 8 1 收藏

下面图老师小编要向大家介绍下jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层，看起来复杂实则是简单的，掌握好技巧就OK，喜欢就赶紧收藏起来吧！

【 tulaoshi.com - Web开发】

代码如下:
!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
titlejquery.text-effects/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
style
*{
margin:0;
padding:0;
}
#test{
position:absolute;
top:10px;
right:10px;
width:130px;
height:60px;
background:#555;
color:#fff;
font-size:13px;
}
/style
script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"/script
script language="javascript"
$(document).ready(function(){
var menuYloc = $("#test").offset().top;
$(window).scroll(function (){
var offsetTop = menuYloc + $(window).scrollTop() +"px";
$("#test").animate({top : offsetTop },{ duration:600 , queue:false });
});
});
/script
/head
body
h17行代码的跟随屏幕滚动层./h1
br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/
div id="test"Dev By CssRain.cnbr/Test ie6+,firefox3.0/div
br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/
br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/br/
/body
/html

来源:http://www.tulaoshi.com/n/20160219/1610843.html

上一篇： GT 650M参数表及GeForce GT 650M规格特点
下一篇：什么是电脑cmos

看过《jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层》的人还看了以下文章更多>>

jquery HotKeys轻松搞定键盘事件代码

标签： Web开发

使用方法: 代码如下: $.hotkeys.add('键名', function(){ 要实现的目的}); //键名可以是单键,也可以是组合键例如:ctrl+c就表示同时按下ctrl和c. 取消某个键的事件: 代码如下: $.hotkeys.remove('键名'); 下载插件地址::http://code.google.com/p/js-hotkeys/downloads/list

Jquery一行代码轻松实现拖动效果

标签： Web开发

写JS实现拖动需要一大堆不便维护的代码，实属麻烦，Google了大半天，发现了一个优秀的Jquery插件EasyDrag，只需要一行代码便可轻松在主流浏览器上实现拖动效果. Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ --> $(document).ready( function...

jquery 上下滚动广告

标签： Web开发

代码如下: (function($){ $.fn.extend({ rollList:function(option){ option=$.extend({ direction:"up", step:1, time:23 },option); var step_coe,scroll_coe,score_coe; if(option.direction=="up") { step_coe=1; scroll_coe=1; score_coe=1; }else { step_coe=-1; scroll_coe=-1; score_coe=0; } return this.each(...

jQuery 锚点跳转滚动条平滑滚动一句话代码

标签： Web开发

jQuery锚点跳转滚动条平滑滚动一句话代码代码如下： $("html,body").animate({scrollTop: $("#box").offset().top}, 1000); 一下是一些jquery的小技巧 1. 控制编译结果代码如下： script type="text/javascript" src="scripts/jquery-1.2.6.min.js"/script %if (false) { % script type="text/javascript" src="scripts/jquery-1.3...

jQuery 行背景颜色的交替显示(隔行变色)实现代码

标签： Web开发

一些css的定义，可以根据需要自己选择。 //显示单双行显示不同背景色： // $("#UL_id li:even").attr("className","redClass"); //显示单双行显示不同背景色： $("#UL_id li:even").addClass("redClass"); ul id="UL_id" li单数/li li双数/li li双数/li /ul odd:单 even:双 jQuery 表格隔行变色代码 li隔行换色改进版 JS控制表格隔...

查看更多精彩>>