由于公司专用浏览器控件,浏览器全屏显示,没有滚动条,只好做个使用按钮控制页面滚动,按钮必须有悬浮的效果,不能随页面滚动而滚动,不然滚到屏幕里面就没得点了,元素选择使用jQuery。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>悬浮按钮控制页面滚动</title>
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=gbk">
<link rel="stylesheet" type="text/css" href="./styles.css">
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script>
$(function(){
$("#downButton").click(function(){
window.scrollBy(0,100);//使用javascript控制,没有使用jquery控制
});
$("#upButton").click(function(){
window.scrollBy(0,-100);
});
$("#downText").click(function(){
window.scrollBy(0,100);
});
$("#upText").click(function(){
window.scrollBy(0,-100);
});
for (var i=0;i<100 ;i++ ){
$("<h1>"+i+"</h1>").appendTo("#show");
}
});
</script>
</head>
<body>
<h1 id="downText"
style="position:absolute;left:200px;top:expression(parseInt(document.body.scrollTop)+250);">
鼠标点击文字下滑
</h1>
<h1 id="upText"
style="position:absolute;left:200px;top:expression(parseInt(document.body.scrollTop)+350);">
鼠标点击文字上滑
</h1>
<div id="show" />
</body>
</html>
分享到:
相关推荐
jquery_Switch按钮插件
jQuery右侧悬浮楼层滚动代码是一款页面滚动右侧悬浮显示楼层效果代码。
jquery.caroufredsel按钮控制图片滚动点击标签
jquery_api.mxp,dw jquery提示
这是一款带有左右箭头按钮控制的jQuery图片滚动切换特效,代码简洁易用,图片滚动时有动感效果。
jQuery水平时间轴插件制作宽屏响应式的时间轴左右按钮控制滚动效果代码,这是一款大气的带背景的时间轴样式代码。
jQuery响应式图片滚动插件按钮控制图片滚动
jquery.caroufredsel按钮控制图片滚动点击标签商品分类筛选代码,实用性很强
jQuery实现带控制按钮的图片滚动特效(可多个)
jquery图片左右滚动按钮控制图片左右滚动效果代码
jquery按钮控制横向滑块图片滚动展示_拖动滑块图片滚动展示
jQuery_banner_分层整屏左右切换滚动
jQuery按钮控制时间轴滚动代码是一款大气的带背景的时间轴样式代码。
jQuery网站右侧导航按钮控制页面全屏滚动代码是一款jQuery页面全屏滚动特效,点击右侧固定层的图标导航滚动切换到相应内容。
jquery左右按钮控制图片滚动和prettyphoto弹出层插. jquery左右按钮控制图片滚动和prettyphoto弹出层插.
jQuery网站右侧悬浮楼层滚动导航代码是一款全屏的悬浮导航菜单控制页面滚动跳转楼层效果,还显示滚动百分比。
jquery图片滚动制作一个带有选项卡切换滚动效果且带有左右按钮控制的图片左右滚动焦点图。
jQuery全屏页面滚动效果页面上下滚动效果代码jq插件
jQuery_滚动投票程序,自己看看
这是一款页面滚动下拉的时候左侧悬浮固定导航菜单代码,jQuery页面滚动固定层菜单网页特效下载。