鼠标移上去自动放大

最新推荐文章于 2023-04-20 12:07:01 发布
最新推荐文章于 2023-04-20 12:07:01 发布
阅读量1.1k 收藏
点赞数
分类专栏： Html 文章标签： function javascript class html border google
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/comeonJ/article/details/6870899
版权
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Google的放大</TITLE>
<SCRIPT LANGUAGE="JavaScript" src=" http://www.veryhuo.com/uploads/common/js/jquery-1.3.2.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(function(){
var t;
$(".show1").mouseout(
function(){
clearTimeout(t);
var img=$(this).find("img");
var src=img.attr("src");
img.attr("src",img.attr("src2")).attr("src2",src)
.css({top:0,left:0,width:125,height:125})
.end().unbind("mousemove").bind("mousemove",m1);
}).mousemove(m1);
function m1(e){
var that=this;
clearTimeout(t);
//$("#info").html($("#info").html()+t+"<br/>");
t=setTimeout(function(){
$(that).unbind("mousemove");
var thisOffset=$(that).offset();
var left=-((e.pageX-thisOffset.left)*(313/125-1));
var top=-((e.pageY-thisOffset.top)*(313/125-1));
//$("#info").html($("#info").html()+e.pageY+"|"+$(that).offset().top+"|"+left+"|"+top+"<br/>");
$(that).find("img").animate({height:"313px",width:"313px",top:top,left:left},{duration:500,complete:function(){
var img=$(this);
var src=img.attr("src");
img.attr("src",img.attr("src2")).attr("src2",src).parent().mousemove(m2);
}});
},200);
}
function m2(e){
var b=312/125;
var thisOffset1=$(this).offset();
var left1=-((e.pageX-thisOffset1.left)*(313/125-1));
var top1=-((e.pageY-thisOffset1.top)*(313/125-1));
//$("#info")[0].innerHTML+="b:"+b+" |left:"+((left1))+"|"+"top:"+((top1))+"---l:"+l+"|t:"+t+"<br>";
$(this).find("img").css({top:top1,left:left1});
}
});
//-->
</SCRIPT>
<style type="text/css">
.show1{
width:125;
height:125;
border:1px solid blue;
cursor:pointer;
overflow:hidden;
position:relative;
background-color:gray;
}
.img1{
width:125;
height:125;
position:absolute;
}
</style>
</HEAD>
<BODY>
<div class="show1" οnclick=""><img class="img1" src=" http://www.veryhuo.com/uploads/allimg/090108/1108250.jpg"></img></div>
<div id="info"></div>
</BODY>
</HTML>
絮飘
关注
专栏目录
点击放大导航栏菜单
还没想好
05-05 938
在上一个圆角导航栏的基础上，我们可以设置其他样式 比如这个，hover之后放大，主要的改变就是背景高度提了20个px,再设置一下margin-top :-20px，这里用了负数，是向上移动20px,最后设置一下行高让文字居中。 导航栏 *{margin:0;padding:0;font-size:20px} ul{list-style:none;height:50px;border-
鼠标移动到图片上右边显示放大镜效果。
xianyao_shi的专栏
01-05 5644
Magnifier #magnifier{ width:342px; height:420px; position:absolute; top:100px; left:250px; font-size:0; border:1px solid #000; } #img{ width:342px; height:420px; } #Browser{
鼠标放在图片上，图片自动放大
10-15
鼠标放在图片上，图片自动放大，使用html语言编写的代码
经典菜单，鼠标放上就变大，有缓动效果的
02-24
经典菜单，鼠标放上就变大，有缓动效果的经典菜单，鼠标放上就变大，有缓动效果的
如何制作鼠标放上后显示的放大镜(类似淘宝放大镜)
Heby的博客
04-20 428
1.首先在html内布局div和放入鼠标移入和移出事件,再在方法内写入获取缩放的位置方法。2.在style样式内配置样式。
Css鼠标移入放大效果
qq_34139720的博客
09-08 2019
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
鼠标滑上去后图片放大浮出效果的js代码
10-28
需要注意的是，文档作者提到的事件处理问题，即鼠标移开后图片不能回到原位。这可能是由于 `onmouseout` 事件没有正确绑定或者 `HideElement` 函数的调用存在逻辑错误。为了确保图片能够恢复到原来的大小和位置，...
在JS中实现鼠标挪移上去时图片放大显示 移开时关闭
NYHongHong的博客
10-07 636
准备一个html文档 并且设置两张图片 <img id="pic" src="img/img/1.jpg" onmouseover="showImg()" onmouseout="hideImg()" /> <div id="big_pic"> <img src="img/img/1.jpg"/> </div> 然后是JS中的代码 function showImg(){ ...
html鼠标移动时图片放大缩小,JS与CSS3实现图片响应鼠标移动放大效果示例
weixin_31935793的博客
06-04 5390
本文实例讲述了JS与CSS3实现图片响应鼠标移动放大效果。分享给大家供大家参考，具体如下：今天看网易的网站上，当我把鼠标放上去的时候发现图片放大，移开图片缩小，于是自行尝试，结果如下。方法一：使用js和css3效果如图：这样的实现非常简单，就是利用js的mouseover和 mouseout事件，但是不知道如何使图片从中间放大，日后再行尝试吧，代码如下：网易图片动画div.img {width: ...
flash图片切换，鼠标放上去图片放大，所有图片排列成圆形，
05-30
图片切换，鼠标放上去图片放大，所有图片排列成圆形，
鼠标放上去显示大图片的两种方式
10-28
这种效果可以通过多种技术实现，而"鼠标放上去显示大图"的两种常见方法主要依赖于CSS（层叠样式表）和JavaScript。下面我们将详细探讨这两种方法及其实现过程。 **方法一：纯CSS实现** CSS3提供了`:hover`伪类选择...
简单的鼠标移动到图片自动放大及缩小
无法预知未来
09-10 2764
放大及缩小       img{   position:relative;   -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);   -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);   box-shadow: 2px 2px 4px rgba(0,0,0,0.3);   -webkit
css实现鼠标悬停图片放大显示
热门推荐
不知不觉 | 笔记
07-15 3万+
* { margin: 0; padding: 0; font-family: "微软雅黑"; } .avatar { display: block; width: 300px; margin: 0 auto; overflow: hidden; } .avatar img { display: blo
鼠标经过，图片会放大（从中心位置放大）
沫沫酱
01-22 8826
js部分：  //鼠标经过a标签，对应的图片会放大效果         var zoom = 1.03;         var width = $(this).find(".move_img").find("img").width();         var height = $(this).find(".move_img").find("img").height();  
图片在鼠标滑过的时候就放大，鼠标移开就恢复
肖肖肖丽珠的博客
07-19 1万+
外层容器设置宽高，超过的部分就隐藏。 a{        width: 250px;     height: 160px;     overflow: hidden;     border: 2px solid #fff;     display: inline-block; } 鼠标滑过时图片改变，这个使用必须是img是a的孩子，才能滑过a，img变化
css3 鼠标移到图标实现放大功能
m0_38072989的博客
08-02 4583
CSS3： transform:scale() 可以实现按比例放大或者缩小功能。 transition 允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...
鼠标悬停 图片自动放大功能 jquery
蜗牛天堂
11-11 5176
ul,li{ list-style:none; float:left; } $(function(){ $("#gallery li").mouseover(function(){ var y = $(this).offset().top+50; var x = $(this).offset().left+50; var imgsrc = $(this).chil
CSS/HTML代码分别实现网页播放mp3、flv、wmv、Flash
12-27 6905
现手头上的一个项目需要播放mp3音频及FLV与WMV格式的视频文件，在网上找了不少资料，发现都是调用系统自带的播放器，而且许多都不能正常的调用。经过自己不断的调试、摸索，终于解决了所有问题，完成的效果还是比较满意的！~ 1、mp3音频文件的播放 正常情况下应该是调用系统自还的播放器，但考虑到代码的简洁性和对系统的最大兼容性，我使用了Google Reader提供的网页多媒体播放器，其实就一Fl
便签数目是12个，鼠标移上去便签放大过渡
最新发布
05-31
好的，那么以下是实现你所需功能的代码。 HTML代码： ```html <div class="notes-container"> <div class="note"> <h3 class="note-title"></h3> <div class="note-content"></div> </div> <!-- 其他11个便签 --> </div> ``` CSS代码： ```css /* 便签容器样式 */ .notes-container { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 800px; margin: 0 auto; } /* 便签样式 */ .note { position: relative; width: calc(33.3% - 10px); height: 200px; margin-bottom: 20px; background-color: #fff; border: 1px solid #ccc; box-shadow: 0px 0px 5px #ccc; transition: transform 0.3s ease-out; } /* 鼠标移上去放大过渡效果 */ .note:hover { transform: scale(1.1); } /* 便签标题样式 */ .note-title { position: absolute; top: 10px; left: 10px; font-size: 20px; } /* 便签内容样式 */ .note-content { position: absolute; top: 50px; left: 10px; font-size: 16px; } /* 通过nth-child选择器实现对便签的背景色和字体颜色控制 */ .note:nth-child(2n) { background-color: #f5f5f5; } .note:nth-child(3n) { background-color: #f0f0f0; } .note:nth-child(4n) { background-color: #e5e5e5; } /* 便签旋转效果 */ .note:nth-child(odd) { transform: rotate(-3deg); } .note:nth-child(even) { transform: rotate(3deg); } ``` JavaScript代码： ```javascript // 获取便签容器 const notesContainer = document.querySelector('.notes-container'); // 从本地存储中读取数据，假设数据格式为JSON数组 const notesData = JSON.parse(localStorage.getItem('notes')); // 遍历数据，创建便签并添加到容器中 notesData.forEach(note => { const noteEl = document.createElement('div'); noteEl.classList.add('note'); const titleEl = document.createElement('h3'); titleEl.classList.add('note-title'); titleEl.textContent = note.title; const contentEl = document.createElement('div'); contentEl.classList.add('note-content'); contentEl.textContent = note.content; noteEl.appendChild(titleEl); noteEl.appendChild(contentEl); notesContainer.appendChild(noteEl); }); ``` 这份代码实现了你所需要的功能，包括： 1. 从本地存储中读取数据，并根据数据动态生成便签。 2. 通过nth-child选择器实现对便签的背景色和字体颜色控制。 3. 便签具有旋转效果和阴影效果，鼠标移上去时具有放大过渡效果。 如果你有任何问题或者需要进一步的帮助，请告诉我。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值