鼠标经过加载大图

jQuery鼠标经过显示大图 jQuery鼠标经过显示大图 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>JQ实现鼠标经过显示大图效果-柯乐义&am 阅读详情
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

main.js

 

---------------------------------------------------------------------------------------
function openScript(url, width, height){
 var Win = window.open(url,"openScript",'width=' + width + ',height=' + height + ',resizable=1,scrollbars=yes,menubar=no,status=no' );
}
//***********默认设置定义.*********************
tPopWait=500;//停留毫秒后显示提示。
tPopShow=5000;//显示毫秒后慢慢转为透明,即消失
showPopStep=20;
popOpacity=99;//颜色最深的时候0为透明

//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;

document.write("<style type='text/css'id='defaultPopStyle'>");
document.write(".cPopText {  background-color: #ffffff; border: 1px #555555 solid; font-size: 12px; padding-right: 4px; padding-left: 4px; height: 20px; padding-top: 2px; padding-bottom: 2px; filter: Alpha(Opacity=0)}");

document.write("</style>");
document.write("<div id='ncpopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");


function showPopupText(){
var o=event.srcElement;
 MouseX=event.x;
 MouseY=event.y;
 if(o.alt!=null && o.alt!=""){o.ncpop=o.alt;o.alt=""};
        if(o.title!=null && o.title!=""){o.ncpop=o.title;o.title=""};
 if(o.ncpop!=sPop) {
   sPop=o.ncpop;
   clearTimeout(curShow);
   clearTimeout(tFadeOut);
   clearTimeout(tFadeIn);
   clearTimeout(tFadeWaiting); 
   if(sPop==null || sPop=="") {
    ncpopLayer.innerHTML="";
    ncpopLayer.style.filter="Alpha()";
    ncpopLayer.filters.Alpha.opacity=0; 
    }
   else {
    if(o.dyclass!=null) popStyle=o.dyclass
     else popStyle="cPopText";
    curShow=setTimeout("showIt()",tPopWait);
   }
   
 }
}

function showIt(){
  ncpopLayer.className=popStyle;
  ncpopLayer.innerHTML=sPop;
  popWidth=ncpopLayer.clientWidth;
  popHeight=ncpopLayer.clientHeight;
  if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
   else popLeftAdjust=0;
  if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
   else popTopAdjust=0;
  ncpopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
  ncpopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
  ncpopLayer.style.filter="Alpha(Opacity=0)";
  fadeOut();
}

function fadeOut(){
 if(ncpopLayer.filters.Alpha.opacity<popOpacity) {
  ncpopLayer.filters.Alpha.opacity+=showPopStep;
  tFadeOut=setTimeout("fadeOut()",1);
  }
  else {
   ncpopLayer.filters.Alpha.opacity=popOpacity;
   tFadeWaiting=setTimeout("fadeIn()",tPopShow);
   }
}

function fadeIn(){
 if(ncpopLayer.filters.Alpha.opacity>0) {
  ncpopLayer.filters.Alpha.opacity-=1;
  tFadeIn=setTimeout("fadeIn()",1);
  }
}
document.onmouseover=showPopupText; 

------------------------------------------------------------------------------------

productmain.asp

加<SCRIPT language=JavaScript src="js/main.js"></SCRIPT>

然后

<img src="<%=rsArticle("DefaultPicUrl")%>" width="110" height="110" border="0" align='absmiddle' alt='点击查看大图:<br> <img src=<%=rsArticle("DefaultPicUrl")%> border=1>'>

[HTML]Web前端开发技术14(HTML5、CSS3、JavaScript )鼠标经过图片显示大图 网页标题:表格标签的综合应用——喵喵画网页 鼠标经过图片显示大图 网页标题:表格标签的综合应用 阅读详情

相关推荐

淘宝鼠标感应大图功能实现指南

本文还有配套的精品资源,点击获取 简介:网页交互设计对用户体验至关重要,本实例展示了如何使用JavaScript或CSS3技术实现淘宝中的鼠标感应大图预览功能。通过预加载大图资源和响应式鼠标悬停事件处理,提升浏览效率。实现该功能的技术核心包括图片预加载、响应式鼠标事件处理、动画效果实现及跨浏览器兼容性策略。这些技术的应用,不仅限于电商,还可以广泛用于媒体、博客等多种需要图片...

weixin_32252929的博客 1192

iPad 3」はフロントに「Face Time HD」カメラを採用し3月発売か紹介

iPad 3」はフロントに「Face Time HD」カメラを採用し3月発売か紹介 9 to 5 Macによると、独自のApple情報網を持っているiLoungeのJeremy Horwitz氏が次期iPadに関する情報をツィートしているそうです。その情報をまとめると、次期iPadはカメラの性能が向上し、フロントカメラはFace Time HDカメラになり、バックカメラはiPhone ...

weixin_30773135的博客 11万+

jQuery+CSS超炫的鼠标经过缩略图放大图片效果

内容索引:脚本资源,jQuery,图片放大  jQuery+CSS超炫的鼠标经过缩略图放大图片效果,不用多介绍了吧?现在网页上有很多这种类似的效果,像淘宝网、拍拍网等各大购物网站以及产品一类的网站很常见,同样使用了jQuery插件,用CSS进行定位,两者配合,效果完美,演示截图如上示。

java h d,Java, {Country} Hướng dẫn du lịch | Những việc nên làm tại Java, {Country} | Jetstar | Jets...

Là một trong những đảo nhỏ nhất của Indonesia nhưng cũng như các nơi khác trên khắp đất nước, Java được thiên nhiên ban tặng cảnh đẹp tự nhiên phong phú, từ bãi biển hoang sơ như Kepulauan Seribu trên...

weixin_34547628的博客 6万+

鼠标经过变换图片网页特效

鼠标经过变换图片网页特效

新手必看:Infineon Memtools烧录配置全流程(附常见错误解决方案)

本文为嵌入式开发新手提供了Infineon AURIX开发环境搭建与Memtools烧录的全流程实战指南。详细解析了ADS、DAS和Memtools三大核心工具的角色与协同关系,并重点讲解了Memtools的图形界面配置步骤、烧录操作流程,以及针对“无法连接设备”、“编程失败”等常见错误的系统性排查与解决方案,帮助开发者快速上手并规避典型陷阱。

weixin_29189377的博客 634

HDOJ-1702 栈和队列问题[或模拟]

ACboy needs your help again! Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 1697    Accepted Submission(s): 906 Problem Description ACboy wa...

weixin_34226182的博客 551

从XSA到Linux应用:Petalinux与Vitis的嵌入式开发全流程解析

本文详细解析了从XSA文件到Linux应用的嵌入式开发全流程,重点介绍了Petalinux与Vitis工具链的使用技巧和实战经验。通过XSA硬件描述、Petalinux工程搭建、系统镜像优化及Vitis开发配置等关键步骤,帮助开发者高效完成ZYNQ平台开发,解决常见问题并提升开发效率。

weixin_29195217的博客 191

JAVA集合

Set集合 一、感性认知: 1、对比List集合来看Set集合,感受差异化,想象距离任意情景,比较何时用List集合,何时用 Set集合。 二、理性认知: 1、集合结构图 a、java.util.Collection[I] java.util.List[I] java.util.ArrayList[C] java.util.LinkedList[C] java.util.Vect...

TracyEminem的博客 4万+

什么是 AIDV(AI 定义汽车):从软件定义到智能决策的范式革命

AI定义汽车(AIDV),是指以人工智能(尤其是大模型、深度学习、强化学习)为核心引擎,以车载AI芯片为算力底座,以“数据闭环”为迭代支撑,重构汽车感知、决策、执行全链路,实现“感知智能化、决策自主化、体验个性化、迭代自动化”的新一代智能汽车发展范式。其核心是让汽车从“执行工具”升级为“具备自主学习与智能决策能力的移动智能终端”,核心价值是“车与人的深度协同”与“复杂场景的自主适配”。

getusushu的博客 96

【数据集】未来不同情景下预测数据:如人口、土地利用等

未来不同情景下预测数据:如人口、土地利用等

WW、forever的博客 2994

Java300StudyNote(7)-Java各版本JavaSE、JavaEE、JavaME

1、JavaSE(J2SE)Java Standard Edition Java标准版 适合个人计算机上的应用2、JavaEE(J2EE)Java Enterprise Edition Java企业版本 适合服务器端的应用3、JavaME(J2ME)Java Micro Edition Java微型版 适合消费性电子产品

RhymeChiang 6万+

XXL-Job 分布式定时任务

XXL-JOB是一款轻量级分布式定时任务调度框架,采用调度中心与执行器分离架构,解决单机任务宕机、重复执行等问题。核心模块包括调度中心(管理任务配置、触发调度)和执行器(执行任务逻辑),支持集群部署保证高可用。框架提供丰富的任务触发规则、路由策略、阻塞策略及完善的运维能力,适用于多种业务场景如数据同步、定时推送等。安装时需准备MySQL数据库并初始化表结构,通过Docker部署调度中心服务。相比其他定时框架,XXL-JOB具有轻量化、可视化等优势,是中小企业的首选方案。

郭宝的博客 697

鼠标经过显示大图

需求是这样的,页面中的图片不能显示原图大小,那样布局会乱掉,所以需要显示小图,然后当鼠标经过的时候显示大图即可。 <div id="Photo" style="overflow:hidden;text-align:center;padding:10px"> </div> <div id="enlarge_images"&...

Aa891732559的博客 304

YOLOv改进 | YOLOv11添加WTConv小波卷积,能够更有效地捕捉局部和全局特征

在计算机视觉目标检测领域,YOLO(You Only Look Once)系列算法凭借“单阶段检测”的高效性(一次前向传播同时完成目标定位与分类),已成为工业界与学术界的主流选择。从YOLOv1到YOLOv11,算法持续迭代优化,在速度与精度之间寻求平衡,广泛应用于自动驾驶、智能安防、工业质检等场景。为解决上述问题,本文提出一种基于,将输入特征图分解为不同频率的子带(低频全局信息与高频局部细节),并分别通过卷积操作提取局部与全局特征,最后融合多尺度特征,从而更有效地捕捉目标的局部细节与全局结构。

走向CTO的路上... 1248

第四章:无感FOC的平滑启动艺术:告别“咔哒”声与抖动

无感FOC启动技术面临"先有位置还是先有旋转"的核心矛盾,导致常见故障包括位置失准、负载突变等。基础方案采用开环I/F控制,但存在重载启动困难等局限性。进阶方案结合IPD位置检测技术,通过脉冲电压注入法精准定位转子初始位置。关键技术在于开环到闭环的平滑切换,采用混合观测器设计和相位对齐技术。量产优化包括自适应参数整定和故障恢复机制,确保启动可靠性和一致性。该系统工程方案可有效解决启动抖动、异响等问题,提升用户体验。

汽车软件开发 730

跟随鼠标移动浮动显示大图展示的特效

跟随鼠标移动(大图展示) html,body{overflow:hidden;} body,div,ul,li{margin:0;padding:0;} #box ul{width:768px;height:172px;list-style-type:none;margin:10px auto;} #box li{float:left;width:170px;height:170px;

cloudday的专栏 2849

多 Agent 之间如何通信和协调?OpenClaw 的 Gateway 在其中扮演什么角色?

多 Agent 之间如何通信和协调?OpenClaw 的 Gateway 在其中扮演什么角色?

我哎GIS博客 1665

jQuery-鼠标经过显示大图并跟随鼠标效果插件

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=281今天看完了《JavaScript语言精粹》这本书,还有时间,就决定写写jQuery插件练练手,实现的效果是,鼠标移到缩略图上会显示该图的大图,并且大图跟随鼠标移动;或是移动到提示文字上,也可以显示图片。并且含有方向

wenjie847的专栏 6272

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

JavaScript真正的鼠标放上动画加载大图的

JavaScript真正的鼠标放上动画加载大图的代码 *{ padding:0; margin:0;} html { overflow:-moz-scrollbars-vertical; } body{ word-break:break-all; text-align:left; background:#C0C0C0; color:#4E4E4E;} ul,li{ list-style

WEB架构师- Facestrap 297

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

html鼠标悬停图片显示大图,jquery实现鼠标滑过小图时显示大图的方法

本文实例讲述了jquery实现鼠标滑过小图时显示大图的方法。分享给大家供大家参考。具体实现方法如下:li{list-style:none;float:left;margin-left:10px;}var data = {"images/11_s.jpg":["images/11_b.jpg","美人1"],"images/22_s.jpg":["images/22_b.jpg","美人2"],"i...

weixin_36221923的博客 1862

淘宝中的一个鼠标感应大图(鼠标经过显示大图)

<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="

管子(zero)的杂乱空间 4827

鼠标经过小图,显示大图

[code="html"] *{padding:0px;margin:0px;} li{list-style:none; float:left;margin-left:10px;} .container{ width:1000px; height:600px; margin...

u010818109的博客 626
上一篇: [全程建模]全程建模学起来很困难么?——对JavaEye中的一个帖子的回复
下一篇: 建议优快云增加谈恋爱专区
piperzero
博客等级 码龄21年 1377粉丝 504原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值