页面图片浏览

news/2024/10/17 14:28:26/

在页面上浏览图片，实现图片的拖放

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>位图浏览器</title>
  5. <style type="text/css">
  6. <!--
  7. #pic {
  8.     width:1000px;
  9.     height:600px;
  10.     border: 3px solid #ccc;
  11.     background-repeat: no-repeat;
  12.     background-position: 0px 0px;
  13.     cursor: pointer ;
  14. }
  15. -->
  16. </style>
  17. <script language="javascript" src="Request.js"></script>
  18. <script type="text/javascript">
  19. <!--
  20. var p = new Array();
  21. var speed = 0.05;  //速度
  22. var picWidth = 10000;  // 大图的宽高
  23. var picHeight = 10000;
  24. var x,y // 鼠标点下去时背景的坐标
  25. var x_new,y_new  //位移
  26. var haveclick = false;
  28. function getmouseposition(event)
  29. {
  30.     if(document.all)
  31.     {
  32.         x = document.body.scrollLeft+event.clientX;
  33.         y = document.body.scrollTop+event.clientY;
  34.     }else
  35.     {
  36.         x = event.layerX;
  37.         y = event.layerY;
  38.     }   
  39.     haveclick = true;
  40. }
  41. function movestop()
  42. {
  43.     haveclick = false;
  44. }
  46. function movestart(event)
  47. {
  48. if(haveclick)
  49. {
  50.     if(document.getElementById('pic').style.backgroundPosition.length==0)
  51.         {document.getElementById('pic').style.backgroundPosition="0px 0px";}
  52.     p = document.getElementById('pic').style.backgroundPosition.split(" ")
  54.     if(document.all)
  55.     {   
  56.         x_new = document.body.scrollLeft+event.clientX;
  57.         y_new = document.body.scrollTop+event.clientY;
  58.     }else
  59.     {    
  60.         x_new = event.layerX;
  61.         y_new = event.layerY;   
  62.     }
  63.     
  64.     x2 = (speed*(x_new-x)+parseInt(p[0])).toString(10);    // 计算位移量
  65.     y2 = (speed*(y_new-y)+parseInt(p[1])).toString(10);
  66.     
  67.     if (x2<-picWidth+420) x2=-picWidth+420;
  68.     if (y2>0) y2=0;
  69.     if (x2>0) x2=0;
  70.     if (y2<-picHeight+300) y2=-picHeight+300;
  72.     document.getElementById('pic').style.backgroundPosition=x2+"px "+y2+"px";
  73. }
  74. }
  76. function SetImageUrl()
  77. {
  78.     self.moveTo(0,0);
  79.     self.resizeTo(screen.availWidth,screen.availHeight);  
  81.     var IMGURL = "" ;
  82.     document.getElementById('pic').style.backgroundImage = "url("+IMGURL+")" ;
  83. }
  85. -->
  86. </script>
  87. </head>
  89. <body onload="SetImageUrl()">
  90. <TABLE width="100%">
  91. <TR>
  92. <TD align="center">
  93. <div id="pic" onmousedown="getmouseposition(event)" onmousemove="movestart(event)" onmouseup="movestop()" onmouseout="movestop()"> </div>
  94. </TD>
  95. </TR>
  96. </TABLE>
  98. </body>
  100. </html>

http://www.ppmy.cn/news/150208.html

相关文章

Js图片浏览器

Js图片浏览器

<!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>Js图片浏览器</title&…
阅读更多...
照片浏览器

照片浏览器

昨天写了个图片浏览器&#xff0c;很简单&#xff0c;主要就是用一个JFileChooser导入一个文件&#xff0c;然后在文件父目录下导入下一个 或者上一个图像。 东西做好了&#xff0c;但是还有一个问题&#xff0c;就是我界面图片的路径设置有问题&#xff0c;在打成Jar包后就不能…
阅读更多...
浏览器加载本地图片并预览

浏览器加载本地图片并预览

function imgPreview(config) {var width config.width || 200;var height config.height || 200;return {/*** ie9- 预览图片* param {type} input_file ,$(input[typefile]) 或者 $(input[typefile])[0]* param {type} callback 回掉参数为&#xff0c;$(居中的图片)* retu…
阅读更多...
【Android】简单图片浏览器

【Android】简单图片浏览器

开始重新学习Android&#xff0c;还是依照《疯狂Android讲义》。 简单图片浏览器&#xff1a; 功能&#xff1a;图片浏览器&#xff0c;点击图片可以切换。 注意&#xff1a;在res/drawable中添加p1.jpg、p2.jpg、p3.jpg。 Java代码&#xff1a; import android.support.v7.…
阅读更多...
网页图片浏览器

网页图片浏览器

公司有个需求是一个webview页面里的图片点击会放大&#xff0c;支持保存功能&#xff0c;在网上找了很多资料&#xff0c;也没用一个合适的&#xff0c;决定自己写一个&#xff0c;效果如下&#xff1a; 废话不多说&#xff0c;先上代码&#xff1a;实现代码 ####实现思路&…
阅读更多...
图片预览器

图片预览器

此预览器&#xff0c;一次只能翻页十张图片&#xff0c;开发人员可根据自己需要&#xff0c;修改前台代码。 页面代码 <% Page Language"C#" AutoEventWireup"true" CodeBehind"UpFilesAndPreview.aspx.cs" Inherits"WebFramework.Comm…
阅读更多...
chrome浏览器不能显示本地图片办法解决（图片预览）

chrome浏览器不能显示本地图片办法解决（图片预览）

近期开发项目时有个功能是实现图片预览&#xff0c;但是我将图片路径赋值给img标签的src时&#xff0c;预览的显示是这样的。 唉。我就郁闷了&#xff0c;再仔细一看&#xff0c;浏览器给我加了个路径啊。 这是什么鬼东西啊。 试了一下replace替换掉浏览器加给我的路径也不行&…
阅读更多...
图片网页浏览器

图片网页浏览器

图片网页浏览器 首先呢&#xff0c;大家需要在网上找到图片&#xff0c;然后复制图片的网址&#xff0c;记住&#xff0c;是图片网址&#xff0c;而不是当前打开的网页的网址。比如下面这两幅图就分别是我在网页看到的图片&#xff0c;以及用图片浏览器查看时的截图 下面是mai…
阅读更多...
最新文章

Copyright @ 2022~2023