zoukankan      html  css  js  c++  java
  • jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8">
    <title>原生Js结合html5做出放大镜的效果</title>
    <style>
    img{
    margin:100px 500px;
    }
    div{
    200px;
    height:200px;
    display:none;
    border:1px solid #ccc;
    border-radius:100px;
    z-index:1000;
    pointer-events:none;
    }
    </style>
    </head>
    <body>
    <img src="http://d.hiphotos.baidu.com/image/w%3D2048/sign=529c3afe39c79f3d8fe1e3308e99cc11/7a899e510fb30f24d9069302ca95d143ad4b0316.jpg" onload="core(this)"></img>
    <div id="showImg"></div>
    <script>
    //图片加载完成之后,触发这个方法
    function core(obj){
    //加载完成之后,就将图片大小设置完成
    obj.width = "400";
    var new_div = document.getElementById("showImg");
    //现在图片的大小
    var width_changed = obj.width;
    var height_changed = obj.height;
    //得到原图的真正的宽高
    var img = new Image();
    img.src = obj.src;
    var width_start = "";
    var height_start = "";
    //需要在加载完成之后再获取到原图的宽高
    img.onload = function(){
    width_start = img.width;
    height_start = img.height;
    //在最开始就设置背景图片
    new_div.style.backgroundImage = "url("+this.src+")";
    obj.onmousemove = function(e){
    obj.style.opacity = 0.7;
    //获取鼠标的位置(获取相对位置)
    //鼠标在图片上的位置
    var pageX_changed = e.pageX - 500;
    var pageY_changed = e.pageY - 100;
    //根据鼠标在改变宽高的图片的位置,计算鼠标在原图的位置
    var pageX_start = parseInt(pageX_changed/width_changed*width_start);
    var pageY_start = parseInt(pageY_changed/height_changed*height_start);
    //定位一下div
    new_div.style.display = "block";
    new_div.style.position = "absolute";
    new_div.style.left = parseInt(e.pageX - 100) + "px";
    new_div.style.top = parseInt(e.pageY - 100) + "px";
    new_div.style.overflow = "hidden";
    new_div.style.width = "200px";
    new_div.style.height = "200px";
    //设置div的背景图片的位置
    new_div.style.backgroundPosition = -(pageX_start-100) + "px " + -(pageY_start-100) + "px";
    new_div.style.backgroundRepeat = "no-repeat";
    }
    obj.onmouseout = function(){
    document.getElementById("showImg").style.display = "none";
    obj.style.opacity = 1;
    }
    };

    }
    </script>
    </body>
    </html>

    -------------------------------------------------------------

    用于商品详情页的商品图放大镜 

    ---------------------------------------------------------------

    Imgzoom.prototype = {
    constructor: Imgzoom,
    init: function(){
    this.createHtml();
    this.bindEvents();
    },
    createHtml: function(){
    if($('#'+this.previewId).length) return;
    var $container = $(this.container);
    !$container.length && console && console.log('can not find element, param "container" need checked.');
    var $zoomDiv = $('<div id="' + this.previewId + '" class="zoomDiv" ><div class="zoomDiv-con"><img class="bigimg" width="100%" height="100%" /></div></div>');

    $zoomDiv.css({"position":"absolute","top":$container.offset().top,"width":this.prevW, "height":this.prevH, "overflow":"hidden", "display":"none", "border":"1px solid #aaa", "zIndex":1000}).appendTo('body');
    $container.css({"position":"relative"});

    var $holder = $('<div class="zoomglass" id="zoomglass" />').css({"position":"absolute", "background":"#FFF27E", "top":$container.offset().top, "left":$container.offset().left, "zIndex":10, "opacity":0.5, "display":"none", "border":"1px dashed hotpink", "cursor":"crosshair", "width":this.prevW/this.scale, "height": this.prevH / this.scale}).appendTo('body');

    if( this.dir == 'right'){
    $zoomDiv.css({'left': $container.offset().left + $container.outerWidth() + this.margin});
    }else if(this.dir == 'bottom'){
    $zoomDiv.css({"top": $container.offset().top + $container.outerHeight() + this.margin, "left": $container.offset().left });
    }

    this.zoomDiv = $zoomDiv;
    this.holder = $holder;
    this.container = $(this.container);
    },
    bindEvents: function(){
    var $simg, scale = this.scale, $zoomDiv = this.zoomDiv, $wrapper = $zoomDiv.find('.zoomDiv-con');
    var $container = this.container, $holder = this.holder;
    var offset = $container.offset();
    var halfW = $holder.outerWidth()/2, halfH = $holder.outerHeight()/2;
    var leftMin = offset.left+halfW, leftMax = leftMin+$container.width()-2*halfW;
    var topMin = offset.top+halfH, topMax = topMin + $container.height()-2*halfH;
    var leftBind = leftMin - halfW, rightBind = leftMax + halfW;
    var topBind = topMin - halfH, btmBind = topMax + halfH;
    var diffX= leftMax - leftMin, diffY = topMax -topMin;
    var min = Math.min, max= Math.max;
    // debugger;
    $container.mouseenter(function(e){//初始化 大图
    $holder.show(); $zoomDiv.show();
    if($(e.target).hasClass('zoomimg')){
    $simg = $(e.target);
    $wrapper.css({"width": scale * $simg.outerWidth(), "height":scale * $simg.outerHeight()});//大图的大小
    $zoomDiv.find('.bigimg').attr('src', $simg.attr('src')); //大图路径
    }
    });
    $('body').mousemove(function(e){
    // $holder.css({'left':e.pageX-halfW, 'top':e.pageY-halfH});
    var x,y,position;
    if(e.pageX < leftBind || e.pageX > rightBind || e.pageY < topBind || e.pageY > btmBind){
    if(!$holder.ishide){ $holder.ishide=true; $holder.hide(); $zoomDiv.hide();}
    return;
    }else {
    $holder.ishide = false;
    x = min( max(e.pageX-halfW, leftBind), leftMax-halfW);
    y = min( max(e.pageY-halfH, topBind), topMax-halfH);
    $holder.css({"left":x,"top":y});
    position = $holder.position();
    $wrapper.css({"marginLeft":scale * (offset.left - position.left), "marginTop": scale * (offset.top - position.top)});
    }
    });
    }
    }
    // $('.viewport').css({"outline":"1px solid red"});
    var iz = new Imgzoom({scale:3, prevW:500, prevH:500});

  • 相关阅读:
    C#
    C#
    ssh学习笔记
    (已解决)Could not open '/var/lib/nova/mnt/*/volume-*': Permission denied
    RPCVersionCapError: Requested message version, 4.17 is incompatible. It needs to be equal in major version and less than or equal in minor version as the specified version cap 4.11.
    如何在linux下安装idea
    The system has no LUN copy license
    调整mysql数据库最大连接数
    mysql数据库编码问题
    cinder支持nfs快照
  • 原文地址:https://www.cnblogs.com/stephenykk/p/3593842.html
Copyright © 2011-2022 走看看