求大神帮忙兑现一个简单的JS
日期：2014-05-16 浏览次数：20471 次
求大神帮忙实现一个简单的JS
用我下面的代码，当鼠标移动到 项目一 时图片显示div.scrollLeft=0;项目二 时div.scrollLeft=300;项目三三 时 div.scrollLeft=600;谢谢
<style type="text/css">
<!--
div{
width:300px;
overflow:hidden;
float:left;
}
dl{
width:60px;
float:left;
margin:0px;
}
dd{
margin:0px;
}
img{
width:300px;
height:53px;
}
-->
span{
display:block;
width:5000%;
}
</style>
<script type="text/javascript">
function abc()
{
var dd = document.getElementsByTagName("dd");
var div = document.getElementsByTagName("div");
div.scrollLeft = 1000;
}
</script>
<dl>
<dd><a href="#">项目一</a></dd>
<dd><a href="#">项目二</a></dd>
<dd><a href="#">项目三</a></dd>
</dl>
<div>
<span>
<img src="#" alt="图片1" />
<img src="#" alt="图片2" />
<img src="#" alt="图片3" />
</span>
</div>
------解决方案--------------------
<!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">
<style type="text/css">
div{
width:400px;
height:200px;
overflow-x:scroll;
background-color:#F00;
}
img{
float:left;
}
</style>
<script type="text/javascript">
function abc(x){
var div = document.getElementsByTagName("div")[0];
div.scrollLeft =x;
return false;
}
</script>
<body>
<div>
123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789
</div>
<a href="" onclick="return abc(0)">0</a>
<a href="" onclick="return abc(30)">300</a>
<a href="" onclick="return abc(60)">600</a>
</body>
</html>
大体类似这样试试
用我下面的代码，当鼠标移动到 项目一 时图片显示div.scrollLeft=0;项目二 时div.scrollLeft=300;项目三三 时 div.scrollLeft=600;谢谢
<style type="text/css">
<!--
div{
width:300px;
overflow:hidden;
float:left;
}
dl{
width:60px;
float:left;
margin:0px;
}
dd{
margin:0px;
}
img{
width:300px;
height:53px;
}
-->
span{
display:block;
width:5000%;
}
</style>
<script type="text/javascript">
function abc()
{
var dd = document.getElementsByTagName("dd");
var div = document.getElementsByTagName("div");
div.scrollLeft = 1000;
}
</script>
<dl>
<dd><a href="#">项目一</a></dd>
<dd><a href="#">项目二</a></dd>
<dd><a href="#">项目三</a></dd>
</dl>
<div>
<span>
<img src="#" alt="图片1" />
<img src="#" alt="图片2" />
<img src="#" alt="图片3" />
</span>
</div>
------解决方案--------------------
<!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">
<style type="text/css">
div{
width:400px;
height:200px;
overflow-x:scroll;
background-color:#F00;
}
img{
float:left;
}
</style>
<script type="text/javascript">
function abc(x){
var div = document.getElementsByTagName("div")[0];
div.scrollLeft =x;
return false;
}
</script>
<body>
<div>
123456789123456789123456789123456789123456789123456789123456789123456789123456789123456789
</div>
<a href="" onclick="return abc(0)">0</a>
<a href="" onclick="return abc(30)">300</a>
<a href="" onclick="return abc(60)">600</a>
</body>
</html>
大体类似这样试试
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
