教程集 > jQuery > jquery 教程 > 正文鼠标悬停图片放大

鼠标悬停图片放大

发布时间：2023-12-25 编辑：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/css">  .area .col2{float:left; width:25px;}  .focusArea .col2{ float:right; width:497px; margin:0 1px 0 0; display:inline; background:#FAFAFA;height:320px; overflow:hidden; }  .focusPic{clear:both; margin:0 auto; width:464px; padding:16px 0 0;text-align:left;}  .focusPic .pic{clear:both; height:250px; overflow:hidden;}  .focusPic .pic img{border:1px solid #ccc;}  .focusPic .pic ul{float:right; width:97px;}  .focusPic .pic li{clear:both; text-align:right; padding:0 0 9px;}  .focusPic .pic .active{ background:url(http://cimg2.163.com/cnews/img/bg1.gif) 0 -454px no-repeat;}  .focusPic .pic .active img{padding:2px; background:#fff; border:1px solid #1f3a87;}  .focusPic .pic .active img:hover{border:1px solid #bc2931;}  .focusPic h2{clear:both; font-size:14px; font-weight:bold;}  .focusPic .text{line-height:19px; padding:5px 12px 0 0;}  .left{ float: left;}  .foot .text{padding:3px 0 6px; border-bottom:1px solid #000; margin:0 0 5px; clear:both;}  /* CSS Document */  body {text-align:center;font-family: 宋体, serif;  margin:0; padding:0; background: #fff; font-size:12px; color:#000;}  div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border:0; }  h1,h2,h3,h4,h5,h6 {margin:0; padding:0; font-size:12px; font-weight:normal;}  table,td,tr,th{font-size:12px;}  li{list-style-type:none;}  input,button{cursor:pointer;}  img{vertical-align:top;}  table{margin:0 auto;}  /* 链接颜色 */  a:link {color: #000; text-decoration:none;}  a:visited {color: #83006f;text-decoration:none;}  a:hover {color: #bc2931; text-decoration:underline;}  a:active {color: #bc2931;}  /* 颜色属性 */  .cRed,a.cRed:link,a.cRed:visited{ color:Red; }  .cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;}  .cDRed,a.cDRed:link,a.cDRed:visited{ color:#bc2931;}  .cGray,a.cGray:link,a.cGray:visited{ color: #333;}  .cDGray,a.cDGray:link,a.cDGray:visited{ color: #666;}  .cWhite,a.cWhite:link,a.cWhite:visited{ color:#fff;}  .cBlack,a.cBlack:link,a.cBlack:visited{color:#000;}  a.cBlack:hover{color:#bc2931;}  .cGreen,a.cGreen:link,a.cGreen:visited{color:#008000;}  .cYellow,a.cYellow:link,a.cYellow:visited{color:#ff0;}  /* 字体属性 */  .fB {font-weight: bold;}  .fI {font-style: italic;}  /* 字体大小*/  .f12px{ font-size:12px;}  .f14px{ font-size:14px;}  /* 其他属性 */  .left{ float: left;}  .right{ float: right;}  .clear{ clear: both; font-size:1px; width:1px; height:0; overflow:hidden; }  .hidden {display: none;}  .unLine ,.unLine a{text-decoration: none;}  .noBorder{border:none;    }  </style>  <script language="javascript" src="http://news.163.com/special/0001jt/indexjs.js"></script>  </head>  <body>    <div class="col2">    <div class="focusPic">      <div class="pic">        <div id="focusPic1" style="display:block;"><img src="http://p1.jquerycn.cn/111cn/1/9/1474575153_9753.jpg" alt="陕西灾区学生烈日下备战高考" width="360" height="240" border="0" class="left" /></div>        <div id="focusPic2" style="display:none;"><img src="http://p1.jquerycn.cn/111cn/b/e/1474575154_7185.jpg" alt="内蒙古浮尘远飘青岛" width="360" height="240" border="0" class="left" /></div>        <div id="focusPic3" style="display:none;"><img src="http://p1.jquerycn.cn/111cn/e/8/1474575154_9970.jpg" alt="胡锦涛会见国民党主席吴伯雄" width="360" height="240" border="0" class="left" /></div>        <div id="focusPic4" style="display:none;"><img src="http://p1.jquerycn.cn/111cn/9/2/1474575154_8302.jpg" alt="贵州暴雨山洪造成30人死亡 13人失踪" width="360" height="240" border="0" class="left" /></div>        <ul>          <li id="focusnav1" class="active" onmouseover="javascript:showFocus(1);"><img src="http://p1.jquerycn.cn/111cn/1/9/1474575154_9894.jpg" width="75" height="50" alt="陕西灾区学生烈日下备战高考" border="0" /></li>          <li id="focusnav2" class="" onmouseover="javascript:showFocus(2);"><img src="http://p1.jquerycn.cn/111cn/b/e/1474575154_8306.jpg" width="75" height="50" alt="内蒙古浮尘远飘青岛" border="0" /></li>          <li id="focusnav3" class="" onmouseover="javascript:showFocus(3);"><img src="http://p1.jquerycn.cn/111cn/e/8/1474575154_7900.jpg" width="75" height="50" alt="胡锦涛会见国民党主席吴伯雄" border="0" /></li>          <li id="focusnav4" class="" onmouseover="javascript:showFocus(4);"><img src="http://p1.jquerycn.cn/111cn/9/2/1474575155_1453.jpg" width="75" height="50" alt="贵州暴雨山洪造成30人死亡 13人失踪" border="0" /></li>        </ul>      </div>      <div id="focusContent1" style="display:block;">        <h2>陕西灾区学生烈日下备战高考</h2>        <div class="text">由于帐篷闷热，宁强县1100多名学生的很多课程只能放到帐篷外上。 [详细]</div>      </div>      <div id="focusContent2" style="display:none;">        <h2>内蒙古浮尘远飘青岛</h2>        <div class="text">5月26日，内蒙古出现大范围扬沙和沙尘暴天气。28日，浮尘飘移至青岛 [详细]</div>      </div>      <div id="focusContent3" style="display:none;">        <h2>胡锦涛会见国民党主席吴伯雄</h2>        <div class="text">这是在台湾局势发生积极变化形势下，两党最高领导人之间的首次会谈。 [详细]</div>      </div>      <div id="focusContent4" style="display:none;">        <h2>贵州暴雨山洪造成30人死亡 13人失踪</h2>        <div class="text">贵州全省已有25个县不同程度受灾，因灾毁损房屋3200多间。 [详细]</div>      </div>    </div>  </div>  </body>  </html>

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

您可能感兴趣的文章：
jQuery图片幻灯手风琴效果插件 Slidorion
jQuery当鼠标悬停时放大图片的效果实例
 jQuery 列表自动循环滚动鼠标悬停时停止滚动的实现代码(图文)
jQuery 打造动态渐变按钮详细图文教程
 jQuery chili图片远处放大插件
 使用jquery hover事件实现表格的隔行换色功能示例
 jQuery实现列表自动循环滚动鼠标悬停时停止滚动
 JS悬浮移动窗口(悬浮广告)的特效代码
 鼠标悬停tip效果如何用css实现？
jQuery图片放大插件 hoverpluse

上一篇：怎么让select为必选项下一篇：上下滚动

[关闭]

鼠标悬停图片放大

最近更新

浏览排行