鼠标放在图片上显示大图的JS代码

显示大图和隐藏大图的js代码：

代码如下:

<script type="text/javascript">
   //显示图片
   function over(imgid,obj,imgbig)
   {
//大图显示的最大尺寸  4比3的大小  400 300
maxwidth=400;
maxheight=300;

//显示
        obj.style.display="";
        imgbig.src=imgid.src;

//1、宽和高都超过了，看谁超过的多，谁超的多就将谁设置为最大值，其余策略按照2、3
        //2、如果宽超过了并且高没有超，设置宽为最大值
        //3、如果宽没超过并且高超过了，设置高为最大值

if(img.width>maxwidth&&img.height>maxheight)
        {
            pare=(img.width-maxwidth)-(img.height-maxheight);
            if(pare>=0)
                img.width=maxwidth;
            else
                img.height=maxheight;
        }
        else if(img.width>maxwidth&&img.height<=maxheight)
        {
            img.width=maxwidth;
        }
        else if(img.width<=maxwidth&&img.height>maxheight)
        {
            img.height=maxheight;
        }           
   }

//隐藏图片
   function out()
   {
document.getElementById('divImage').style.display="none";
   }
</script>

显示小图的image和显示大图的image：

代码如下:

<img id="img" src="http://www.jb51.net/images/logo.gif" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" width="100" alt="" height="100" />

<%--显示大图标的区域--%>
    <div id="divImage" style="display: none; left: 120px;top:5px; position: absolute">
        <img id="imgbig" src="http://www.jb51.net/images/logo.gif" alt="预览" />
    </div>

赞 (0)

相关推荐

  • js 鼠标移动显示图片的简单实例

    js 鼠标移动显示图片的简单实例

    一.js代码 复制代码 代码如下: //***********默认设置定义.*********************   tPopWait=50;//停留tWait豪秒后显示提示.   tPopShow=5000;//显示tShow豪秒后关闭提示   showPopStep=20;  popOpacity=99; //***************内部变量定义*****************   sPop=null;  curShow=null;  tFadeOut=null;  tFade

  • js实现鼠标经过时图片滚动停止的方法

    本文实例讲述了js实现鼠标经过时图片滚动停止的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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

  • js鼠标滑过图片震动特效的方法

    本文实例讲述了js鼠标滑过图片震动特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>鼠标滑过 图片震动效果</title> <STYLE>.shakeimage {  POSITION: re

  • js实现鼠标悬浮给图片加边框的方法

    本文实例讲述了js实现鼠标悬浮给图片加边框的方法.分享给大家供大家参考.具体实现方法如下: html代码: <div class="T-s-l fl"> <a href="" class="a1"> <img src="images/11.jpg" width="234" height="368" /> </a><a href=&qu

  • 鼠标滑在标题上显示图片的JS代码

    复制代码 代码如下: <SCRIPT type=text/javascript src="js/jquery.tooltip.v.1.1.js"></SCRIPT>                <SCRIPT type=text/javascript src="js/jquery.tooltip.execute.js"></SCRIPT>                  机型:<a href="#n

  • JS鼠标滑过图片时切换图片实现思路

    在很多网站上我们会发现当鼠标滑过一张图片后,这张图片切换为了另外的一张图片.这里小编说说这是怎么实现的. 在写Javascript代码前我们必须要有实验的HTML代码 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Jquery deal images</t

  • js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器

    注意使用preventDefault防止浏览器的默认事件操作发生 复制代码 代码如下: <script language="javascript" type="text/javascript"> var isDrag = false; function isIE(){ if(navigator.userAgent.indexOf("MSIE")>0){return true;} else{return false;} } fun

  • js鼠标点击图片实现随机变换图片的方法

    本文实例讲述了js鼠标点击图片实现随机变换图片的方法.分享给大家供大家参考.具体实现方法如下: <html> <title>鼠标点击图片即可随机变换图片</title> <body bgcolor="#fef4d9" OnLoad="swapPic()"> <center> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin var ra

  • 鼠标放在图片上显示大图的JS代码

    显示大图和隐藏大图的js代码: 复制代码 代码如下: <script type="text/javascript">   //显示图片   function over(imgid,obj,imgbig)   {//大图显示的最大尺寸  4比3的大小  400 300maxwidth=400;maxheight=300; //显示        obj.style.display="";        imgbig.src=imgid.src; //1.宽

  • jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)

    jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)

    这个插件的名字elevatezoom,网址为http://www.elevateweb.co.uk/image-zoom,在github上的项目首页为https://github.com/elevateweb/elevatezoom,建议去github下载,这个网速比较快. 实现这个效果你需要准备两张图片,一张小的,一张大用于鼠标经过时候显示.然后我们只要为img标签添加data-zoom-image属性,其值为大图的地址,最后在javascript中选择该图片调用elevateZoom()就可

  • 分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式

    废话不多说了,直接给大家贴关键代码了,具体代码如下所示: <!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> <t

  • jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】

    jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】

    本文实例讲述了jQuery实现鼠标滑过商品小图片上显示对应大图片功能.分享给大家供大家参考,具体如下: 1 . 效果截图 2 . 代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery图片变换</title> </head> <style type="text/css"

  • js实现鼠标悬停图片上时滚动文字说明的方法

    本文实例讲述了js实现鼠标悬停图片上时滚动文字说明的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现鼠标悬停图片上时的滚动文字说明</title> <body> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function showtip2(current,e,text){   if (document.all&&a

  • 基于JS代码实现当鼠标悬停表格上显示这一格的全部内容

    想实现这样一个功能,就是在一个表格中,由于很多字过多,所以用文字溢出的方法处理了,但是这样就无法看到表格中具体的内容呢.想实现当鼠标移上去的时候可以显示这一行被隐藏的内容.当然这个网上有很多插件,但是我没有用,还是自己写了一个. css部分 <style> #showbox { width: 150px; min-height: 50px; font: 100 14px/1 "微软雅黑"; border: 1px solid #3c8dbc; display: none;

  • 在图片上显示左右箭头类似翻页的代码

    使用JS实现在图片上显示左右箭头的翻页代码,预览效果网址:http://www.keleyi.com/keleyi/phtml/picnext/ 本实例使用了javascript的onmousemove 事件.onmousemove 事件会在鼠标指针移动时发生. 语法 onmousemove="SomeJavaScriptCode" SomeJavaScriptCode是必需参数.规定该事件发生时执行的 JavaScript. 下面是核心代码(完整代码请在效果页面查看源代码): 复制代

  • JQuery鼠标移到小图显示大图效果的方法

    本文实例讲述了JQuery鼠标移到小图显示大图效果的方法.分享给大家供大家参考.具体分析如下: 这里的显示大图功能类似上一篇<JQuery实现超链接鼠标提示效果的方法>,稍微修改一下代码,就可以做出一个图片的提示效果. 参考前面的超链接提示效果的代码,只需要将创建的div元素的代码改为: //创建 div 元素 图片提示 var tooltip = "<div id="tooltip"><img src=""+ this.hr

  • jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析

    本文实例讲述了jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法.分享给大家供大家参考,具体如下: 实现效果如上图,当鼠标放置到名字上时,则显示出内容详情. 实现具体过程如下: 1.需要加这句js <!--实现鼠标放置名字上显示气泡说明的js--> <script> $(function () { $('[data-toggle="popover"]').popover() }); </script> 2.html代码如下: <td

  • jQuery鼠标移动图片上实现放大效果

    首先界面上要有图片,下面是图片 <img id="big-circle" src="images/pic2.jpg" alt=""/>其次在script代码段中加入如下代码,进行适量修改即可 $(document).ready(function () { var x = 10; var y = 20; $("#big-circle").mouseover(function (e) { var tooTip = &q

随机推荐