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

最新推荐文章于 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 799
一款简单实用的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 1301
<?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缩略图网格排列大图切换代码
04-07
jQuery缩略图网格排列大图切换代码是一款将所有缩略图以网格形式排列，当用户点击某张缩略图时，会以九宫格切片组合动画的方式组合出高清大图，效果非常棒。
ASP.NET中高质量缩略图的生成代码
10-30
在ASP.NET中生成高质量缩略图是一项常见的任务，特别是在构建图像处理或内容管理系统时。...总的来说，这段代码展示了在 ASP.NET 中如何生成高质量的缩略图，遵循了良好的图像处理实践，确保缩略图既小又清晰。
新版PHP网站缩略图在线生成源码
07-09
一款可以在线生成网站缩图的源码，它能够在短短的几秒钟内，透过您所输入的网址请求，产生该网站或网页的缩图。 此源码，需要空间支持PHP。
php生成图片缩略图代码类.zip
07-11
分享一个php生成图片缩略图代码类，设置初始化变量，按比例生成缩略图，生成背静缩略图。
jquery仿淘宝商城商品图片预览选择代码
04-26
jquery仿淘宝商城商品图片预览选择代码仿淘宝商城商品图片预览选择代码
淘宝式图片放大镜，缩略图可左右滑动
08-10
前端JQuery插件，用于图片局部放大查看，模仿淘宝式图片放大镜。底部缩略图可点击左右按钮滑动进行切换
PHP+js 上传视频、预览、缩略图、视频时长
12-29
示例在smarty模板引擎下运行的，选择视频后，可预览视频，可获取视频缩略图，可获取视频时长。不要自动提高下载积分了。
模仿淘宝产品图片左右切换js特效代码
12-13
模仿淘宝产品图片左右切换js特效代码，就像淘宝商城浏览产品展示那样，有缩略图，大图，鼠标放上去显示大图（放大镜效果）
仿淘宝点小图预览大图效果
04-27
准确的描述了仿淘宝上点击小图预览可以大图的效果。
完全css实现缩略图鼠标移上去显示大图
通吃互联网
11-24 357
&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 6604
先做好设计好图片宽度1920像素高度750像素高度随意,然后把图片上传淘宝空间素材里面如图 打开装修页面一秒美工，工具，把复制好的图片地址粘贴到如图所示 点击生成代码，点击就可以进行复制。 打开装修后台首页的界面，左侧有个自定义内容模块把拖入到右侧地方。 然后把复制好的生成粘贴到编辑器文本框中，然后点击确定即可。 淘宝生成器在线制作 淘宝1920全屏代码 淘宝自定义全屏代码 淘...
javascript实现 京东淘宝等商城的商品图片大图预览功能
aikouhui4965的博客
01-15 537
　　在京东和淘宝等购买东西的时候，我们会经常预览左侧商品展示图片，把鼠标放到原图，右侧就会有个大图显示出细节。本文将带领大家写一个这样简单的功能！ 一、实现原理 当鼠标移入某一图片内部时，图片上部会出现一个类似于扫描的框，这个框内的图片部分，会以方大形式展示在右边，如下图： 从图中可以推测出一下几点： 图片img上层会有一个父元素（如‘div’），在鼠标移入时，父元素内部添加...
安卓网络视频生成缩略图
最新发布
09-08
### 回答1： 在安卓平台上，可以使用ffmpeg库来生成网络视频的缩略图。以下是一个简单的代码示例： ```java private void generateThumbnail(String videoUrl) { FFmpegMediaMetadataRetriever retriever = new FFmpegMediaMetadataRetriever(); retriever.setDataSource(videoUrl); // 获取视频时长 String durationStr = retriever.extractMetadata(FFmpegMediaMetadataRetriever.METADATA_KEY_DURATION); long duration = Long.parseLong(durationStr); // 获取第一帧的缩略图 Bitmap bitmap = retriever.getFrameAtTime(0); // 缩放图片 int width = bitmap.getWidth(); int height = bitmap.getHeight(); float scale = Math.min(200f / width, 200f / height); Matrix matrix = new Matrix(); matrix.postScale(scale, scale); Bitmap thumb = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true); // 保存缩略图 String thumbPath = getApplicationContext().getCacheDir().getPath() + "/thumb.jpg"; try (FileOutputStream out = new FileOutputStream(thumbPath)) { thumb.compress(Bitmap.CompressFormat.JPEG, 90, out); } catch (IOException e) { e.printStackTrace(); } retriever.release(); } ``` 其中，FFmpegMediaMetadataRetriever是一个基于ffmpeg库的多媒体元数据获取器，可以用来获取视频的各种信息，包括时长、帧率等等。通过调用getFrameAtTime()方法可以获取视频的第一帧缩略图。最后，通过Bitmap对象的createBitmap()方法和compress()方法可以对缩略图进行缩放和保存。 ### 回答2： 安卓平台上生成网络视频的缩略图可以通过使用Android系统自带的MediaMetadataRetriever类来实现。 首先，我们需要在AndroidManifest.xml文件中添加读取网络和本地存储的权限： <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> 然后，在生成缩略图的Activity中，我们可以使用以下代码来获取网络视频的缩略图： ```java String videoUrl = "网络视频的URL"; // 替换为你要获取缩略图的网络视频地址 Bitmap thumbnail = null; // 创建 MediaMetadataRetriever 对象 MediaMetadataRetriever retriever = new MediaMetadataRetriever(); try { // 设置要获取缩略图的视频地址 retriever.setDataSource(videoUrl, new HashMap<>()); // 获取第一帧的缩略图 thumbnail = retriever.getFrameAtTime(0); } catch (IllegalArgumentException e) { e.printStackTrace(); } finally { // 释放资源 retriever.release(); } // 在这里可以将缩略图显示在ImageView上或保存到本地 // imageView.setImageBitmap(thumbnail); // saveThumbnailToLocal(thumbnail); ``` 上述代码中，首先创建了一个MediaMetadataRetriever对象，然后使用setDataSource方法设置要获取缩略图的视频地址。接着，调用getFrameAtTime方法即可获取第一帧的缩略图。 获取到缩略图后，你可以选择将其显示在ImageView上或保存到本地。可以使用imageView.setImageBitmap方法将缩略图显示在ImageView上，或者编写一个saveThumbnailToLocal方法将缩略图保存到本地存储中。 需要注意的是，上述代码需要在后台线程中执行，以避免阻塞主线程。可以使用AsyncTask或其他异步方式执行该代码。 总结起来，要在安卓平台上生成网络视频的缩略图，可使用Android系统的MediaMetadataRetriever类来实现，通过设置要获取缩略图的视频地址并调用getFrameAtTime方法来获取第一帧的缩略图。最后，将缩略图显示在ImageView上或保存到本地即可。 ### 回答3： 在安卓系统中，我们可以使用一些库和技术来生成网络视频的缩略图。 首先，我们需要使用一个网络视频加载库，例如播放器库ExoPlayer或VideoView来加载网络视频。这些库提供了方便的接口来加载和处理网络视频。 一旦视频加载完成，我们可以使用Android的MediaMetadataRetriever类来提取视频的元数据。通过使用该类的getFrameAtTime()方法，我们可以获取视频的指定时间点的帧图像，并将其作为缩略图。 生成缩略图的过程可以通过以下步骤完成： 1. 初始化网络视频加载库，加载网络视频。 2. 在视频加载完成后，使用MediaMetadataRetriever类提取视频元数据。 3. 设定要提取缩略图的时间点，使用getFrameAtTime()方法获取该时间点的帧图像。 4. 将获取到的帧图像进行缩放和裁剪，生成所需的缩略图。 5. 可选择将缩略图保存到本地文件，以便之后使用。 需要注意的是，由于网络视频的大小和加载时间可能会有所不同，生成缩略图的效率和质量也可能会受到影响。为了更好的用户体验，可以考虑使用异步操作或后台线程来处理缩略图生成的过程。 总之，通过使用安卓的网络视频加载库和MediaMetadataRetriever类，我们可以方便地生成网络视频的缩略图并进行进一步处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值