根据鼠标移动位置显示背景图片

最新推荐文章于 2023-09-08 18:50:39 发布
最新推荐文章于 2023-09-08 18:50:39 发布
阅读量217 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/ljuyi/p/6017105.html
版权 
 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="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <link rel="stylesheet" type="text/css" href="css/common.css" />
 7 <style type="text/css">
 8 #box{width:600px;height:630px;background:#CCC;margin:0 auto;padding:5px;padding-left:35px;}
 9 #box div{float:left;width:60px;height:60px;background:url(img/pic.jpg) no-repeat;opacity:0;margin:1px;}
10 </style>
11 </head>
12 
13 <body>
14 <div id="box" class="clearfix">
15 </div>
16 <script>
17 var oBox = document.getElementById("box");
18 var oDiv = oBox.getElementsByTagName("div");
19 var str = "";
20 for(var i=0;i<100;i++)
21     str += "<div></div>";
22 oBox.innerHTML = str;
23 for(var i=0;i<100;i++)
24 {
25     oDiv[i].style.top = parseInt(i/9)*61+"px";
26     oDiv[i].style.left = i%9*61+"px";
27     var co = -(parseInt(i/9)*61);
28     var ro = -(i%9*61);
29     oDiv[i].style.backgroundPosition = ro+"px"+" "+co+"px";
30     oDiv[i].onmouseover = function(){
31     this.style.opacity = "1";
32 };
33 }
34     
35 </script>
36 </body>
37 </html>

 

转载于:https://www.cnblogs.com/ljuyi/p/6017105.html

weixin_30363817
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单的jq图片跟着鼠标移动
zxliyao的博客
01-07 176
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 200px; height: 200px; background-color: pink; position: absolute; } </style> <script sr
js 鼠标移动显示图片的简单实例
10-26
在JavaScript（简称JS）编程中，实现鼠标移动时显示图片的功能是一种常见的交互设计，它可以增强用户的体验。这个简单实例展示了如何在用户将鼠标移到特定元素上时，动态地展示一张图片或者相关信息。以下是对该实例...
背景图跟随鼠标移动的Mootools插件
12-10 242
效果演示: 源代码: <script style="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"></script></head><body id='a'><h2 ...
简单复现鼠标跟随事件 - - - 背景图随鼠标的移动而移动
qq_43654065的博客
01-04 926
效果： 原理： 获取鼠标的相对位移，将获得的相对位移赋值到背景图上 $('.wrap').mousemove(function (e) { var x = (e.offsetX * -1 / 25), y = (e.offsetY * -1 / 25); // $(this).css('background-position', x + 'px ' + y + 'px'); $(this).css('transform', 'translate3d(' +
景色跟随鼠标移动效果CSS实现
a_strong_pig的博客
08-26 312
景色随鼠标移动CSS实现
鼠标移动，修改背景图片
qq_32862143的博客
06-01 351
鼠标移动，修改图片
jQuery鼠标移动全屏图片切换代码
06-24
这个技术利用jQuery库，一个广泛使用的JavaScript库，实现了一个功能，即当用户将鼠标移动到页面上的缩略图上时，全屏背景图片会相应地进行切换，从而为访问者带来动态且沉浸式的浏览体验。 首先，我们来了解jQuery...
H5全屏鼠标移动图片视差预览特效
06-24
每个图片层都有自己的坐标系统，当鼠标移动时，图片层会根据其距离鼠标位置的距离和速度比例进行移动。这种差异化的移动使得用户在浏览时感觉到一种动态的立体效果，增加了视觉的层次感。 至于全屏图片展示，通常会...
jQuery背景图片跟随鼠标摆动动画特效
06-11
综上所述，"jQuery背景图片跟随鼠标摆动动画特效"是一种利用jQuery实现的动态视觉效果，它通过监听鼠标移动并动态调整背景图片的位置，为网站增添活力和趣味性。在实际应用中，开发者可以根据需求调整动画的细节，以...
鼠标移动到图片上显示图片提示效果
06-11
在网页设计中，实现“鼠标移动到图片上显示图片提示效果”是一种常见的用户体验优化技术，通常被称为“悬停提示”或“tooltip”。这种效果能够提供额外的信息，帮助用户更好地理解图片内容，尤其在空间有限或者需要...
前端图片跟着鼠标跑，鼠标到哪图片到哪
weixin_45096939的博客
11-21 512
电脑鼠标一般都是一个小箭头的图标，如果我们想要设置一个图片跟着鼠标走，鼠标移动图片跟着移动该怎么做呢？
html5鼠标移动背景变大,HTML5背景随鼠标移动的照片网格
weixin_30227565的博客
06-04 125
CSS语言：CSSSCSS确定body {font-size: 40px;font-family: 'Bungee Shade', cursive;color: #222;background: #222;margin: 0;}.box {position: relative;overflow: hidden;cursor: pointer;}.box:hover .border {transfo...
HTML自动跟随背景颜色,5分钟实现Canvas鼠标跟随动画背景
weixin_34587189的博客
05-31 440
关于Canvas制作炫酷背景，我会在git上不定时去更新，并会附上详细的解析，如果有喜欢的话，可以到git上瞧瞧前言相信很多前端小白都看过这样的背景动画，也好奇如何去实现这种效果！将这种效果应用到自己的个人网站上，会让整个网站变得与众不同！下面我会直击重点，用最短的时间，使用 Canvas 制作 鼠标跟随动画如何制作动画常用的绘图动画的方式有以下几种：CSS3SVGCanvasWebGL让我们先分...
js特效——根据鼠标位置移动的图片
qq_52430605的博客
09-08 2065
看到别人的网站上有这种特效，便打算学习后自己做出来
鼠标悬停显示图片
Sxb_Cry5tal的博客
03-23 446
在 web 端我们查看一些数据时，为了方便用户理解数据的计算方法，会在鼠标指向格子的时候出现一些提示，鼠标移开的时候提示就不显示了，再比如说，鼠标指向页面按钮，出现按钮功能的提示，这样的效果在润乾中可以轻松实现，也有相应的文档介绍 鼠标悬停出现提示信息怎么做 。 除了上面说的那种静态信息外，在润乾报表中也可以实现鼠标指向显示对应的动态数据，还可以实现鼠标指向显示图片的效果哦！ 这里以学生信...
刚用Mootools写了一个随着鼠标移动而背景图也跟着移动的东西
11-15 238
效果演示: 源码下载:点击下载 实现代码: <!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/xh...
MooTools -- 非常不错的Javascript库
AnkyHe's Blog
06-25 277
很久没有写博客了，主要是前三周特别特别的忙，平均每天工作11小时，每周工作6天，最晚一天到凌晨4点。不过过得倒是很充实很充实，在CSS/Javascript/AJAX和JPA方面收获颇多。今天终于可以缓缓气，因为同伴正在Commit他的代码，所以我的Merge工作只好明天做了^_^         其实，在我正真使用Javascript做这个项目前，我学习过GWT。坦白说，GWT的概念真的很不...
html+css如何实现鼠标移入按钮显示图片
小魏快起床的博客
11-24 3590
在下面这种代码中，我要鼠标放入按钮中再显示图片，这种做法该如何做呢。
原生鼠标移动图片切换
最新发布
03-06
原生鼠标移动图片切换是指在网页中使用原生JavaScript实现的一种效果，通过监听鼠标移动事件，当鼠标移动到指定区域时，切换显示不同的图片。以下是实现原生鼠标移动图片切换的步骤： 1. 在HTML中创建一个包含多张图片的容器，例如使用`<div>`元素，并为每张图片设置一个唯一的ID。 2. 使用CSS样式为容器和图片设置合适的样式，例如设置容器的宽度、高度和背景颜色等。 3. 在JavaScript中获取容器和图片的引用，可以使用`document.getElementById()`方法。 4. 使用`addEventListener()`方法监听鼠标移动事件，例如`mousemove`事件。 5. 在事件处理函数中，根据鼠标的位置或其他条件，判断应该显示哪张图片。 6. 使用JavaScript修改容器的背景图或图片元素的`src`属性，实现图片切换效果。 下面是一个简单的示例代码： HTML部分： ```html <div id="imageContainer"> <img id="image1" src="image1.jpg"> <img id="image2" src="image2.jpg"> </div> ``` CSS部分： ```css #imageContainer { width: 400px; height: 300px; background-color: #ccc; } #imageContainer img { display: none; width: 100%; height: 100%; } #imageContainer img.active { display: block; } ``` JavaScript部分： ```javascript var container = document.getElementById("imageContainer"); var image1 = document.getElementById("image1"); var image2 = document.getElementById("image2"); container.addEventListener("mousemove", function(event) { // 根据鼠标位置或其他条件判断应该显示哪张图片 if (event.clientX < container.offsetWidth / 2) { image1.classList.add("active"); image2.classList.remove("active"); } else { image1.classList.remove("active"); image2.classList.add("active"); } }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值