帮忙看看这个网站首页的效果怎么弄的？代码怎么写。求高手！

这个网站https://www.wonga.com/上的howmuchcashdoyouwant?条形鼠标左右点可以显示相应数字。就是鼠标点那个条形码选择+或-，旁边就可... 这个网站https://www.wonga.com/上的how much cash do you want?条形鼠标左右点可以显示相应数字。就是鼠标点那个条形码选择+或-，旁边就可以显示出数字多少钱，而且下面同时可以显示相应的数字怎么做？求全部代码。谢谢！！展开

 我来答

2个回答

#热议# 为什么有人显老，有人显年轻？

yyhian
2011-02-07 · TA获得超过590个赞

知道小有建树答主

回答量：134

采纳率：0%

帮助的人：205万

我也去答题访问个人页

关注

展开全部

<!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>
<title>1</title>
<style type="text/css">
#min { background-color:Yellow; width:20px; height:20px; padding-left:5px; cursor:pointer;}
#bg { background-color:Blue; height:5px; }
#pt {background-color:Red; height:20px; cursor:pointer; }
#plus { background-color:Yellow; width:20px; height:20px; padding-left:5px; cursor:pointer;}
#num { background-color:Black; color:White; width:40px; height:20px; text-align:center;}
</style>
<script type="text/javascript" language="javascript">

//这里是网上抄来的，根据需要修改了点

var dragdrop={
registerDragdropHandler:function(handler,target,cursor){ // 注册鼠标移动的一些事件。
var _IsMousedown=false,_ClickLeft=0;//,_ClickTop=0;
var _hDom=this.get(handler);
var _tDom=this.get(target);
_hDom.style.cursor=cursor||"hand";

function startDrag(evt){ // 按下鼠标左键时的事件。
evt=window.event||evt; // 获取当前事件对象。
_IsMousedown=true; // 记录已经准备开始移动了。
_ClickLeft=evt.clientX-parseInt(_tDom.style.left); // 记录当前坐标轴。
//_ClickRight=evt.clientX-parseInt(_tDom.style.left) - parseInt(_tDom.style.width);
//_ClickTop=evt.clientY-parseInt(_tDom.style.top);
}
function doDrag(evt){ // 鼠标开始移动时的事件。
evt=window.event||evt; // 获取当前事件对象。
if(!_IsMousedown)return false; // 如果_IsMousedown不等于真了返回。

var objBG = document.getElementById('bg');
var bgLeft = parseInt(objBG.style.left);
var bgRight = parseInt(objBG.style.left)+ parseInt(objBG.style.width);

if((evt.clientX - _ClickLeft - parseInt(_tDom.style.left)) > 0) //向右
{
if((evt.clientX - _ClickLeft) < (bgRight - 14))
{
_tDom.style.left = evt.clientX-_ClickLeft+"px";
}
else
{
_tDom.style.left = bgRight - 14 + "px";
}

if(navigator.appName=="Microsoft Internet Explorer")
{
objNum.innerText = parseInt(_tDom.style.left) + 5 - 9 + "";
}
else
{
objNum.textContent = parseInt(_tDom.style.left) + 5 - 9 + "";
}
}
else //向左
{
if((evt.clientX - _ClickLeft) > (bgLeft + 4))
{
_tDom.style.left = evt.clientX-_ClickLeft+"px";
}
else
{
_tDom.style.left = bgLeft + 4 + "px";
}
if(navigator.appName=="Microsoft Internet Explorer")
{
objNum.innerText = parseInt(_tDom.style.left) + 5 - 9 + "";
}
else
{
objNum.textContent = parseInt(_tDom.style.left) + 5 - 9 + "";
}
}

//_tDom.style.top=evt.clientY-_ClickTop+"px"; // 当前位置减去开始位置就是层当前存放的位置。
}
function endDrag(){ // 释放鼠标左键时的事件。
if(_IsMousedown){ // 如果_IsMousedown还为真那么就赋值为假。
if(this.isIE) _tDom.releaseCapture(); //该函数从当前的窗口释放鼠标捕获，并恢复通常的鼠标输入处理。
_IsMousedown=false;
}
}
_hDom.onmousedown=startDrag; // 鼠标按下事件。
document.onmouseup=endDrag; // 鼠标释放事件。
document.onmousemove=doDrag; // 鼠标移动事件。
_tDom.onselectstart=_tDom.oncontextmenu=function(){return false;}; // 禁止选择和右键菜单。
},
isIE:(navigator.appName=="Microsoft Internet Explorer"), // 判断是否为IE。
get:function(element){ // 通过一串字符返回一个对象。
if(typeof(element) == "string"){
return document.getElementById(element);
}
return element;
}
};
</script>
</head>
<body>
<table>
<tr>
<td><div id="min" onclick="minClick()">-</div></td>
<td><div id="bg" style="position:relative; left:0px; top:10px; width:418px;"></div> <div id="pt" style=" position:relative; left:4px; top:-13px; width:9px;"></div></td>
<td><div id="plus" onclick="plusClick()">+</div></td>
<td><div id="num" style="">0</div></td>
</tr>
</table>
<script type="text/javascript">

var objNum = document.getElementById("num");

// 使用方式如下：
dragdrop.registerDragdropHandler("pt","pt");

function minClick()
{
var objBG = document.getElementById('bg');
var objPT = document.getElementById('pt');

var ptLeft = parseInt(objPT.style.left);
var ptRight = parseInt(objPT.style.left) + parseInt(objPT.style.width);

var bgLeft = parseInt(objBG.style.left);
var bgRight = parseInt(objBG.style.left)+ parseInt(objBG.style.width);
if(objBG && objPT)
{
if(ptLeft > (bgLeft+9))
{
objPT.style.left = ptLeft - 5 + "px";
}
else
{
objPT.style.left = bgLeft + 4 + "px";
}
}
//var innerText = document.createTextNode(ptLeft + 5 + "");
if(navigator.appName=="Microsoft Internet Explorer")
{
objNum.innerText = parseInt(objPT.style.left) + 5 - 9 + "";
}
else
{
objNum.textContent = parseInt(objPT.style.left) + 5 - 9 + "";
}
}
function plusClick()
{
var objBG = document.getElementById('bg');
var objPT = document.getElementById('pt');

var ptLeft = parseInt(objPT.style.left);
var ptRight = parseInt(objPT.style.left) + parseInt(objPT.style.width);

var bgLeft = parseInt(objBG.style.left);
var bgRight = parseInt(objBG.style.left)+ parseInt(objBG.style.width);
if(objBG && objPT)
{
if(ptRight < (bgRight-9))
{
objPT.style.left = ptLeft + 5 + "px";
}
else
{
objPT.style.left = bgRight - parseInt(objPT.style.width) - 5 + "px";
}
}
if(navigator.appName=="Microsoft Internet Explorer")
{
objNum.innerText = parseInt(objPT.style.left) + 5 - 9 + "";
}
else
{
objNum.textContent = parseInt(objPT.style.left) + 5 - 9 + "";
}
}
</script>
</body>
</html>

目前只测试了FIREFOX和IE。

本回答由提问者推荐

已赞过 已踩过<

评论收起

oyt111745
2011-02-07 · 超过37用户采纳过TA的回答

知道小有建树答主

回答量：135

采纳率：0%

帮助的人：90.5万

我也去答题访问个人页

关注

展开全部

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

帮忙看看这个网站首页的效果怎么弄的？代码怎么写。求高手！

其他类似问题

为你推荐：