鼠标悬停放大图片效果

设置鼠标移入移出事件onmouseover="over(this,this.src)" onmouseout="out(this)"

<div id="divbigimage" style="display:none;width:300px;height:300px;position:absolute;">
		<img src="" id="big" style="width:300px; height:300px"/>
</div>

  

ps:div的位置要放对,一般多个页面组合的,要放在主页面上

function over(obj_small,obj_big){
	var divx = window.event.clientX;
	var divy = window.event.clientY;
	var divmove = document.getElementById("divbigimage");
	divmove.style.left = divx+‘px‘;
	divmove.style.top = divy+‘px‘;
	obj_small.style.border="solid 1px blue";
	document.getElementById("big").src=obj_big;
	document.getElementById("divbigimage").style.display="block";
}

function out(obj_small){
	obj_small.style.border=0;
	document.getElementById("divbigimage").style.display="none";
}

  

时间: 2024-09-30 11:13:22

鼠标悬停放大图片效果的相关文章

10款基于jQuery实现的鼠标悬停九宫格图片延伸效果

<p><b>1.jQuery多张图片上下叠加切换插件</b></p><p>之前我们已经向大家分享过一款jQuery/CSS3洗牌效果的图片叠加切换应用,本文介绍的这款jQuery多张图片上下叠加切换插件也类似,我们可以将预先加载好的图片按不同的角度叠加起来,点击上下切换按钮时即可将图片上下切换至其他图片后面,效果非常不错.</p><p><img src="http://www.html5tricks.com

鼠标悬停css3动画效果

下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标悬停css3动画效果</title> <link href="css/lanrenzhijia.css" rel="stylesheet" type="text/

HTML CSS 实现鼠标悬停时图片拉近效果

前言 为了让网页的使用体验更好,我们会让网页的某些元素对鼠标的动作做出响应.例如鼠标滑过.单击按钮的时候按钮变色.变形.之前在很多网页上看到了鼠标滑过一个图片链接时图片放大.拉近的效果,今天尝试实现一下. 1. 使用background实现 思路:设置以图片作为div元素的背景,鼠标滑过div的时候通过background属性放大图片. <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

jquery轻量级鼠标悬停半透明遮罩效果,一看就懂哦

<html xmlns="http://www.w3.org/1999/xhtml"><head><title>jQuery打造鼠标悬停图片时的半透明遮罩效果</title><style>*{margin:0;padding:0;}li{list-style:none;}.box{width:800px;height:400px;margin:50px auto;overflow:hidden;}.box ul li{widt

jq鼠标经过之后图片效果(兼容ie8)

一.鼠标经过图标变换 <script src="images/jquery.1.9.1.js"></script><style type="text/css">.xxgk_list li {display: inline-block;float: left;position: relative;margin-top: 7px;}.xxgk_list li a {display: inline-block;width: 173px;

鼠标悬停,图片放大

代码转载:http://blog.csdn.net/u014175572/article/details/51535768 示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px;

css实现鼠标悬停在图片上图片缓慢缩放效果

方法一: .container{ background-size: 100% 100%; transition: all 2s; } .container:hover{ background-size: 120% 120%; } 方法二: img{ transition: all 2s; } img:hover{ transform:scale(1.2);   //图片放大的倍数 } 原文地址:https://www.cnblogs.com/Zg-blog/p/9385280.html

利用CSS3实现鼠标悬停在图片上图片缓慢缩放的两种方法

1.改变background-size属性 将图片作为某个html元素的背景图片,用transition属性改变图片的大小. 1 .container{ 2 background-size: 100% 100%; 3 transition: all 2s; 4 } 5 .container:hover{ 6 background-size: 120% 120%; 7 } 这种方法有个问题是图片缩放的时候会出现抖动的现象 2.利用scale 使用img标签,并在img标签上添加transform属

简单实现鼠标悬停显示图片

预览 HTML部分 展示位置 <c:forEach items="${pageInfo.list}" var="p"> <td class="imgShow${p.id}" onmouseover="on('${p.productImg}')" onmouseout="off()">${p.productImg}</td> 创建一个放图片的容器 <img id=&q