技术文章
当前位置:首页 > 技术文章

jquery网页屏幕滚动/鼠标屏幕滚动/分屏幕滚动/div飞入

无标题文档
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery网页屏幕滚动效果/鼠标屏幕滚动效果/分屏幕滚动效果/div飞入效果</title>
<meta name="keywords" content="jquery网页屏幕滚动/鼠标屏幕滚动/分屏幕滚动/div飞入" />
<meta name="description" content="jquery网页屏幕滚动效果/鼠标屏幕滚动效果/分屏幕滚动效果/div飞入效果" />
<style type="text/css">
html,body {font-size:12px;position:relative;overflow:hidden;margin:0px;width:100%;height:100%;}
p,ul {margin:0px;padding:0px;}
label {background:#ff0000;color:#ffffff;font-size:16px;font-weight:bold;}
img.bg-rand { min-height: 100%; min-width: 1024px; width: 100%; height: auto; z-index:-10; }
@media screen and (max-width: 1024px) { img.bg-rand { left: 50%; margin-left: -512px; } }
</style>
<script type='text/javascript' src='jquery1.js?ver=1.7.2'></script>
</head>
<body>
<div id="wpage" style="height:100%; overflow: auto; overflow-y: scroll;margin-top:50px;padding-bottom:50px;">
<div id="float_input" style="position:absolute;z-index:1000;top:60px;right:0px;width:0px;">
<div style="float:left;width:920px;height:auto;line-height:20px;background:#ffffff;padding:20px;">
<a onClick="close_input();"><font color="#0000FF"><u>关闭</u></font></a><br /><br />
系统默认开发数据库版本是MSSQL2000;也可以导入到更高数据版本。<br />请通过MSSQL数据库管理工具,将数据库导入(附加)到新版本数据库。<br />如果需要导出成.sql格式,从高版本导出时候,请选择导出版本为MSSQL2000格式。<br />系统地址重写规则支持Web.config和.htaccess两种方式。<br />如果启用.htaccess方式,可以把Web.config里的IIS7地址重写部分去掉。<br />
IIS6伪静态可以参考<a href="http://www.lantou.net/html5/forum_64.html">http://www.lantou.net/html5/forum_64.html</a><br /><br /><br />
</div>
</div>
<div id="topdiv" style="position:absolute;z-index:990;top:0px;width:100%;height:50px;background:#E9E8E8;border:#dedede 1px solid;">
<div style=" margin:0px auto;width:960px;">
<ul style="cursor:pointer;font-size:16px;font-weight:bold;">
<li>首页&nbsp;<a onClick="toc(1);"><font color="#0000FF"><u>导航栏目1</u></font></a>&nbsp;
<a onClick="toc(2);"><font color="#0000FF"><u>导航栏目2</u></font></a>&nbsp;
<a onClick="toc(3);"><font color="#0000FF"><u>导航栏目3</u></font></a>&nbsp;
<a onClick="float_rtom();"><font color="#0000FF"><u>从右边飞入内容</u></font></a>&nbsp;&nbsp;请点击左边链接看效果,或者滚动鼠标看效果!<br />
<b style="font-size:12px;font-weight:normal;"><font color="#ff0000"><u>请确保本页图片内容加载完毕后在看效果!</u></font>只是基本效果,需要改进完善的"另存为"本页,然后自行修改完善。</b>
&nbsp;<b id="stop" style="display:none;">0</b></li>
</ul>
</div>
</div>
<div style="width:100%;height:auto;z-index:-10;">
<div><img id="ptop1" src="1920_1.jpg" alt="" border="0" style="display:block;" /></div>
<div><img id="ptop2" src="1920_2.jpg" alt="" border="0" style="display:block;" /></div>
<div><img id="ptop3" src="1920_3.jpg" alt="" border="0" style="display:block;" /></div>
<div id="page_view" style="z-index:970"><img id="bg-rand" class="bg-rand" src="01.jpg" alt="" style="display:block;" />
<img id="bg-preloader" style="display:none;" src="04.jpg" alt=""/>
</div>
<div id="test" style="position:absolute;top: 50px; left: 0; width:100%;z-index:980;">
<p id="c1" name="c1" style="margin:0px auto;width:960px;">
<label>第一屏幕,滚动内容</label><br />
<br /><font size="+1">
1、蓝头网络通用商城系统V4.0免费版不开放全部源代码。<br />
2、任何个人或集体都可以下载和使用通用商城系统V4.0免费版。<br />
使用范围局限于自己使用或内部使用。不能擅自将本系统当作商业软件销售。<br />
3、通用商城系统销售权只有蓝头网络(lantou.net)有权出售。<br />
4、蓝头网络只对购买通用商城系统的合法授权ID用户提供售后服务与技术支持服务。<br />
5、蓝头网络通用商城系统版权最终解释权属于蓝头网络(lantou.net)。<br />
6、如有疑问,可致电:15989008905 蓝先生 咨询。<br />
<br /></font>
</p>
<p id="c2" name="c2" style="margin:0px auto;width:960px;">
<label>第二屏幕,滚动内容</label>
<br /><br /><font size="+1">
系统默认开发数据库版本是MSSQL2000;也可以导入到更高数据版本。<br />
请通过MSSQL数据库管理工具,将数据库导入(附加)到新版本数据库。<br />
如果需要导出成.sql格式,从高版本导出时候,请选择导出版本为MSSQL2000格式。<br />
系统地址重写规则支持Web.config和.htaccess两种方式。<br />
如果启用.htaccess方式,可以把Web.config里的IIS7地址重写部分去掉。<br />
IIS6伪静态可以参考http://www.lantou.net/html5/forum_64.html <br />
</font>
</p>
<p id="c3" name="c3">
<span style="float:left;width:100%;height:auto;background:#ffffff">
<label>第三屏幕,滚动内容</label>
<br /><br /><font size="+1">
批量图片缩小工具 V1.08,JPG|PNG|BMP图片缩小工具,切图工具<br />
使用须知:<br />
1、本程序不支持50M/GIF/CMYK/高位深度图片操作!<br />
2、包含图片缩小和图片转换(BMP、TIF转换为JPG),切图三功能。<br />
3、缩小后的宽和高必须输入其中一个!<br />
4、如果输入的宽和高都&gt;=图片本身尺寸,则对图片不进行缩小操作!<br />
5、如果输入的宽小于图片实际的宽,输入的高大于图片实际的高,则对图片按输入的宽等比缩小!<br />
6、如果输入的宽大于图片实际的宽,输入的高小于图片实际的高,则对图片按输入的高等比缩小!<br />
7、如果输入的两者都小于图片实际的,如果输入的宽/图片的宽大于输入的高/图片的高,则按照输入的高等比缩小!反则按照输入的宽等比缩小!<br />
8、切图时候请输入起始坐标(默认0,0)、结束坐标。 比如输入起始坐标是(100,50),结束坐标是(500,650),则软件从离图片左边100像素,离顶部50像素开始,切割到离图片左边500像素,离顶部650像素的400x600区域图,然后保存。<br />
9、如果想给操作后的图片和源图片文件名不一样,请勾上&quot;缩小或转换文件后加前缀名&quot;后再操作,软件会自动为每一个新图片在文件名前加&quot;_&quot;符号区分。<br />
<br />
<strong>使用方法:</strong><br />
1、下载ImageZoom.rar,解压缩得到ImageZoom.exe。<br />
2、在电脑任意盘,比如F盘下建立个文件夹Test(Test任意取名)。<br />
3、把ImageZoom.exe 和要缩小的图片比如 桌面壁纸2000x1500.jpg 一同复制到Test文件夹里,可以多张图片。<br />
4、运行ImageZoom.exe,输入500(缩小到宽度500像素的图片),点'缩小图片';所有成功后,会在Test下有一个新的lantou.net文件夹保存</font><br /><br />
</span>
</p>

<p id="c4" name="c4"></p>

</div>
</div>

<div id="rfloat1r" style="position:absolute;z-index:970;right:0px;width:auto;height:auto;">
<img src="products-2b.png" alt="" border="0" style="display:block;" />
</div>
<div id="rfloat1l" style="position:absolute;z-index:970;left:0px;width:auto;height:auto;">
<img src="home-2a.png" alt="" border="0" style="display:block;" />
</div>
<div id="rfloat2r" style="position:absolute;z-index:970;right:0px;width:auto;height:auto;">
<img src="products-2b.png" alt="" border="0" style="display:block;" />
</div>
<div id="rfloat2l" style="position:absolute;z-index:970;left:0px;width:auto;height:auto;">
<img src="home-2a.png" alt="" border="0" style="display:block;" />
</div>
<div id="arrow_lx" style="position:absolute;z-index:970;left:10px;width:auto;height:auto;">
<img src="left.gif" alt="" border="0" style="display:block;cursor:pointer" onClick="preimg(-1);" />
</div>
<div id="arrow_rx" style="position:absolute;z-index:970;right:10px;width:auto;height:auto;">
<img src="right.gif" alt="" border="0" style="display:block;cursor:pointer" onClick="preimg(1);" />
</div>
</div>
<script type="text/javascript">
$("#float_input").hide();
var p1_h=0,p2_h=0,toph=100;var rfloat1=150,f2top=0,farrowtop=0;
$(document).ready(function(){
var srcWidth=document.body.clientWidth-0;
var ywidth = srcWidth;//初始最大宽度
$("img").each(function(){
if($(this).width() > ywidth) {$(this).width(ywidth);}
});
p1_h=parseInt($("#ptop1").height());if(p1_h==0){p1_h=500;}
var menuYloc = $("#wpage").offset().top;
$("#c1").animate({height:p1_h},10);$("#c2").animate({height:p1_h},10);
$("#c3").animate({height:p1_h},10);$("#c4").animate({height:p1_h},10);
$("#rfloat1l").animate({top : 100 },{ duration:1 , queue:false });
$("#rfloat1r").animate({top : 100 },{ duration:1 , queue:false });
f2top=p1_h+200;
$("#rfloat2l").animate({top : f2top },{ duration:1 , queue:false });
$("#rfloat2r").animate({top : f2top },{ duration:1 , queue:false });
farrowtop=4*p1_h-(p1_h/2)+100;
$("#arrow_lx").animate({top : farrowtop },{ duration:1 , queue:false });
$("#arrow_rx").animate({top : farrowtop },{ duration:1 , queue:false });
$("#wpage").scroll(function (){
p2_h=parseInt($("#ptop2").height());
//document.getElementById("stop").innerHTML=$("#wpage").scrollTop();
var offsetTop = -(menuYloc + $("#wpage").scrollTop()) +"px";
offsetTop=toph-(menuYloc + $("#wpage").scrollTop()) +"px";
$("#test").animate({top : offsetTop },{ duration:500 , queue:false });
offsetTop=rfloat1-(menuYloc + $("#wpage").scrollTop()) +"px";
$("#rfloat1l").animate({top : offsetTop },{ duration:800 , queue:false });
$("#rfloat1r").animate({top : offsetTop },{ duration:800 , queue:false });
offsetTop=f2top-(menuYloc + $("#wpage").scrollTop()) +"px";
$("#rfloat2l").animate({top : offsetTop },{ duration:800 , queue:false });
$("#rfloat2r").animate({top : offsetTop },{ duration:800 , queue:false });
offsetTop=farrowtop-(menuYloc + $("#wpage").scrollTop()) +"px";
$("#arrow_lx").animate({top : offsetTop },{ duration:1 , queue:false });
$("#arrow_rx").animate({top : offsetTop },{ duration:1 , queue:false });
});
});
function toc(n){
var offsetTop=(n-1)*p1_h;$("#wpage").scrollTop(offsetTop);
}
function float_rtom(){
$("#float_input").show();var srcWidth=document.body.clientWidth;
var logo_w=(srcWidth-960)/2;
$("#float_input").animate({width:960},300);
$("#float_input").animate({right : logo_w },{ duration:1 , queue:false });
}
function close_input(){
$("#float_input").animate({right : 1 },{ duration:1 , queue:false });
$("#float_input").animate({width:1},1);$("#float_input").hide();
}
</script>
<script type="text/javascript">
var bbg_imgObject = jQuery("#bg-rand");
var bbg_imgPreload = jQuery("#bg-preloader");bbg_imgObject.hide();
bbg_imgPreload.load(
function(){bbg_imgPreload.unbind();bbg_imgObject.fadeIn(600, "linear" ,startSlideshow);}
).each(function(){
if(jQuery.browser.msie && parseInt(jQuery.browser.version) == 6 || jQuery.browser.opera)
{jQuery(this).trigger("load");}
});
var bbg_timer;
var bbg_image_base_path = "http://www.lantou.net/web/jquery";
var bbg_image_array_pointer = 0;var bbg_images = new Array(4);
bbg_images[0] = "01.jpg";
bbg_images[1] = "02.jpg";
bbg_images[2] = "03.jpg";
bbg_images[3] = "04.jpg";
function startSlideshow(){
//bbg_timer = setTimeout("bbg_changeBackground()", 6000);bbg_imgPreload.attr('src',bbg_image_base_path+'/'+bbg_images[bbg_image_array_pointer]);
}
function bbg_changeBackground(){
clearTimeout(bbg_timer);
bbg_imgObject.fadeOut(600,'linear', function(){
bbg_imgObject.attr('src',bbg_image_base_path+'/'+bbg_images[bbg_image_array_pointer]).fadeIn(600,'linear', startSlideshow);
});
//bbg_image_array_pointer ++;
if(bbg_image_array_pointer >= bbg_images.length)
bbg_image_array_pointer = 0;
}

function preimg(n){
//alert(bbg_image_array_pointer);
var flg=false;
if(n==-1){
if(bbg_image_array_pointer>0){
bbg_image_array_pointer=bbg_image_array_pointer-1;
flg=true;
}
} else {
if(bbg_image_array_pointer<3){
bbg_image_array_pointer=bbg_image_array_pointer+1;
flg=true;
}
}
if(flg==true){
bbg_changeBackground();bbg_imgPreload.attr('src',bbg_image_base_path+'/'+bbg_images[bbg_image_array_pointer]);
}
}
</script>
</body>
</html>
 
演示地址: http://www.lantou.net/web/jquery/jq_pingmu_gundong.html