鼠标移入，图片放大

原理：放大的图片实际上是一张大图；

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        * {            margin: 0;            padding: 0;        }

        #wrap {            position: relative;        }

        #left {            width: 430px;            height: 430px;        }

        #left:hover {            cursor: pointer;        }

        #buttom {            margin-top: 10px;            width: 430px;            height: 60px;        }

        #buttom div {            float: left;            margin-right: 8px;        }

        #buttom img:hover {            cursor: pointer;            border: 2px solid blue;        }

        #right {            width: 430px;            height: 430px;            position: absolute;            top: 0;            left: 440px;            overflow: hidden;            display: none;        }    </style>    <script>        window.onload = function() {            var left = document.getElementById("left");            var buttom = document.getElementById("buttom");            var right = document.getElementById("right");            buttom.onmouseover = function(e) {                var ev = e || window.event;                var obj = ev.target || ev.srcElement;                if(obj.nodeName == "IMG") {                    var objImg = obj.src.substring(obj.src.lastIndexOf("/")).replace("1", "2");                    left.innerHTML = "<img src=‘./图片放大图片" + objImg + "‘/>";                }            };

            left.onmouseover = function(e) {                var ev = e || window.event;                var obj = ev.target || ev.srcElement;                if(obj.nodeName == "IMG") {                    console.log(obj.src);                    var objImg = obj.src.substring(obj.src.lastIndexOf("/")).replace("2", "3");                    right.innerHTML = "<img src=‘./图片放大图片" + objImg + "‘/>";                    right.style.display = "block";                }                var imgObj = right.getElementsByTagName("img")[0];                imgObj.style.position = "absolute";                imgObj.style.top = "0";                imgObj.style.left = "0";                this.onmousemove = function(e) {                    var ev = e || window.event;                    var ox = ev.offsetX;                    var oy = ev.offsetY;                    imgObj.style.left = -ox / this.offsetWidth * (imgObj.offsetWidth - right.offsetWidth) + "px";                    imgObj.style.top = -oy / this.offsetHeight * (imgObj.offsetHeight - right.offsetHeight) + "px"                }            };

            left.onmouseout = function() {                right.style.display = "none";            };        }    </script></head><body>    <div id="wrap">        <div id="left">            <img src="./图片放大图片/imgA_2.jpg" />        </div>        <div id="buttom">            <div><img src="./图片放大图片/imgA_1.jpg" /></div>            <div><img src="./图片放大图片/imgB_1.jpg" /></div>            <div><img src="./图片放大图片/imgC_1.jpg" /></div>            <div><img src="./图片放大图片/imgD_1.jpg" /></div>        </div>        <div id="right"></div>    </div></body></html>

时间： 2024-10-13 23:12:24

鼠标移入，图片放大的相关文章

浅谈CSS和JQuery实现鼠标悬浮图片放大效果

对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3和HTML,Java的小伙伴不要绕道~~~ 言归正传,那么我们首先要完成什么样的图片处理呢? 一.CSS3图片的放大 css3中,有一个属性transform,官方的解释是:允许向元素应用2D或3D的转换.这些转换当然就包含旋转.缩放.移动或倾斜了.有兴趣的同学可以继续了解http://www.w3

鼠标移入--图片遮罩显示

效果:当鼠标移入图片时,图片被一块半透明黑色块遮住,并显示色块上按钮或文本. 原理:1.将图片位置创建<div>,固定宽高,绝对定位,并添加溢出隐藏. 2.添加两个<div>,第一个<div>用来装图片 3.第二个<div>添加半透明黑色背景,相对定位,并设置宽高. 4.添加js动画控制. 效果图: 代码: 引入jquery. css: ul{list-style: none;} ul>li{width: 100px;height: 120px;te

jQuery鼠标悬停图片放大显示

jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/

常用css样式（文字超出部分用省略号显示、鼠标经过图片放大、出现阴影）

文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis; /* 超出部分显示为... */ 鼠标经过图片放大 .team-img img{ width:188px; height: 200px; border-radius: 50%; transition: all 1.2s; -moz-transition: all 1.2s; -webkit-tr

鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用

今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="

图片逐渐由看不见到模糊，最后清晰显示;鼠标点击图片后，图片依照1、2、3、4顺序依次循环显示;鼠标移入图片区域，图片放大

html<html<head lang="en"<meta charset="UTF-8"<titletitle</head<body<div</div<div<img src="images/1.jpg" alt="" width="192"</div<brbr<div</div<brbrbr<scriptdo

如何实现鼠标悬停图片放大的效果。

在网页上我们经常看到鼠标悬停在一个图片上,这张图片会慢慢的放大,感觉是像放大镜放大的效果,当鼠标移开的时候,图片有恢复原来的样子,今天就实现这种效果. 实现原理以思路: 1,首先这是一张图片在悬停时放大也就是改变大小(宽,高)实现的. 2,一张图片在放大的时候会根据其定位(如在div里面的图片会以div的左上角为基准扩大宽和高)来放大的,因此如果我们不去为图片添加相对定位并且不去调节扩大后的位置,他的放大会是向一边的,因此我们必须考虑其放大后的位置. 3,放大的效果是要用动画实现的. 代码: <

鼠标移入图片轻微移动

本人在懒人之家上看到的,虽然很简单,但有值得我们学习和注意的地方: 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .lanren{ 12 width: 6

js 鼠标上移图片放大

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

CSS实现鼠标移入图片边框有小三角

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 body { 8 background:#999; 9 } 10 a { 11 display: block; 12 position: relative; 13 width:64px; 14 height:64p