淘宝网缩略图预览生成大图的代码

最新推荐文章于 2022-02-08 11:04:26 发布
最新推荐文章于 2022-02-08 11:04:26 发布
阅读量2.8k 收藏
点赞数
分类专栏： HTML/CSS/JS 文章标签： function border javascript div null xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mane_yao/article/details/5480626
版权

<!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>
<title>淘宝网鼠标放上小图生成大图的效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
div#PreviewBox{
  position:absolute;
  padding-left:6px;
  display: none;
  Z-INDEX:2006;
}
div#PreviewBox span{
  width:7px;
  height:13px;
  position:absolute;
  left:0px;
  top:9px;
  background:url() 0 0 no-repeat;
}
div#PreviewBox div.Picture{
  float:left;
  border:1px #666 solid;
  background:#FFF;
}
div#PreviewBox div.Picture div{
  border:4px #e8e8e8 solid;
}
div#PreviewBox div.Picture div a img{
  margin:19px;
  border:1px #b6b6b6 solid;
  display: block;
  max-height: 250px;
  max-width: 250px;
}
</style>
</head>
<body>
<script language="javascript" type="text/javascript">
var maxWidth=250;
var maxHeight=250;
function getPosXY(a,offset) {
       var p=offset?offset.slice(0):[0,0],tn;
       while(a) {
           tn=a.tagName.toUpperCase();
           if(tn=='IMG') {
              a=a.offsetParent;continue;
           }
          p[0]+=a.offsetLeft-(tn=="DIV"&&a.scrollLeft?a.scrollLeft:0);
          p[1]+=a.offsetTop-(tn=="DIV"&&a.scrollTop?a.scrollTop:0);
          if(tn=="BODY")
                break;
          a=a.offsetParent;
      }
      return p;
}
function checkComplete() {
     if(checkComplete.__img&&checkComplete.__img.complete)
              checkComplete.__onload();
}
checkComplete.__οnlοad=function() {
         clearInterval(checkComplete.__timeId);
         var w=checkComplete.__img.width;
         var h=checkComplete.__img.height;
         if(w>=h&&w>maxWidth) {
              previewImage.style.width=maxWidth+'px';
         }
        else if(h>=w&&h>maxHeight) {
              previewImage.style.height=maxHeight+'px';
        }
        else {
              previewImage.style.width=previewImage.style.height='';
        }
       previewImage.src=checkComplete.__img.src;previewUrl.href=checkComplete.href;checkComplete.__img=null;
}
function showPreview(e) {
         hidePreview (e);
         previewFrom=e.target||e.srcElement;
         previewImage.src=loadingImg;
         previewImage.style.width=previewImage.style.height='';
         previewTimeoutId=setTimeout('_showPreview()',500);
         checkComplete.__img=null;
}
function hidePreview(e) {
        if(e) {
            var toElement=e.relatedTarget||e.toElement;
            while(toElement) {
                  if(toElement.id=='PreviewBox')
                          return;
                  toElement=toElement.parentNode;
            }
       }
       try {
            clearInterval(checkComplete.__timeId);
            checkComplete.__img=null;
            previewImage.src=null;
       }
       catch(e) {}
       clearTimeout(previewTimeoutId);
       previewBox.style.display='none';
}
function _showPreview() {
        checkComplete.__img=new Image();
        if(previewFrom.tagName.toUpperCase()=='A')
               previewFrom=previewFrom.getElementsByTagName('img')[0];
        var largeSrc=previewFrom.getAttribute("large-src");
        var picLink=previewFrom.getAttribute("pic-link");
        if(!largeSrc)
             return;
        else {
             checkComplete.__img.src=largeSrc;
             checkComplete.href=picLink;
             checkComplete.__timeId=setInterval("checkComplete()",20);
             var pos=getPosXY(previewFrom,[106,26]);
             previewBox.style.left=pos[0]+'px';
             previewBox.style.top=pos[1]+'px';
             previewBox.style.display='block';
        }
}
</script>
<div id="PreviewBox" οnmοuseοut="hidePreview(event);">
  <div class="Picture" οnmοuseοut="hidePreview(event);">
   <span></span>
   <div>
    <a id="previewUrl" href="javascript:void(0)" target="_blank"><img οncοntextmenu="return(false)" id="PreviewImage" src="about:blank" border="0" οnmοuseοut="hidePreview(event);" /></a>
   </div>
  </div>
</div>
<script language="javascript" type="text/javascript">
var previewBox = document.getElementById('PreviewBox');
var previewImage = document.getElementById('PreviewImage');
var previewUrl = document.getElementById('previewUrl');
var previewFrom = null;
var previewTimeoutId = null;
var loadingImg = '/jscss/demoimg/loading.gif';
</script>
<a href="/" οnmοuseοver='showPreview(event);' οnmοuseοut='hidePreview(event);'>
<img src="/jscss/demoimg/wall_s7.jpg" alt="" large-src="/jscss/demoimg/wall7.jpg" pic-link="/"  border="0" width="100"/></a>
</body>
</html>

mane_yao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html页面点击小图弹出大图代码,js图片画廊点击弹出遮罩背景大图切换代码
weixin_39870132的博客
06-03 810
一款简单实用的js图片画廊点击弹出遮罩背景大图切换代码，点击小图弹出大图幻灯片展示，左右按钮控制图片上一张下一张进行切换。查看演示下载资源：34次 下载资源下载积分：20积分js代码 (function(){var LightBox = function(options){this.imgListParent = document.get...
JQ的产品图片及缩略图放大展示效果html代码（用于制作产品页）
10-14
HTML+CSS+JQ的产品图片及缩略图放大展示效果html代码（用于制作产品页）
淘宝网缩略图预览生成大图
03-29
淘宝网缩略图预览生成大图的代码_图片特效特效.txt
带缩略图的产品展示代码
11-05
这是一个带缩略图的图片展示代码。
商品缩略图实现
橙虚缘空间
08-06 1304
<?php // 验证码类 class image { protected $im; protected $img_width; protected $img_height; protected $img_type; static public function make_thumb($ori,$w=200,$h=200) { //
网页模板——jQuery仿淘宝网商品管理图片批量上传插件特效源码.zip
11-22
后端可能使用PHP、Node.js或Python等语言处理这些图片，包括存储、命名、生成缩略图等操作。 为了保证安全性，源码可能会有防止XSS（跨站脚本攻击）和CSRF（跨站请求伪造）的措施，例如检查上传文件类型、限制文件...
商业编程-源码-图片存储淘宝相册免费网盘源代码.zip
06-23
- 图片处理服务（如缩略图生成）以减少用户加载大图片时的等待时间。 8. **监控与日志**： - 监控系统（如Prometheus、Grafana）收集性能指标，以便及时发现并解决问题。 - 日志记录和分析（如ELK Stack）有助于...
网络搜图精灵（C#源代码）
07-13
3. **图像处理**：软件可能包含了对图片的预处理和后处理功能，如缩略图生成、图片质量调整等。这可能需要用到.NET Framework中的System.Drawing命名空间，或者更专业的图像处理库如ImageSharp。 4. **多线程与异步...
jquery仿淘宝商城商品图片预览选择代码
04-26
jquery仿淘宝商城商品图片预览选择代码仿淘宝商城商品图片预览选择代码
淘宝式图片放大镜，缩略图可左右滑动
08-10
前端JQuery插件，用于图片局部放大查看，模仿淘宝式图片放大镜。底部缩略图可点击左右按钮滑动进行切换
PHP+js 上传视频、预览、缩略图、视频时长
12-29
示例在smarty模板引擎下运行的，选择视频后，可预览视频，可获取视频缩略图，可获取视频时长。不要自动提高下载积分了。
模仿淘宝产品图片左右切换js特效代码
12-13
模仿淘宝产品图片左右切换js特效代码，就像淘宝商城浏览产品展示那样，有缩略图，大图，鼠标放上去显示大图（放大镜效果）
仿淘宝点小图预览大图效果
04-27
准确的描述了仿淘宝上点击小图预览可以大图的效果。
js 图片截取/图片缩放(类似淘宝商品浏览)
04-14
js 图片截取 缩放 js 图片截取 缩放js 图片截取 缩放 js 图片截取 缩放 js 图片截取 缩放 js 图片截取 缩放
完全css实现缩略图鼠标移上去显示大图
通吃互联网
11-24 360
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;met
淘宝生成器在线制作，淘宝全屏代码装修店招导航教程
m0_56372183的博客
02-08 6628
先做好设计好图片宽度1920像素高度750像素高度随意,然后把图片上传淘宝空间素材里面如图 打开装修页面一秒美工，工具，把复制好的图片地址粘贴到如图所示 点击生成代码，点击就可以进行复制。 打开装修后台首页的界面，左侧有个自定义内容模块把拖入到右侧地方。 然后把复制好的生成粘贴到编辑器文本框中，然后点击确定即可。 淘宝生成器在线制作 淘宝1920全屏代码 淘宝自定义全屏代码 淘...
淘宝API图片尺寸的缩略图解决办法
mal327的专栏
11-27 3872
淘宝API图片尺寸的缩略图解决办法 (本文出自4ngel's blog，转载时请注明出处) 淘宝Open API返回的图片pic_url，尺寸一般都很大，不太好用，需要缩略图。 解决方法是：pic_url的图片URL后面加上：_sum.jpg 例如：1234.jpg 改为1234.jpg_sum.jpg 可参考：wap.taobao.com 还有其他的几种大小格式： _4
taobao缩略图机制
每天积累一点，一年后你会发现，自己变化很大
07-06 1145
根据 淘宝图片存储与Cdn系统 http://www.slideshare.net/guiwuu/cdn-4508477 这个架构说明 应该是用的 nginx + graphicsmagick 所以 有这么几种方案 nginx的第三方扩展 HttpImageFilterModule http://wiki.nginx.org/HttpImageFilterModule 根据URL
安卓网络视频生成缩略图
最新发布
09-08
然后，在生成缩略图的Activity中，我们可以使用以下代码来获取网络视频的缩略图： ```java String videoUrl = "网络视频的URL"; // 替换为你要获取缩略图的网络视频地址 Bitmap thumbnail = null; // 创建 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值