随鼠标显示图片

最新推荐文章于 2024-08-13 10:40:16 发布
最新推荐文章于 2024-08-13 10:40:16 发布
阅读量767 收藏
点赞数
分类专栏： Script 文章标签： border function class html javascript null
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图片</title>
<script language="javascript">
var pltsPop=null;
var pltsoffsetX = 10;
var pltsoffsetY = 15;
var pltsPopbg="#ffffee";
var pltsPopfg="#111111";
var pltsTitle="";
document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');
function pltsinits()
{
    document.onmouseover   = plts;
    document.onmousemove = moveToMouseLoc;
}
function plts()
{  var o=event.srcElement;
    if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
    if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
    pltsPop=o.dypop;
    if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
    {
 pltsTipLayer.style.left=-1000;
 pltsTipLayer.style.display='';
 var Msg=pltsPop.replace(//n/g,"<br>");
 Msg=Msg.replace(//0x13/g,"<br>");
 var re=//{(.[^/{]*)/}/ig;
 if(!re.test(Msg))pltsTitle="";
 else{
   re=//{(.[^/{]*)/}(.*)/ig;
     pltsTitle=Msg.replace(re,"$1")+" ";
   re=//{(.[^/{]*)/}/ig;
   Msg=Msg.replace(re,"");
   Msg=Msg.replace("<br>","");}
   var attr=(document.location.toString().toLowerCase().indexOf("list.asp")>0?"nowrap":"");
        var content =
       '<table style="FILTER:alpha(opacity=80) shadow(color=#bbbbbb,direction=150);" id=toolTipTalbe border=0><tr><td width="100%"><table class=selet_bg cellspacing="0" cellpadding="0" style="width:100%" style="font size:9pt;">'+
       '<tr id=pltsPoptop><th height=12 valign=bottom class=header><p id=topleft align=left>'+pltsTitle+'</p><p id=topright align=right style="display:none">'+pltsTitle+'</font></th></tr>'+
       '<tr><td "+attr+" class=f_one style="padding-left:10px;padding-right:10px;padding-top: 4px;padding-bottom:4px;line-height:135%">'+Msg+'</td></tr>'+
       '<tr id=pltsPopbot style="display:none"><th height=12 valign=bottom class=header><p id=botleft align=left>'+pltsTitle+'</p><p id=botright align=right style="display:none">'+pltsTitle+'</font></th></tr>'+
       '</table></td></tr></table>';
        pltsTipLayer.innerHTML=content;
        toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);
        moveToMouseLoc();
        return true;
       }
    else
    {
     pltsTipLayer.innerHTML='';
       pltsTipLayer.style.display='none';
        return true;
    }
}

function moveToMouseLoc()
{
 if(pltsTipLayer.innerHTML=='')return true;
 var MouseX=event.x;
 var MouseY=event.y;
 //window.status=event.y;
 var popHeight=pltsTipLayer.clientHeight;
 var popWidth=pltsTipLayer.clientWidth;
 if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)
 {
    popTopAdjust=-popHeight-pltsoffsetY*1.5;
    pltsPoptop.style.display="none";
    pltsPopbot.style.display="";
 }
  else
 {
     popTopAdjust=0;
    pltsPoptop.style.display="";
    pltsPopbot.style.display="none";
 }
 if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)
 {
  popLeftAdjust=-popWidth-pltsoffsetX*2;
  topleft.style.display="none";
  botleft.style.display="none";
  topright.style.display="";
  botright.style.display="";
 }
 else
 {
  popLeftAdjust=0;
  topleft.style.display="";
  botleft.style.display="";
  topright.style.display="none";
  botright.style.display="none";
 }
 pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
 pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
   return true;
}
pltsinits();

   </script>
</head>
<body>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<img border="0" alt="<img border='0' src='http://www.fu-joy.net/pc/images/indexpages/index/ad8.jpg'>" src="http://www.fu-joy.net/pc/images/indexpages/index/ad8.jpg" width="120" height="120">
</body>
</html> 
domando
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Html标签中Alt和title的用法
on my way ING
10-16 1022
 在Html标签中Alt和Title都是提示性语言标签，在我们浏览一些网页时，鼠标停留在一张图片或文字链接上时，在鼠标的右下角出现一个提示信息框，对目标进行一定的注释说明，这就是它们的作用。其中alt 用来给图片来提示的，Title用来给链接文字或普通文字提示。    它们的用法如下：　　文字　　文字　　 在使用我发现，title标签中不能使用、&nbsp等来设置文字提示的格式
制作类似于Title、ALT的提示效果
herimorisome的专栏
01-18 617
在网页中，有时我们将鼠标移到图片上，或者文字链接处，会出现文字型的提示信息。一般制作这样的效果极为简单，只需在图片代码中加入或者在文字链接代码中加入。仔细观察一下，感觉出现的信息总有时间上的停顿。如何制作类似于网页教学网首页文字超链接的提示信息的效果呢？制作方法一：加入JS代码1、在页面的中加入JS代码：var tipTimer;function locateObject(n, d) { //
js 自动获取html标签,通过js获取html标签的值
weixin_36206609的博客
05-31 1962
text()方法是获取所有匹配元素的内容.结果是所有比配结果组成的文本.这方法对于htm标记.xml标记都有用.用于获取html标记标签中的内容 如:div span p 这些才用到 用html() 也一样.你好$("p").text(); 或者$("p").html()//output "你好"单行文本是不能用text()或html()来获取 或者 设置 值。必须要用val().val() 方...
javascript获取网页指定内容_JavaScript之总结回顾（一）
weixin_35179649的博客
12-03 726
JavaScript的学习即将告一段落，知识点很多也很杂，需要把这段时间所学习的内容做一个大致的梳理。JavaScript，简称JS，是一种客户端脚本语言，主要用来向HTML网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。jQuery ，是一款免费且开放源代码的JavaScript代码库，它提供了HTML文档操作，节点查找，事件处理，动画设计，Ajax交互等丰富的功能。jQuery设计...
为图片加alt的js代码
Sunny
03-17 2803
<!-- var stylevar flag=false; function DrawImage(ImgD){ var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){ flag=true; if(image.width/image.height
图片随鼠标点击旋转特效代码
03-20
"图片随鼠标点击旋转特效代码"是一种利用JavaScript库jQuery实现的动态视觉效果，旨在为用户提供更生动、更具吸引力的交互体验。这种特效通常应用于网站的展示区域，如产品展示、摄影集或者艺术作品展示等，使用户...
jQuery鼠标移动图片遮罩显示特效
04-09
"jQuery鼠标移动图片遮罩显示特效"就是一种能增强用户交互性的技术，它通过jQuery库实现了当鼠标在图片上移动时，遮罩层随之动态变化的效果。本文将深入探讨这个特效的实现原理、相关知识点以及如何应用到实际项目中...
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
09-04
`onmousemove` 用于在鼠标移动时显示提示信息，`onmouseout` 用于在鼠标移开时隐藏提示信息。 2. **JavaScript**： - 定义了一个对象`c$`，其中包含两个方法：`mmove` 和 `mout`。 - `mmove` 方法接收两个参数，...
随鼠标移动的图片或文字特效代码
01-21
跟随鼠标的图片特效 这里放的是图片 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]其实这段代码很简单，也很好理解，只是获取了当前鼠标在屏幕中的位置； 然后再把坐标值赋给图片，或者文字!当然要用到 ...
css3鼠标拖拽展示图片特效
07-24
在网页设计领域，CSS3（层叠样式表第三版）为开发者提供了许多强大的新特性，其中之一就是能够实现复杂的交互效果，比如我们今天要探讨的"css3鼠标拖拽展示图片特效"。这种特效使得用户可以通过鼠标拖动来浏览图片，...
jsoup 读取解析html,jsoup的maven依赖及jsoup解析html获取Element的数据（demo）
weixin_33850554的博客
06-25 1106
jsoup的maven依赖：jar包下载地址：http://note.youdao.com/noteshare?id=c2444dc21b286006fb9027683f2a5053org.jsoupjsoup1.7.3package com.success.project;import java.io.BufferedReader;import java.io.IOException;impor...
【JavaScript】 提取网页内容
小数点儿_
06-08 4175
【代码】JavaScript 提取网页内容。
jQuery 鼠标移入图片 显示大图并跟随鼠标移动
weixin_33924770的博客
06-17 927
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
php 从html里提取img,如何从html使用php提取img src,标题和alt？
weixin_28834169的博客
03-26 567
编辑：现在我知道更好使用regexp来解决这种问题是a bad idea，可能会导致不可维护和不可靠的代码。更好地使用HTML parser。解决方案与regexp在这种情况下，最好将过程分为两部分：>获取所有的img标签>提取他们的元数据我将假设你的文档不是xHTML严格，所以你不能使用XML解析器。例如。与此网页源代码：/* preg_match_all match the reg...
如何在html页面上随着鼠标的位置显示浮动层图片或别的东东？（附代码）
编程岁月
04-11 5154
改了一下网上的一个例子，使之更好用了。粗题字是精华！！！！http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" >客运站查询// Main background color (the large area)// Usually a bright color (whit
HTML中alt标签的用法
小小专栏
04-07 4468
<br />eg: <img url = "" alt = "图片"> 一般情况下alt标签支持ie浏览器，当图片不存在的时候alt一样的有指示的效果<br /> <br />     <img url = "" title = "图片">可用于ie 和遨游。。<br /> <br /> 我想知道在火狐上面怎么实现 我把两个一起用也没实现 
前端案例：极速问诊项目（移动端自适应）（HTML+CSS+JS）
最新发布
li3123537691的博客
08-13 318
一个简单的移动端案例，模拟不同设备下逻辑分辨率不同，宽高自适应正常打开整体布局打开 f12 （ctrl + shift + M）或者点击左上角图标,将其模拟为移动端设备在移动设备iPhone6/7/8，逻辑分辨率375的整体布局其banner图尺寸现在切换设备为iPad，逻辑分辨率为768，此设备下banner图尺寸自适应再切换设备为iPhone 14 Pro Max，逻辑分辨率为430，此设备下banner图尺寸自适应。
在网页中放一个图片，当鼠标在图片上移动时图片在另一个div容器中放大显示并随鼠标移动
05-17
可以通过JavaScript和CSS来实现这个效果。下面是一个简单的实现方式： HTML代码： ```html <div class="image-container"> <img src="your-image-url" alt="your-image"> </div> <div class="enlarged-image-container"></div> ``` CSS样式： ```css .image-container { position: relative; } .enlarged-image-container { position: absolute; display: none; z-index: 9999; } .enlarged-image-container img { max-width: 300px; max-height: 300px; border: 1px solid #ccc; border-radius: 5px; } ``` JavaScript代码： ```javascript const imageContainer = document.querySelector(".image-container"); const enlargedImageContainer = document.querySelector(".enlarged-image-container"); imageContainer.addEventListener("mousemove", (event) => { // 获取鼠标相对于图片容器的位置 const x = event.offsetX; const y = event.offsetY; // 获取图片元素 const image = imageContainer.querySelector("img"); // 计算放大图片的位置 const enlargedImageX = x - 150; const enlargedImageY = y - 150; // 设置放大图片的位置 enlargedImageContainer.style.left = `${enlargedImageX}px`; enlargedImageContainer.style.top = `${enlargedImageY}px`; // 设置放大图片的内容 enlargedImageContainer.innerHTML = `<img src="${image.src}" alt="${image.alt}">`; // 显示放大图片容器 enlargedImageContainer.style.display = "block"; }); imageContainer.addEventListener("mouseleave", () => { // 隐藏放大图片容器 enlargedImageContainer.style.display = "none"; }); ``` 上面的代码中，我们首先获取图片容器和放大图片容器的元素，并且给图片容器添加了鼠标移动和鼠标离开的事件监听器。 当鼠标在图片容器内移动时，我们计算出鼠标相对于图片容器的位置，并且根据这个位置计算出放大图片的位置。 然后，我们设置放大图片容器的位置和内容，并且显示放大图片容器。 当鼠标离开图片容器时，我们隐藏放大图片容器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值