<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(function(){
var scro_zoom = parseInt($(".scro_mouse").width()/2);
var scro = $("#scro");
var scroWidth = parseInt($("#scro").width());
var scroImgWidth = parseInt($(".scro_img ul li").width());
var scroMouse = parseInt($(".scro_mouse").width());
var scroMove = $(".scro_img ul");
var scroImgLength = $(".scro_img ul li").length;
var scroImgBoxWidth = scroImgWidth * scroImgLength + scroImgLength * 10 + 10;
var zoompos = {x:0,y:0};
var flag = false;
var scropos;
scroMove.css("width",scroImgBoxWidth + "px");
$(".scro_mouse").bind("mousedown",function(e){
flag = true;
$(this).css("background","blue");
$(".show").fadeIn(300);
return false;
}).mousemove(function(e){
if(flag){
$zoompos(e.pageX,e.pageY);
$(this).css("left",zoompos.x);
scroMove.css("left",-scropos + "px");
}
}).mouseup(function(e){
flag = false;
$(".show").hide();
$(this).css("background","#ccc");
})
$(document).mouseup(function(e){
flag = false;
$(".show").hide();
$(".scro_mouse").css("background","#ccc");
})
function $zoompos(x,y){
zoompos.x = x - scro.offset().left - scro_zoom; //得到left值;
zoompos.y = y - scro.offset().top - 5;//得到top值;
scropos = parseInt((scroImgBoxWidth - scroWidth) / (scroWidth - scroMouse) * zoompos.x);
if(zoompos.x <= 0){
zoompos.x = 0;
}
if(zoompos.x + scroMouse >= scroWidth){
zoompos.x = scroWidth - scroMouse;
}
if(scropos < 0){
scropos = 0;
}
if(scropos >= scroImgBoxWidth - scroWidth){
scropos = scroImgBoxWidth - scroWidth;
}
$(".show").text( zoompos.x + "," + zoompos.y + "," + $(".scro_mouse").css("left"));
}
})
</script>
<style type="text/css">
*{ margin:0; padding:0;}
#box{ width:460px; border:1px solid #000; margin:50px auto;}
#scro{ width:100%; height:30px; background:red; margin:10px 0; position:relative;}
.scro_line{ width:100%; height:0; overflow:hidden; border-top:2px groove #000; position:absolute; left:0; top:15px; z-index:0;}
.scro_mouse{ width:66px; height:20px; background:#ccc; cursor:pointer; position:absolute; left:0; top:5px; z-index:1;}
.show{ width:100px; height:30px; position:absolute; display:none; top:-30px; left:0;}
.scro_img{ width:460px; height:60px; margin:10px 0; overflow:hidden; position:relative;}
.scro_img ul{ position:absolute; left:0; top:0;}
.scro_img ul li{ display:inline; float:left; width:80px; height:60px; margin-left:10px; background:red;}
</style>
</head>
<body>
<div id="box">
<div class="scro_img">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
<div id="scro">
<div class="show"></div>
<div class="scro_line"></div>
<div class="scro_mouse"></div>
</div>
<div class="text"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(function(){
var scro_zoom = parseInt($(".scro_mouse").width()/2);
var scro = $("#scro");
var scroWidth = parseInt($("#scro").width());
var scroImgWidth = parseInt($(".scro_img ul li").width());
var scroMouse = parseInt($(".scro_mouse").width());
var scroMove = $(".scro_img ul");
var scroImgLength = $(".scro_img ul li").length;
var scroImgBoxWidth = scroImgWidth * scroImgLength + scroImgLength * 10 + 10;
var zoompos = {x:0,y:0};
var flag = false;
var scropos;
scroMove.css("width",scroImgBoxWidth + "px");
$(".scro_mouse").bind("mousedown",function(e){
flag = true;
$(this).css("background","blue");
$(".show").fadeIn(300);
return false;
}).mousemove(function(e){
if(flag){
$zoompos(e.pageX,e.pageY);
$(this).css("left",zoompos.x);
scroMove.css("left",-scropos + "px");
}
}).mouseup(function(e){
flag = false;
$(".show").hide();
$(this).css("background","#ccc");
})
$(document).mouseup(function(e){
flag = false;
$(".show").hide();
$(".scro_mouse").css("background","#ccc");
})
function $zoompos(x,y){
zoompos.x = x - scro.offset().left - scro_zoom; //得到left值;
zoompos.y = y - scro.offset().top - 5;//得到top值;
scropos = parseInt((scroImgBoxWidth - scroWidth) / (scroWidth - scroMouse) * zoompos.x);
if(zoompos.x <= 0){
zoompos.x = 0;
}
if(zoompos.x + scroMouse >= scroWidth){
zoompos.x = scroWidth - scroMouse;
}
if(scropos < 0){
scropos = 0;
}
if(scropos >= scroImgBoxWidth - scroWidth){
scropos = scroImgBoxWidth - scroWidth;
}
$(".show").text( zoompos.x + "," + zoompos.y + "," + $(".scro_mouse").css("left"));
}
})
</script>
<style type="text/css">
*{ margin:0; padding:0;}
#box{ width:460px; border:1px solid #000; margin:50px auto;}
#scro{ width:100%; height:30px; background:red; margin:10px 0; position:relative;}
.scro_line{ width:100%; height:0; overflow:hidden; border-top:2px groove #000; position:absolute; left:0; top:15px; z-index:0;}
.scro_mouse{ width:66px; height:20px; background:#ccc; cursor:pointer; position:absolute; left:0; top:5px; z-index:1;}
.show{ width:100px; height:30px; position:absolute; display:none; top:-30px; left:0;}
.scro_img{ width:460px; height:60px; margin:10px 0; overflow:hidden; position:relative;}
.scro_img ul{ position:absolute; left:0; top:0;}
.scro_img ul li{ display:inline; float:left; width:80px; height:60px; margin-left:10px; background:red;}
</style>
</head>
<body>
<div id="box">
<div class="scro_img">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
<div id="scro">
<div class="show"></div>
<div class="scro_line"></div>
<div class="scro_mouse"></div>
</div>
<div class="text"></div>
</div>
</body>
</html>
2415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
