求一特效，网页下在一张图片下实现鼠标在该图片下有十字线效果-JavaSript-爱易网页

求一特效，网页下在一张图片下实现鼠标在该图片下有十字线效果

日期：2014-05-16　浏览次数：20428 次

求一特效，网页上在一张图片上实现鼠标在该图片上有十字线效果。
思路。。。页面上有一张图片，被一个DIV包含，
鼠标移动到DIV上触发事件
显示十字线效果
十字线交点处是鼠标尖头上。。。。

哎做JAVAWEB开发的苦逼的孩子求。。。

------解决方案--------------------
style="cursor:crosshair"这个就是鼠标的十字效果
------解决方案--------------------

探讨
style="cursor:crosshair"这个就是鼠标的十字效果

------解决方案--------------------
你要的是这个效果吗？

HTML code


<html>
<head>
<style>
<!--
#leftright, #topdown{
position:absolute;
left:0;
top:0;
width:2;
height:2;
layer-background-color:#6699cc;
background-color:#6699cc;
z-index:100;
font-size:0px;
}
-->
</style>
<title>十字线</title>
</head>
<body>
<div id="leftright" style="width:expression(document.body.clientWidth)"></div>
<div id="topdown" style="height:expression(document.body.clientHeight)"></div>
<script language="JavaScript">
<!--
var w = (window.innerWidth)?window.innerWidth:(document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth:document.body.offsetWidth;
var h = (window.innerHeight)?window.innerHeight:(document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight:document.body.offsetHeight;

if (document.all && !window.print){
leftright.style.width=w;
topdown.style.height=h;
}
else if (document.layers){
document.leftright.clip.width=w;
document.leftright.clip.height=5;
document.topdown.clip.width=5;
document.topdown.clip.height=h;
}
function followmouse1(){
//move cross engine for IE 4+
leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
topdown.style.pixelTop=document.body.scrollTop
if (event.clientX<document.body.clientWidth-2)
topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
else
topdown.style.pixelLeft=document.body.clientWidth-2

leftright.style.width=w-21;
topdown.style.height=h-5;
}
function followmouse2(e){
//move cross engine for NS 4+
document.leftright.top=e.y+6
document.topdown.top=pageYOffset
document.topdown.left=e.x+6
}
if (document.all)
document.onmousemove=followmouse1
else if (document.layers){
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=followmouse2
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
setTimeout("window.onresize=regenerate",400)
}
if ((document.all && !window.print)||document.layers)
//if the user is using IE 4 or NS 4, both NOT IE 5+
window.onload=regenerate2
function show()
{
    leftright.style.visiable = "";
    topdown.style.visiable = "";
    
    leftright.style.display = "";
    topdown.style.display = "";
}

function hidden()
{
    leftright.style.visiable = "none";
    topdown.style.visiable = "none";
    
    leftright.style.display = "none";
    topdown.style.display = "none";    
}
//-->
</script>
<img src="图片" width="300" height="300" onmousemove="show()" onmouseout="hidden()">

</body>

</html>

------解决方案--------------------

HTML code<style type="text/css">
#dv{position:relative;}
#linex{height:1px;width:300px;position:absolute;left:0px;background:#000;overflow:hidden;display:none;}
#liney{height:300px;width:1px;position:absolute;top:0px;background:#f00;overflow:hidden;display:none;}
</style>
<div id="dv"><img src="pic.jpg" id="img"/><div id="linex"></div><div id="liney"></div></div>
<script>
window.onload=function(){
  var img=document.getElementById(

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

求一特效，网页下在一张图片下实现鼠标在该图片下有十字线效果

相关资料更多>

推荐阅读更多>