zoukankan      html  css  js  c++  java
  • 【荐】JavaScript+CSS技术实现能覆盖SELECT的图片放大(放大镜)示例代码

    代码简介:

    JavaScript图片放大技术(放大镜)示例代码,一个比较热的话题,如何用最简单、最兼容的方法写出图片放大技术,代码中的大量注释有助于我们对Js的图片放大技术做一个更深层次的了解。许多商城都用了放大镜,这里给大家一个实例。

    代码内容:

    View Code
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>【荐】JavaScript+CSS技术实现能覆盖SELECT的图片放大(放大镜)示例代码 - www.webdm.cn</title>
    <style type="text/css">
    #magnifier
    {
    width
    :342px;
    height
    :420px;
    position
    :absolute;
    top
    :100px;
    left
    :250px;
    font-size
    :0;
    border
    :1px solid #000;
    }
    #img
    {
    width
    :342px;
    height
    :420px;
    }
    #Browser
    {
    border
    :1px solid #000;
    z-index
    :100;
    position
    :absolute;
    background
    :#555;
    }
    #mag
    {
    border
    :1px solid #000;
    overflow
    :hidden;
    z-index
    :100;
    }
    </style>
    <script type="text/javascript">
    function getEventObject(W3CEvent) {//事件标准化函数
    return W3CEvent || window.event;
    }
    function getPointerPosition(e) {//兼容浏览器的鼠标x,y获得函数
    e = e || getEventObject(e);
    var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft ||

    document.body.scrollLeft));
    var y = e.pageY || (e.clientY + (document.documentElement.scrollTop ||

    document.body.scrollTop));

    return { 'x':x,'y':y };
    }
    function setOpacity(elem,level) {//兼容浏览器设置透明值
    if(elem.filters) {
    elem.style.filter
    = 'alpha(opacity=' + level * 100 + ')';
    }
    else {
    elem.style.opacity
    = level;
    }
    }
    function css(elem,prop) { //css设置函数,可以方便设置css值,并且兼容设置透明值
    for(var i in prop) {
    if(i == 'opacity') {
    setOpacity(elem,prop[i]);
    }
    else {
    elem.style[i]
    = prop[i];
    }
    }
    return elem;
    }
    var magnifier = {
    m :
    null,

    init:
    function(magni){
    var m = this.m = magni || {
    cont :
    null, //装载原始图像的div
    img : null, //放大的图像
    mag : null, //放大框
    scale : 15//比例值,设置的值越大放大越大,但是这里有个问题就是如果不可

    以整除时,会产生些很小的白边,目前不知道如何解决
    }

    css(m.img,{
    'position' : 'absolute',
    'width' : (m.cont.clientWidth * m.scale) + 'px',

    //原始图像的宽*比例值
    'height' : (m.cont.clientHeight * m.scale) + 'px'

    //原始图像的高*比例值
    })

    css(m.mag,{
    'display' : 'none',
    'width' : m.cont.clientWidth + 'px', //m.cont为原始图像,与原始图像等宽
    'height' : m.cont.clientHeight + 'px',
    'position' : 'absolute',
    'left' : m.cont.offsetLeft + m.cont.offsetWidth + 10 + 'px',//放大框的位置

    为原始图像的右方远10px
    'top' : m.cont.offsetTop + 'px'
    })

    var borderWid = m.cont.getElementsByTagName('div')[0].offsetWidth -

    m.cont.getElementsByTagName(
    'div')[0].clientWidth; //获取border的宽

    css(m.cont.getElementsByTagName(
    'div')[0],{

    //m.cont.getElementsByTagName('div')[0]为浏览框
    'display' : 'none',

    //开始设置为不可见
    'width' : m.cont.clientWidth / m.scale - borderWid + 'px',

    //原始图片的宽/比例值 - border的宽度
    'height' : m.cont.clientHeight / m.scale - borderWid + 'px',//原始图片的高

    /比例值 - border的宽度
    'opacity' : 0.5//设置透明度
    })

    m.img.src
    = m.cont.getElementsByTagName('img')[0].src;//让原始图像的src值给予放大

    图像
    m.cont.style.cursor
    = 'crosshair';

    m.cont.onmouseover
    = magnifier.start;

    },

    start:
    function(e){

    if(document.all){//只在IE下执行,主要避免IE6的select无法覆盖
    magnifier.createIframe(magnifier.m.img);
    }

    this.onmousemove = magnifier.move;//this指向m.cont
    this.onmouseout = magnifier.end;
    },

    move:
    function(e){
    var pos = getPointerPosition(e); //事件标准化

    this.getElementsByTagName('div')[0].style.display = '';

    css(
    this.getElementsByTagName('div')[0],{
    'top' : Math.min(Math.max(pos.y - this.offsetTop - parseInt

    (
    this.getElementsByTagName('div')[0].style.height) / 2,0),this.clientHeight -

    this.getElementsByTagName('div')[0].offsetHeight) + 'px',
    'left' : Math.min(Math.max(pos.x - this.offsetLeft - parseInt

    (
    this.getElementsByTagName('div')[0].style.width) / 2,0),this.clientWidth -

    this.getElementsByTagName('div')[0].offsetWidth) + 'px'//left=鼠标x -

    this.offsetLeft - 浏览框宽/2,Math.max和Math.min让浏览框不会超出图像
    })

    magnifier.m.mag.style.display
    = '';

    css(magnifier.m.img,{
    'top' : - (parseInt(this.getElementsByTagName('div')[0].style.top) *

    magnifier.m.scale)
    + 'px',
    'left' : - (parseInt(this.getElementsByTagName('div')[0].style.left) *

    magnifier.m.scale)
    + 'px'
    })

    },

    end:
    function(e){
    this.getElementsByTagName('div')[0].style.display = 'none';
    magnifier.removeIframe(magnifier.m.img);
    //销毁iframe

    magnifier.m.mag.style.display
    = 'none';
    },

    createIframe:
    function(elem){
    var layer = document.createElement('iframe');
    layer.tabIndex
    = '-1';
    layer.src
    = 'javascript:false;';
    elem.parentNode.appendChild(layer);

    layer.style.width
    = elem.offsetWidth + 'px';
    layer.style.height
    = elem.offsetHeight + 'px';
    },

    removeIframe:
    function(elem){
    var layers = elem.parentNode.getElementsByTagName('iframe');
    while(layers.length >0){
    layers[
    0].parentNode.removeChild(layers[0]);
    }
    }
    }
    window.onload
    = function(){
    magnifier.init({
    cont : document.getElementById(
    'magnifier'),
    img : document.getElementById(
    'magnifierImg'),
    mag : document.getElementById(
    'mag'),
    scale :
    3
    });
    }
    </script>
    </head>
    <body>
    <div id="magnifier">
    <img src="http://www.webdm.cn/images/20091107/fangda.jpg" id="img" />
    <div id="Browser"></div>
    </div>
    <div id="mag"><img id="magnifierImg" /></div>
    <select style="position:absolute;top:200px;left:650px;100px;">
    <option>select测试</option>
    <option>是否能覆盖</option>
    </select>
    </body>
    </html>
    <br />
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有

    质量的网页代码!</p>

    代码来自http://www.webdm.cn/webcode/68925672-dc0b-4e04-aa38-5b212a150d4e.html

  • 相关阅读:
    A1066 Root of AVL Tree (25 分)
    A1099 Build A Binary Search Tree (30 分)
    A1043 Is It a Binary Search Tree (25 分) ——PA, 24/25, 先记录思路
    A1079; A1090; A1004:一般树遍历
    A1053 Path of Equal Weight (30 分)
    A1086 Tree Traversals Again (25 分)
    A1020 Tree Traversals (25 分)
    A1091 Acute Stroke (30 分)
    A1103 Integer Factorization (30 分)
    A1032 Sharing (25 分)
  • 原文地址:https://www.cnblogs.com/webdm/p/2384654.html
Copyright © 2011-2022 走看看