鼠标放上去小图显示大图

最新推荐文章于 2021-06-04 13:40:34 发布
最新推荐文章于 2021-06-04 13:40:34 发布
阅读量358 收藏
点赞数
原文链接：http://www.cnblogs.com/phpfensi/p/4476798.html
版权 
<html>
<head>
<title>test</title>
</head>
<body>
<style> 
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;} 
#demo img{border:none;width:300px;height:100px;border:5px solid #f4f4f4} 
#enlarge_images{position:absolute;display:none;z-index:2;border:5px solid #f4f4f4} 
</style> 
<div id="demo" style="overflow:hidden;width:351px;text-align:center;padding:10px"> 
  <img src="1.jpg">
</div> 
<div id="enlarge_images"></div> 
<script> 
var demo = document.getElementById("demo"); 
var gg = demo.getElementsByTagName("img"); 
var ei = document.getElementById("enlarge_images"); 
for(i=0; i<gg.length; i++){ 
    var ts = gg[i]; 
    ts.onmousemove = function(event){ 
        event = event || window.event; 
        ei.style.display = "block"; 
        ei.innerHTML = '<img src="' + this.src + '" />'; 
        ei.style.top  = document.body.scrollTop + event.clientY + 10 + "px"; 
        ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px"; 
    } 
    ts.onmouseout = function(){ 
        ei.innerHTML = ""; 
        ei.style.display = "none"; 
    } 
    ts.onclick = function(){ 
        window.open( this.src ); 
    } 
} 
</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/phpfensi/p/4476798.html

weixin_30951743
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
鼠标悬停显示大图
08-22
鼠标悬停在缩略图时在鼠标右边显示原图
js实现——鼠标放上去显示大图
07-23
js实现的鼠标事件 当鼠标放在小图上的时候 会触发鼠标的事件，弹出一个大图，是一个层。
html鼠标划过显示图片,jquery实现鼠标滑过小图查看大图的方法
weixin_28851659的博客
06-04 766
本文实例讲述了jquery实现鼠标滑过小图查看大图的方法。分享给大家供大家参考。具体实现方法如下：1. CSS部分：ul{list-style:none;}li{float:left;margin-left:10px;}img{border:#CCCCCC solid 1px;}#max{position:absolute;display:none; /*隐藏层*/}2. HTML部分：苹果产品列...
鼠标放在图片上显示大图
weixin_34163553的博客
07-04 217
<!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> <...
完全css实现缩略图鼠标移上去显示大图
weixin_34258078的博客
12-21 138
<!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> <me...
鼠标放上去显示大图横向弹性相册JS
01-23
"鼠标放上去显示大图横向弹性相册JS"是一个网页设计技术的应用，主要用来实现一种交互式的图片展示效果。在网页上，用户将鼠标悬停在小图上时，会弹出一个大图预览，这种效果常用于产品展示、摄影集或者任何需要详细...
dw制作鼠标放上去图片就显示鼠标离开图片就消失
09-24
本文将详细介绍如何在DW中实现“鼠标放上去图片显示，鼠标离开图片消失”的效果。 首先，我们需要创建一个新的HTML文档。在DW中，可以通过“文件”菜单选择“新建”来创建一个新的HTML页面。然后，我们可以利用...
鼠标放上去显示大图片的两种方式
10-28
这种效果可以通过多种技术实现，而"鼠标放上去显示大图"的两种常见方法主要依赖于CSS（层叠样式表）和JavaScript。下面我们将详细探讨这两种方法及其实现过程。 **方法一：纯CSS实现** CSS3提供了`:hover`伪类选择...
CSS鼠标移上去显示大图
07-11
在本案例中，“CSS鼠标移上去显示大图”是指通过CSS实现了一个交互效果：当鼠标悬停在小图片上时，会显示一个放大版的大图。这种功能常见于产品展示、相册浏览等场景，可以提升用户体验，让用户更清晰地查看细节。 ...
鼠标移上去显示大图的特效代码
03-20
在网页设计中，"鼠标移上去显示大图的特效代码"是一种常见的交互设计技术，它提高了用户体验，使得用户能够在不离开当前页面的情况下预览图片的详细内容。这种效果通常是通过JavaScript或者CSS3来实现的，有时也会...
鼠标指向小图显示大图效果，基于Mootools插件.rar
07-09
一款常见的制作网页效果的JS脚本文件，点小图显示放大图，类似淘宝网的效果，以前发几款图像放大，不过都是使用了jQuery，现在这个使用的是Mootools，你可以比较一下，各自的异同，性能方面有什么不同的地方，当然，如果你对此不太了解，直接拿去使用的话，也是可以的。
鼠标移向小图显示大图
weixin_33895516的博客
08-23 161
代码简介： CSS制作的图片查看特效，鼠标放上后出现放大的图片，带漂亮的边框修饰，还可以加入简短的图片说明。 代码内容： View Code <html><head><title>鼠标移向小图显示大图-www.webdm.cn</title><styletype="text/css">.thumbnail{positi...
基于jQuery的鼠标悬停时放大图片的效果制作
axl---专心专注于web前端开发
01-13 396
先编写一个无序列表的结构，a标签中的img标签用来存放小图片，a标签添加一个rel属性，用来存放大图片的路径。 1 2 3 4 5 CSS样式表部分： bigimage是用jQuery创建的一个p标签的id，用来存放大图片，设置其样式为绝对定位，并先隐藏。给a标签添加一个黑色的背景，是为了给图片变暗的效果做铺垫。就这样，一个简单...
非常简单的 何实现鼠标滑过小图切换大图功能
weixin_30896763的博客
05-03 590
建站公司关于如何使ecshop网店里商品图片在能多现实的前提下又不影响客户查看呢？这就需要鼠标经过图片就能切换为大图的功能，具体如何操作呢？鼠标滑过小图显示大图的代码如下：先打开goods.dwt 添加代码: <script type="text/javascript">function change_img(img_src){document.getElementsByName("g...
css实现：鼠标放在图片查看大图
carter_yu的博客
07-18 3173
其实这是一个很简单的实现，但是对于小白来说，还是有必要做一下笔记。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>查看大图</title> <style> img:hover { transform: scale(2); } </style> </head><body> <im
鼠标放上去，出现大图预览效果
Mr_Yan的博客
03-23 8332
前天逛淘宝，看见淘宝的商品图片，鼠标放上去就会就会有相应大图的预览，于是就想着自己能不能做一个这样的效果出来，毕竟以前也看过这样类似的教程。 思路：             一：页面布局             二：鼠标放上去，出现透明浮动块             三：鼠标在目标元素上移动时，出现预览图。             四：鼠标离开目标元素时，浮动块和大图预览消失。
鼠标悬停在小图上，自动出现大图的代码
行者
12-19 3256
首先原图片就是大图片， 1.小图所在的div，用style=overfow:hidden;width:100px;height:100px;和 来限定图片显示大小，只显示为高宽100px z-index:2; display:none;"> 2.用于显示大图即原本大小图的div,style=display:none;让它先不显示 function show(_this) { document
鼠标放到小图上，小图加边框，左边大图同步显示对应的图片。
最新发布
05-13
这个功能可以通过 JavaScript 和 CSS 来实现。以下是一个简单的实现方式： 1. 给小图加上鼠标移上去时需要显示的边框样式，例如： ```css .thumbnail:hover { border: 1px solid #ccc; } ``` 2. 给小图添加鼠标移入事件监听器，当鼠标移入时，获取对应的大图地址并设置到大图的 `src` 属性中，例如： ```html <img class="thumbnail" src="small-image-1.jpg" data-large-image="large-image-1.jpg" alt="Small Image 1"> <img class="thumbnail" src="small-image-2.jpg" data-large-image="large-image-2.jpg" alt="Small Image 2"> <img class="thumbnail" src="small-image-3.jpg" data-large-image="large-image-3.jpg" alt="Small Image 3"> <img id="large-image" src="large-image-1.jpg" alt="Large Image"> <script> const thumbnails = document.querySelectorAll('.thumbnail'); const largeImage = document.getElementById('large-image'); thumbnails.forEach(thumbnail => { thumbnail.addEventListener('mouseenter', () => { const largeImageSrc = thumbnail.dataset.largeImage; largeImage.src = largeImageSrc; }); }); </script> ``` 在这个例子中，我们给每个小图添加了一个 `data-large-image` 属性，用于保存对应的大图地址。当鼠标移入小图时，我们获取到对应的大图地址，并将其设置到大图的 `src` 属性中，从而实现了同步显示大图的功能。 需要注意的是，这只是一个简单的实现方式，如果需要更复杂的效果，可能需要使用一些 JavaScript 库或框架来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值