js图片放大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mutiplier</title>
    <style type="text/css">
        .conteainer{
            width: 800px;
            height: 900px;
            /*margin-left: 50px auto;*/
            position: relative;;
        }
        #ximg{
            width: 384px;
            height: 400px;
            /*margin-left: 2px;*/
            overflow: hidden;/* 超出隐藏 */
            display: none;
            position: absolute;
         }
         #move{
             width: 80px;
             height: 70px;
             display: none;
             position: absolute;
             background-color: rgba(0,0,0,.4);
         }

    </style>
</head>
<body>
<div id="container">
    <img id="img" src="img/campnou.jpg" width="384" height="214"> <!-- 1920 / 5 384 -->
<div id=move></div>
<div id="ximg">
    <img src="img/campnou.jpg">
</div>
</div>
    <script type="text/javascript">
            //获取图片节点
            var img = document.getElementById("img");
            //获取div节点
            var ximg = document.getElementById("ximg");
            //鼠标移入事件
            var move=document.getElementById("move");
            img.onmouseover=function(){
                var top = this.offsetTop;//当前图片距上方的距离
                var left = this.offsetLeft+this.offsetWidth;//当前图片距左方的距离
                ximg.style.top = top+"px";
                ximg.style.left = left+"px";
                ximg.style.display = "block";//让div显示出来
                move.style.display="block"
            }
            //鼠标移动事件
            img.onmousemove = function(ent){
                //兼容
                var event = ent || window.event;
                //获取鼠标在图片上X轴的移动位置  水平
                // var  img_x = event.clientX-this.offsetLeft;
                // //获取鼠标在图片上Y轴的移动位置 上下
                // var  img_y = event.clientY-this.offsetTop;
                var  img_x = event.clientX;
                //获取鼠标在图片上Y轴的移动位置 上下
                var  img_y = event.clientY;

                if(img_x>(384-40))
                    img_x=384-40;
                if(img_x<40)
                    img_x=40;
                if(img_y>(214-35))
                    img_y=214-35;
                move.style.left=img_x-40+"px";
                ximg.scrollLeft = (img_x-48)*5;
                move.style.top=img_y-35+"px";
                ximg.scrollTop = (img_y-50)*5;

            }
            //移出事件
            img.onmouseout=function(){
                ximg.style.display="none";
                move.style.display="none";
            }
    </script>
</body>
</html>

时间: 2024-11-05 15:51:04

js图片放大的相关文章

JS图片放大1

$(function () { //$(".pimg").click(function () { $(".layer-photos-demo img").click(function () { var _this = $(this);//将当前的pimg元素作为_this传入函数 imgShow("#outerdiv", "#innerdiv", "#bigimg", _this); }); }); fun

js+jquery+html实现在三种不通的情况下,点击图片放大的效果

js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7

js图片点击放大特效代码

原文:js图片点击放大特效代码 源代码下载:http://www.zuidaima.com/share/1550463485676544.htm 图片放大js代码实现,运行效果如下:

推荐两款简单好用的图片放大jquery插件

一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可js里加入 调用插件的函数 $('这里写要放大的图片').zoomify();如果有ajax 新生成的图片,要在ajax里再次调用一遍该函数. 二.zoomooz.js 推荐这里下载 使用说明: 这个插件有很多种 放大功能,可进行优雅的缩放操作,特别适用相册网站.这个图片方法不是 单独图片跳脱出来的放

jQuery图片放大

jQuery图片放大 <!DOCTYPE HTML> <html> <head> <title></title> <script src="jquery-1.7.1.min.js"></script> <style> #d{ width:300px; height:300px; background-color:pink; color:white; display:none; positio

jQuery Lightbox图片放大预览

简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://hovertree.com/texiao/jqimg/6/ 效果图如下: 源码下载:http://hovertree.com/h/bjaf/hdhgnftp.htm HTML文件代码: <!DOCTYPE html> <html lang="zh"> <head

图片放大居中

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>图片放大</title> <meta name="description" content=&

图片放大源码

<a path="images/be830324916476d709ef7f1e547042d0.jpg" class="preview" href="http://www.17sucai.com/">jquery选项卡插件制作标签标题内容slider滑动切换特效</a><Br /><Br /> <a path="images/39c118198047e3b7da820d162e71

jQuery实现网站图片放大效果

实现效果:当鼠标指向商品图片时,图片会自动放大. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文字放大</title> 6 7 <script type="text/javascript" src="../../scripts/jquery-1.7.2.js"><