您的位置：首页 > 运维架构 > 网站架构

网站开发积累（鼠标控制图片左右移动）

2013-11-18 23:47 393 查看

在最近的网站开发里，需要通过鼠标的位置来控制图片的左右平滑移动，说直接点就是：有一个比较长的图片，不能完全显示在窗口，当鼠标放在窗口右侧的时候，图片会向右移；当鼠标放在窗口左边的时候，图片会向左移；当鼠标放在窗口中间位置的时候，图片就不移动。根据一边查资料一边进行修改实验，终于给整出来了，现在将相关过程记录如下。

（一）首先，是找到一篇博客，题目是“js控制图片左右平滑移动”，里面列出了他控制图片移动的源代码，为了尊重原博主的知识产权，现列出原博客网址（http://hi.baidu.com/kongcheng2012/item/c7707ef497163eda43c36a1e）。这篇博客实现的功能跟我想要的效果已经很像了，他的主要思想是通过两个div实现了，设置上层div为overflow:hidde，相当于一个窗口，对下层div实现裁剪，只显示窗口以内的部分内容；而下层div里就是我们需要左右移动的图片，通过左右滚动，从而实现了图片的左右移动。不过他离我实际需要的效果还是有点点不一样，他是设置了两个button，一个是“向左”，一个是'向右"，通过button.onmouseover（）来检测鼠标是否移到button上了，当鼠标移动到“向左”按钮上时，则通过调用向左滚动的代码，来实现图片向左移动；当鼠标移动到“向右”按钮上时，则通过调用向右滚动的代码，来实现图片向右移动；当鼠标移动到图片上时，则图片不动。

（二）虽然博主通过“向左”、“向右”两个按钮，实现了图片的左移和右移，但我想要的是当鼠标放在图片左边时，则左移；当鼠标放在图片右边时，则右移；当放中间时则不动。很明显，假如我得到了鼠标在图片中间的相对位置，那么我就可以判断鼠标是处于左半部分还是有半部分，然后就可以跟博主的代码结合起来了，达到我想要的效果。

于是我下一步要做的就是“通过js获取鼠标在图片中的相对坐标”。还是在网上搜资料，代码如下：

VAR X= event.clientX;  //x坐标：鼠标在图片中的相对位置
VAR Y= event.clientY;  //y坐标：鼠标在图片中的相对位置

}</script>

（三）最后根据以上两段代码，整合成的最终源码如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'Run.jsp' starting page</title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
window.onload = function()
{
var imgNode = document.getElementById("demo");
var xSpan = document.getElementById("x");
var ySpan = document.getElementById("y");
imgNode.onmousemove = function()
{
xSpan.innerHTML = event.clientX;    
ySpan.innerHTML = event.clientY;

<!--根据获得的X坐标，与图片的宽进行对比，分成在图片左侧、中间、右侧三种情况  -->
if(event.clientX<demo.offsetWidth/2-10)
{if(MyMar) clearInterval(MyMar);Fang=1;MyMar=setInterval(MarqueeL,speed)}
else if(event.clientX>demo.offsetWidth/2-10&&event.clientX<demo.offsetWidth/2+10)
{clearInterval(MyMar)}
else if(event.clientX>demo.offsetWidth/2+10)
{if(MyMar) clearInterval(MyMar);Fang=0;MyMar=setInterval(MarqueeR,speed)}
}
}
</script>

  </head>
  
  <body>
 
<div id="demo" style="overflow:hidden;width:239px">
<div id="c1" style="width:478px"><img width="239" src="images/12.jpg"><img width="239" src="images/12.jpg">
</div>
</div>

<script>
var speed=30;
var c1_w=c1.offsetWidth;
c1.style.width=c1_w*2+"px";
c1.innerHTML=c1.innerHTML;	 
var Fang=1;
var MyMar=setInterval(MarqueeL,speed);	 
function MarqueeL()    <!-- 下层div向左滚动-->

{
if(c1_w-demo.scrollLeft*2<=0) demo.scrollLeft-=c1_w; else demo.scrollLeft++;
}
function MarqueeR()    <!--下层div向右滚动-->

{
if(c1_w-demo.scrollLeft>=c1_w) demo.scrollLeft+=c1_w/2; else demo.scrollLeft--;
}
    </script>
鼠标相对窗口坐标是x:<span id="x"></span>--y:<span id="y"></span>
  </body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 控制图片左右移动

相关文章推荐

新的分享

章节导航