鼠标滑过缩略图显示大图 图片随鼠标移动的效果

pbmlly 2009-03-31 10:50:03
最近在做一个项目,希望做出个标题说的效果.Javascript不是很会,大家给点建议.
...全文
1567 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
caiying2009 2009-03-31
  • 打赏
  • 举报
 回复 


<HTML><HEAD><TITLE>So</TITLE>

<META http-equiv=Content-Type content="text/html; charset=utf-8">

<META http-equiv=expires content=0>



<STYLE type=text/css>

#dhtmltooltip {

	BORDER-RIGHT: black 2px solid; PADDING-RIGHT: 2px; BORDER-TOP: black 2px solid; PADDING-LEFT: 2px; Z-INDEX: 100; FILTER: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135); VISIBILITY: hidden; PADDING-BOTTOM: 2px; BORDER-LEFT: black 2px solid; WIDTH: 90px; PADDING-TOP: 2px; BORDER-BOTTOM: black 2px solid; POSITION: absolute; BACKGROUND-COLOR: white

}

.text {

	COLOR: #ff0000

}

</STYLE>



<META content="MSHTML 6.00.2900.3059" name=GENERATOR></HEAD>

<BODY vLink=#ff00ff aLink=#ff00ff link=#ff00ff bgColor=#000000>

<DIV id=dhtmltooltip></DIV>

<SCRIPT type=text/javascript>

var offsetxpoint=20 //Customize x offset of tooltip

var offsetypoint=5 //Customize y offset of tooltip

var ie=document.all

var ns6=document.getElementById && !document.all

var enabletip=false

if (ie||ns6)

var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""



function ietruebody(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}



function ddrivetip(thetimg){

if (ns6||ie){

if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"

if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor

tipobj.innerHTML='<table width=\'90\' border=\'0\' cellspacing=\'0\' cellpadding=\'0\'><tr align=\'center\' valign=\'top\'><td width=\'90\'><img src=\'images/'+thetimg+'\' width=\'180\' height=\'270\'><br> </td><td width=\'80%\' class=\'text\'><br> <br></td></tr></table>'

enabletip=true

return false

}

}



function positiontip(e){

if (enabletip){

var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;

var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;

//Find out how close the mouse is to the corner of the window

var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20

var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20



var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000



//if the horizontal distance isn't enough to accomodate the width of the context menu

if (rightedge<tipobj.offsetWidth)

//move the horizontal position of the menu to the left by it's width

tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"

else if (curX<leftedge)

tipobj.style.left="5px"

else

//position the horizontal position of the menu where the mouse is positioned

tipobj.style.left=curX+offsetxpoint+"px"



//same concept with the vertical position

if (bottomedge<tipobj.offsetHeight)

tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"

else

tipobj.style.top=curY+offsetypoint+"px"

tipobj.style.visibility="visible"

}

}



function hideddrivetip(){

if (ns6||ie){

enabletip=false

tipobj.style.visibility="hidden"

tipobj.style.left="-1000px"

tipobj.style.backgroundColor=''

tipobj.style.width=''

}

}



document.onmousemove=positiontip



</SCRIPT>

<DIV onmouseover="ddrivetip('13.gif') " onmouseout=hideddrivetip() ;><IMG height=100 src="images/1.gif" width=80 border=1></DIV><SPAN class=text>05.10.07</SPAN> 

</DIV>

<DIV onmouseover="ddrivetip('14.gif') " onmouseout=hideddrivetip() ;><IMG height=100 src="images/2.gif" width=80 border=1></DIV><SPAN class=text>05.15.07</SPAN> 

</DIV>

<DIV onmouseover="ddrivetip('15.gif') " onmouseout=hideddrivetip() ;><IMG height=100 src="images/3.gif" width=80 border=1></DIV><SPAN class=text>05.20.07</SPAN> 

</DIV>

<DIV onmouseover="ddrivetip('16.gif') " onmouseout=hideddrivetip() ;><IMG height=100 src="images/4.gif" width=80 border=1></DIV><SPAN class=text>05.25.07</SPAN> 

</DIV>

<DIV onmouseover="ddrivetip('17.gif') " onmouseout=hideddrivetip() ;><IMG height=100 src="images/5.gif" width=80 border=1></DIV><SPAN class=text>06.01.07</SPAN> 

</DIV>

<DIV onmouseover="ddrivetip('18.gif') " onmouseout=hideddrivetip() ;><IMG height=100 src="images/6.gif" width=80 border=1></DIV><SPAN class=text>06.05.07</SPAN> 

</DIV></TD>

<DIV onmouseover="ddrivetip('19.gif') " onmouseout=hideddrivetip() ;><IMG height=100 src="images/7.gif" width=80 border=1></DIV><SPAN class=text>04.10.07</SPAN> 

</DIV>

<DIV onmouseover="ddrivetip('20.gif') " onmouseout=hideddrivetip() ;><IMG height=100 src="images/8.gif" width=80 border=1></DIV><SPAN class=text>04.15.07</SPAN> 

</DIV>

<DIV onmouseover="ddrivetip('21.gif') " onmouseout=hideddrivetip() ;><IMG height=100 src="images/9.gif" width=80 border=1></DIV><SPAN class=text>04.20.07</SPAN> 

</DIV>

<DIV onmouseover="ddrivetip('22.gif') " onmouseout=hideddrivetip() ;><IMG height=100 src="images/10.gif" width=80 border=1></DIV><SPAN class=text>04.25.07</SPAN> 

</DIV>

<DIV onmouseover="ddrivetip('23.gif') " onmouseout=hideddrivetip() ;><IMG height=100 src="images/11.gif" width=80 border=1></DIV><SPAN class=text>05.01.07</SPAN> 

</DIV>

</BODY></HTML>
空心兜兜 2009-03-31
  • 打赏
  • 举报
 回复
多看例子吧
pbmlly 2009-03-31
  • 打赏
  • 举报
 回复
组织了一下语言,我需要的是图片能自动适应浏览器,不能超出浏览器.
谢谢各位了啊.
pbmlly 2009-03-31
  • 打赏
  • 举报
 回复
我的邮箱是pbmlly@yahoo.cn,10楼的兄弟把资料发给我看看啊.
一把编程的菜刀 2009-03-31
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 pbmlly 的回复:]
但是这个东西和鼠标的图片的位置之间的关系是什么啊.后面这两句能不能帮忙解释一下下~~~
var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)

ycoord += event.clientY + truebody().scrollTop - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + event.clientY - docheight));
[/Quote]

根据浏览器的不同选择最小值和最大值
pbmlly 2009-03-31
  • 打赏
  • 举报
 回复
8楼的,你的方法碰到浏览器下边框没有处理,如果缩略图在浏览器最下面的话会遮住图片的.
itcrazyman 2009-03-31
  • 打赏
  • 举报
 回复
呵我这儿正好有现成的例子,如果需要我给你发邮箱,我的地址waqizhenyu008@163.com
pbmlly 2009-03-31
  • 打赏
  • 举报
 回复
但是这个东西和鼠标的图片的位置之间的关系是什么啊.后面这两句能不能帮忙解释一下下~~~
var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)

ycoord += event.clientY + truebody().scrollTop - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + event.clientY - docheight));
caiying2009 2009-03-31
  • 打赏
  • 举报
 回复 




<!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>

</head>

<style>

.demo{overflow:hidden;width:120px;text-align:center;padding:10px;}

.demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4}

#enlarge_images{position:absolute;display:none;z-index:2;}

#enlarge_images img{border:5px solid #f4f4f4;}

</style>

<body>

<div id="enlarge_images"><img src=""></div>

<div id="box">

	<div class="demo">

		<img src="images/2.jpg">

	</div>

	

	<div class="demo">

		<img src="images/5.jpg">

	</div>

	

	<div class="demo">

		<img src="images/1.jpg">

	</div>

	

	<div class="demo">

		<img src="images/3.jpg">

	</div>

</div>

	

<script>

var maxsize=400;//图片最大尺寸

var obj = document.getElementById("box").getElementsByTagName("img"),j=obj.length;

var bigpic = document.getElementById("enlarge_images");

for(i=0; i<j; i++){

	obj[i].onmousemove = function(){

/*调整图片尺寸start*/

		var thisimg=new Image()

		thisimg.src=this.src

		var r=thisimg.width/thisimg.height

		if (r>=1){w=maxsize;h=maxsize/r;}

 		else{w=maxsize*r;h=maxsize}	

		bigpic.getElementsByTagName("img")[0].style.width= w+"px";

		bigpic.getElementsByTagName("img")[0].style.height= h+"px";

/*调整图片尺寸end*/

		bigpic.style.display = "block";

		bigpic.style.left  = this.offsetWidth + 30 + "px";

		bigpic.style.top = document.body.scrollTop + (event|| window.event).clientY -10 + "px";

		bigpic.getElementsByTagName("img")[0].src= this.src;

	}

	obj[i].onmouseout = function(){

		bigpic.style.display = "none";

		bigpic.getElementsByTagName("img")[0].src= "";

	}

	obj[i].onclick = function(){

		window.open( this.src);

	}

}

</script> 

</body>

</html>
pbmlly 2009-03-31
  • 打赏
  • 举报
 回复
2楼的问题也帮忙解一下啊~~~谢谢了啊
一把编程的菜刀 2009-03-31
  • 打赏
  • 举报
 回复
GOOGLE了一大堆,有的东西看不太懂啊.
下面是找到的一段JAVASCRIPT,但是有的地方不明白.
上下移动的时候,有MAX,MIN两个函数,我想不明白意思.


晕，MAX是取最大值，MIN取最小值你都不明白？
一把编程的菜刀 2009-03-31
  • 打赏
  • 举报
 回复
看需求，好与不好是看客户需求
pbmlly 2009-03-31
  • 打赏
  • 举报
 回复
其实我不明白的就是图片你们都是怎么处理的,我们老大也没做过图片相关的项目.
我在DATAGRID里面添加了一个阅览列,显示的是缩小的图片,我不知道是点击缩略图显示大图好呢,
还是鼠标经过显示大图好.
没有经验,愁死了.
sy_binbin 2009-03-31
  • 打赏
  • 举报
 回复 


 <style>

#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}

#demo img{border:none;width:100px;height:100px;border:5px solid #f4f4f4}

#enlarge_images{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4}

</style>

<div id="demo" style="overflow:hidden;width:120px;text-align:center;padding:10px">

 <img src="http://www.makewing.com/images/uppic/200801101244190.jpg">

</div>

<div id="enlarge_images"></div>

<script>

var demo = document.getElementById("demo");

var gg = demo.getElementsByTagName("img");

var ei = document.getElementById("enlarge_images");

for(i=0; i<gg.length; i++){

 var ts = gg[i];

 ts.onmousemove = function(event){

  event = event || window.event;

  ei.style.display = "block";

  ei.innerHTML = '<img src="' + this.src + '" />';

  ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px";

  ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";

 }

 ts.onmouseout = function(){

  ei.innerHTML = "";

  ei.style.display = "none";

 }

 ts.onclick = function(){

  window.open( this.src );

 }

}

</script>
pbmlly 2009-03-31
  • 打赏
  • 举报
 回复
GOOGLE了一大堆,有的东西看不太懂啊.
下面是找到的一段JAVASCRIPT,但是有的地方不明白.
上下移动的时候,有MAX,MIN两个函数,我想不明白意思.


var offsetfrommouse=[15,25]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset

var displayduration=0; //duration in seconds image should remain visible. 0 for always.



var defaultimageheight = 40;	// maximum image size.

var defaultimagewidth = 40;	// maximum image size.



var timer;



function gettrailobj(){

if (document.getElementById)

return document.getElementById("preview_div").style

}



function gettrailobjnostyle(){

if (document.getElementById)

return document.getElementById("preview_div")

}





function truebody(){

return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}







function hidetrail(){	

	gettrailobj().display= "none";

	document.onmousemove=""

	gettrailobj().left="-500px"

	clearTimeout(timer);

}



function showtrail(imagename,title,width,height){

	i = imagename

	t = title

	w = width

	h = height

	timer = setTimeout("show('"+i+"',t,w,h);",200);

}

function show(imagename,title,width,height){

 

    var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth - offsetfrommouse[0]

	var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)



	if( (navigator.userAgent.indexOf("Konqueror")==-1  || navigator.userAgent.indexOf("Firefox")!=-1 || (navigator.userAgent.indexOf("Opera")==-1 && navigator.appVersion.indexOf("MSIE")!=-1)) && (docwidth>650 && docheight>500)) {

		( width == 0 ) ? width = defaultimagewidth: '';

		( height == 0 ) ? height = defaultimageheight: '';

			

		width+=30

		height+=55

		defaultimageheight = height

		defaultimagewidth = width

	

		document.onmousemove=followmouse; 



		

		newHTML = '<div class="border_preview" style="width:'+  width +'px;height:'+ height +'px"><div id="loader_container"><div id="loader"><div align="center">Loading template preview...</div><div id="loader_bg"><div id="progress"> </div></div></div></div>';

		newHTML = newHTML + '<h2 class="title_h2">' + ' '+title + '</h2>'

		

    	newHTML = newHTML + '<div class="preview_temp_load"><img onload="javascript:remove_loading();" src="' + imagename + '" border="0"></div>';

		newHTML = newHTML + '</div>'; 

		

		if(navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1 ){

			newHTML = newHTML+'<iframe src="about:blank" scrolling="no" frameborder="0" width="'+width+'" height="'+height+'"></iframe>';

		}		



		gettrailobjnostyle().innerHTML = newHTML;

		gettrailobj().display="block";

	}

}



function followmouse(e){



	var xcoord=offsetfrommouse[0]

	var ycoord=offsetfrommouse[1]



	var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15

	var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight)



	if (typeof e != "undefined"){

		if (docwidth - e.pageX < defaultimagewidth + 2*offsetfrommouse[0]){

			xcoord = e.pageX - xcoord - defaultimagewidth; // Move to the left side of the cursor

		} else {

			xcoord += e.pageX;

		}

		if (docheight - e.pageY < defaultimageheight + 2*offsetfrommouse[1]){

			ycoord += e.pageY - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + e.pageY - docheight - truebody().scrollTop));

		} else {

			ycoord += e.pageY;

		}



	} else if (typeof window.event != "undefined"){

		if (docwidth - event.clientX < defaultimagewidth + 2*offsetfrommouse[0]){

			xcoord = event.clientX + truebody().scrollLeft - xcoord - defaultimagewidth; // Move to the left side of the cursor

		} else {

			xcoord += truebody().scrollLeft+event.clientX

		}

		if (docheight - event.clientY < (defaultimageheight + 2*offsetfrommouse[1])){

			ycoord += event.clientY + truebody().scrollTop - Math.max(0,(2*offsetfrommouse[1] + defaultimageheight + event.clientY - docheight));

		} else {

			ycoord += truebody().scrollTop + event.clientY;

		}

	}

	gettrailobj().left=xcoord+"px"

	gettrailobj().top=ycoord+"px"



}
一把编程的菜刀 2009-03-31
  • 打赏
  • 举报
 回复
倒，这种效果为什么都不GOOGLE一下，例子一大堆
鼠标滑过缩略图放大显示原图.zip
鼠标滑过缩略图放大显示原图是一款鼠标经过缩略图放大展示原图片，并提示图片文字信息，点击可进入相应链接
js实现带缩略图的图片切换效果（有控制按钮）
1、鼠标点击缩略图片显示大图片 2、缩略图片可自动控制，点击最后一张小图片时会自动向左（右）移动一张图片，并且有按钮控制所有缩略图片
微信公众号自定义分享朋友圈、发送朋友（标题、描述、缩略图）
讲解什么是微信公众号自定义分享朋友圈、发送朋友；普通的分享链接效果和自定义的分享效果。 自定义分享朋友和发送给朋友可以设置自定义的标题、描述、缩略图。
jQuery鼠标悬停缩略图横向切换大图展示特效.zip
jQuery鼠标悬停缩略图横向切换大图展示特效是一款鼠标经过放在缩略图上或者点击缩略图自动切换图片大图展示代码。
JQ实现鼠标经过显示大图效果
实现的效果鼠标移到缩略图上会显示该图的大图，并且大图跟随鼠标移动；或是移动到提示文字上，也可以显示图片。并且含有方向判别功能，具体来说就是如果缩略图在页面的左半部分，则大图显示在鼠标的右侧，如果缩略图在页面的右半部分，则预览的大图在鼠标的左侧显示。
JavaScript

87,924

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章