教程集 > jQuery > jquery 教程 > 正文图片特效-鼠标滑过图片放大效果

图片特效-鼠标滑过图片放大效果

发布时间：2023-12-21 编辑：jiaochengji.com

教程集为您提供图片特效-鼠标滑过图片放大效果等资源，欢迎您收藏本站，我们将为您提供最新的图片特效-鼠标滑过图片放大效果资源

提示：您可以先修改部分代码再运行

图片特效-鼠标滑过图片放大效果  <!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>图片特效-鼠标滑过图片放大效果</title>  <meta http-equiv="content-type" content="text/html;charset=gb2312">    <style type="text/  *{padding:0;margin:0;}  html{overflow:-moz-scrollbars-vertical;}  body{font:12px/22px "宋体";word-break:break-all;text-align:left;background:#C0C0C0;color:#4E4E4E;}  ul,li{list-style:none;}  a{color:#333;text-decoration:none;}  a:hover{color:#ff722d;text-decoration:none;}  img{border:0;}  a img,a:hover img{border:0;}  .latestWeb{width:560px;margin:10px auto 0;}  .latestWeb ul{overflow:hidden;_height:1%;}  .latestWeb li{float:left;border:1px solid #EBEAEA;width:150px;padding:17px 0 14px 22px;margin:14px 18px 0 0;}  .trans_msg{filter:alpha(opacity=100,enabled=1) revealTrans(duration=.2,transition=1) blendtrans(duration=.2);}  div.bodycontent{font-family:Arial, Helvetica, sans-serif;padding:0 10px 10px 13px;color:#555;line-height:22px;text-align:justify;text-justify:inter-ideograph;}  div.bodycontent ul{margin-left:0px;}  </style>  </head>  <body>    <div class="latestWeb">    <ul>      <li>        <div style="width:128px;height:126px"><a href="#"><a href="http://filesimg.111cn.net/20091105010209411.jpg" target="_blank"><img alt="图片特效-鼠标滑过图片放大效果"  src="http://p1.jquerycn.cn/111cn/3/8/1508662725_1163.jpg" onmouseover="toolTip(\'<img  alt=">\')" onMouseOut="toolTip()"></a></div>      </li>      <li>        <div style="width:128px;height:126px"><a href="http://filesimg.111cn.net/2009110501022279.jpg" target="_blank"><img alt="图片特效-鼠标滑过图片放大效果"  src="http://p1.jquerycn.cn/111cn/7/2/1508662725_3429.jpg" onmouseover="toolTip(\'<img  alt=">\')" onMouseOut="toolTip()"></a></div>      </li>      <li>        <div style="width:128px;height:126px"><a href="http://filesimg.111cn.net/20091105010235809.jpg" target="_blank"><img alt="图片特效-鼠标滑过图片放大效果"  src="http://p1.jquerycn.cn/111cn/a/f/1508662726_6693.jpg" onmouseover="toolTip(\'<img  alt=">\')" onMouseOut="toolTip()"></a></div>      </li>      <li>        <div style="width:128px;height:126px"><a href="http://filesimg.111cn.net/20091105010247539.jpg" target="_blank"><img alt="图片特效-鼠标滑过图片放大效果"  src="http://p1.jquerycn.cn/111cn/3/8/1508662726_8342.jpg" onmouseover="toolTip(\'<img  alt=">\')" onMouseOut="toolTip()"></a></div>      </li>      <li>        <div style="width:128px;height:126px"><a href="http://filesimg.111cn.net/20091105010300668.jpg" target="_blank"><img alt="图片特效-鼠标滑过图片放大效果"  src="http://p1.jquerycn.cn/111cn/0/3/1508662726_6372.jpg" onmouseover="toolTip(\'<img  alt=">\')" onMouseOut="toolTip()"></a></div>      </li>      <li>        <div style="width:128px;height:126px"><a href="http://filesimg.111cn.net/20091105010312406.jpg" target="_blank"><img alt="图片特效-鼠标滑过图片放大效果"  src="http://p1.jquerycn.cn/111cn/9/d/1508662726_2808.jpg" onmouseover="toolTip(\'<img  alt=">\')" onMouseOut="toolTip()"></a></div>      </li>      <li>        <div style="width:128px;height:126px"><a href="http://filesimg.111cn.net/20091105010325632.jpg" target="_blank"><img alt="图片特效-鼠标滑过图片放大效果"  src="http://p1.jquerycn.cn/111cn/7/8/1508662726_5279.jpg" onmouseover="toolTip(\'<img  alt=">\')" onMouseOut="toolTip()"></a></div>      </li>      <li>        <div style="width:128px;height:126px"><a href="http://filesimg.111cn.net/20091105010338435.jpg" target="_blank"><img alt="图片特效-鼠标滑过图片放大效果"  src="http://p1.jquerycn.cn/111cn/d/4/1508662726_2128.jpg" onmouseover="toolTip(\'<img  alt=">\')" onMouseOut="toolTip()"></a></div>      </li>      <li>        <div style="width:128px;height:126px"><a href="http://www.111cn.net/notfound.jpg" target="_blank"><img alt="图片特效-鼠标滑过图片放大效果"  src="" onmouseover="toolTip(\'<img  alt=">\')" onMouseOut="toolTip()"></a></div>      </li>    </ul>  </div>  <script language="javascript">  function getViewportHeight() {  	if (window.innerHeight!=window.undefined) return window.innerHeight;  	if (document.compatMode=='CSS1Compat') return document.documentElement.clientHeight;  	if (document.body) return document.body.clientHeight;     	return window.undefined;   }  function getViewportWidth() {  	if (window.innerWidth!=window.undefined) return window.innerWidth;  	if (document.compatMode=='CSS1Compat') return document.documentElement.clientWidth;  	if (document.body) return document.body.clientWidth;     	return window.undefined;   }  /**   * Gets the real scroll top  */  function getScrollTop() {  	if (self.pageYOffset) // all except Explorer  	{  		return self.pageYOffset;  	}  	else if (document.documentElement && document.documentElement.scrollTop)  		// Explorer 6 Strict  	{  		return document.documentElement.scrollTop;  	}  	else if (document.body) // all other Explorers  	{  		return document.body.scrollTop;  	}  }  function getScrollLeft() {  	if (self.pageXOffset) // all except Explorer  	{  		return self.pageXOffset;  	}  	else if (document.documentElement && document.documentElement.scrollLeft)  		// Explorer 6 Strict  	{  		return document.documentElement.scrollLeft;  	}  	else if (document.body) // all other Explorers  	{  		return document.body.scrollLeft;  	}  }  //--初始化变量--  var rT=true;//允许图像过渡  var bT=true;//允许图像淡入淡出  var tw=150;//提示框宽度  var endaction=false;//结束动画  var ns4 = document.layers;  var ns6 = document.getElementById && !document.all;  var ie4 = document.all;  offsetX = 10;  offsetY = 20;  var toolTipSTYLE="";  function initToolTips()  {  	tempDiv = document.createElement("div");  	tempDiv.id = "toolTipLayer";  	tempDiv.style.position = "absolute";  	tempDiv.style.display = "none";  	document.body.appendChild(tempDiv);  	if(ns4||ns6||ie4)  	{  		if(ns4) toolTipSTYLE = document.toolTipLayer;  		else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;  		else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;  		if(ns4) document.captureEvents(Event.MOUSEMOVE);  		else  		{  		  toolTipSTYLE.visibility = "visible";  		  toolTipSTYLE.display = "none";  		}  		document.onmousemove = moveToMouseLoc;  	}  }  function toolTip(msg, fg, bg)  {  	try {  	  if(toolTip.arguments.length < 1) // hide  	  {  		if(ns4)   		{  		toolTipSTYLE.visibility = "hidden";  		}  		else   		{  		  //--图象过渡，淡出处理--  		  if (!endaction) {toolTipSTYLE.display = "none";}  		  if (rT) document.all("msg1").filters[1].Apply();  		  if (bT) document.all("msg1").filters[2].Apply();  		  document.all("msg1").filters[0].opacity=0;  		  if (rT) document.all("msg1").filters[1].Play();  		  if (bT) document.all("msg1").filters[2].Play();  		  if (rT){   		  if (document.all("msg1").filters[1].status==1 || document.all("msg1").filters[1].status==0){    		  toolTipSTYLE.display = "none";}  		  }  		  if (bT){  		  if (document.all("msg1").filters[2].status==1 || document.all("msg1").filters[2].status==0){    		  toolTipSTYLE.display = "none";}  		  }  		  if (!rT && !bT) toolTipSTYLE.display = "none";  		  //----------------------  		}  	  }  	  else // show  	  {  		if(!fg) fg = "#777777";  		if(!bg) bg = "#eeeeee";  		var content =  		'<table id="msg1" name="msg1" border="0" cellspacing="0" cellpadding="1" bgcolor="'   fg   '" class="trans_msg"><td>'  　'<table border="1" cellspacing="2" cellpadding="3" bgcolor="'   bg   '"><td><font face="Arial" color="'   fg   '" size="-2">'   msg   '</font></td></table></td></table>';  		if(ns4)  		{  		  toolTipSTYLE.document.write(content);  		  toolTipSTYLE.document.close();  		  toolTipSTYLE.visibility = "visible";  		}  		if(ns6)  		{  		  document.getElementById("toolTipLayer").innerHTML = content;  		  toolTipSTYLE.display='block'  		}  		if(ie4)  		{  		  document.all("toolTipLayer").innerHTML=content;  		  toolTipSTYLE.display='block'  		  //--图象过渡，淡入处理--  		  var cssopaction=document.all("msg1").filters[0].opacity  		  document.all("msg1").filters[0].opacity=0;  		  if (rT) document.all("msg1").filters[1].Apply();  		  if (bT) document.all("msg1").filters[2].Apply();  		  document.all("msg1").filters[0].opacity=cssopaction;  		  if (rT) document.all("msg1").filters[1].Play();  		  if (bT) document.all("msg1").filters[2].Play();  		  //----------------------  		}  	  }  	} catch(e) {}  }  function moveToMouseLoc(e)  {    var scrollTop = getScrollTop();    var scrollLeft = getScrollLeft();    if(ns4||ns6)    {      x = e.pageX   scrollLeft;      y = e.pageY - scrollTop;    }    else    {      x = event.clientX   scrollLeft;      y = event.clientY;    }    if (x-scrollLeft > getViewportWidth() / 2) {    	x = x - document.getElementById("toolTipLayer").offsetWidth - 2 * offsetX;    }    if ((y document.getElementById("toolTipLayer").offsetHeight offsetY)>getViewportHeight()) {  	y = getViewportHeight()-document.getElementById("toolTipLayer").offsetHeight-offsetY;    }    toolTipSTYLE.left = (x   offsetX) 'px';    toolTipSTYLE.top = (y   offsetY   scrollTop) 'px';    return true;  }  initToolTips();  </script>  </body>  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jQuery图片放大插件 hoverpluse
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
 分享精心挑选的23款美轮美奂的jQuery 图片特效插件
 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
 js实现鼠标滑到图片上则产生放大浮出的效果
 7款吸引人眼球的jQuery/CSS3特效实例分享
 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
 jQuery图片播放器 imgplayer
图片和CSS制作动画按钮
 jQuery.jImageLink

上一篇：js 用户自定义多文件上传代码下一篇：js 倒计时变速加数效果代码

[关闭]

图片特效-鼠标滑过图片放大效果

最近更新

浏览排行