js 图片放大效果

最新推荐文章于 2022-06-07 22:41:44 发布
最新推荐文章于 2022-06-07 22:41:44 发布
阅读量550 收藏
点赞数
分类专栏： js 图片效果 文章标签： function layer border xhtml image javascript

 <!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<script language="JavaScript" type="text/JavaScript" >
function hideLayer()
{ 
 var layer = document.getElementById("popImageLayer");
 layer.style.visibility='hidden';
}
function dispear(){
 var layer = document.getElementById("popImageLayer");
 if ((layer.style.width>0)&& (layer.style.height>0)){
  layer.style.width-=1;
  layer.style.height-=1;
 }
 else {
  layer.style.visibility='hidden';
  if (window.interval)
  clearInterval(interval);
 }
}
function popImage(obj,img,href)
{
 var layer = document.getElementById("popImageLayer");
 var t=obj.offsetTop;
 var l=obj.offsetLeft;
 while(obj=obj.offsetParent){
  t+=obj.offsetTop;
  l+=obj.offsetLeft;
 }
 var content = "<table border=0 width=180 height=180><tr><td align='center' valign='middle'>\n"+
 "<A href="+href+" target=_blank><IMG src='"+img+"' οnlοad='DrawImage(this,180,180);'  onMouseOut='low(this);hideLayer();' onMouseOver=high(this) style='FILTER: alpha(opacity=10)'></A></td></tr></table>"; // onClick='hideLayer();'
   layer.innerHTML=content;
   layer.style.left =l + 35 -90;
   layer.style.top = t+35-90;
   layer.style.visibility='visible';
}
function moveToMouseLoc(e)
{
 var layer = document.getElementById("popImageLayer");
 var offsetX = -5;
 var offsetY = -5;
 var  x = event.x + document.body.scrollLeft;
 var  y = event.y + document.body.scrollTop;
 layer.style.left = x + offsetX;
 layer.style.top = y + offsetY;
 return true;
}
function DrawImage(img,width,height){
 if(DrawImage.arguments.length <= 1)
  width=height=70;
 var image=new Image();
 image.src=img.src;
 if(image.width>0 && image.height>0)
 {
   if(image.width>width)
   {
    rate=image.height/image.width;
    newHeight=rate*width;
    img.width=width;
    img.height=newHeight;
   }
 }
 if(img.height>height)
 {
  rate=image.width/image.height;
  newWidth=rate*height;
  img.height=height;
  img.width=newWidth;
 }
}
function DrawImage50(img){
 DrawImage(img,50,50);
}
function resetForm(){
 var f=document.frmsearch;
   f.Page.value = 1;
   f.ClassCode.value ='' ;
   f.SortType.value ='' ;  
   f.KeyWord.value='';
   f.Area.value='';
   f.MinPrice.value=f.MaxPrice.value='';
 return false;  
}  
function manualSearch(){
 var f=document.frmsearch;
   f.Page.value = 1;
  // f.ClassCode.value ='' ;
   f.SortType.value ='' ;  
   f.submit();
 return false;  
}
function checkCondition(obj) {
 return true;
}
function selectview(obj)
{
   var f=document.frmsearch;
   if ((obj.selectedIndex>0) && (obj.selectedIndex <7))
     f.SortType.value = obj.options[obj.selectedIndex].value;
 else if ((obj.selectedIndex>6) && (obj.selectedIndex <10))
     f.View.value = obj.options[obj.selectedIndex].value;
 else if ((obj.selectedIndex>9) && (obj.selectedIndex <13))
     f.PageSize.value = obj.options[obj.selectedIndex].value;
   f.submit();
 return false;  
}
function changeLocation(obj){
 var f=document.frmsearch;
   f.Area.value = obj.options[obj.selectedIndex].value;
   f.submit();
 return false;  
}
function changeViewMode(mode){
 var f=document.frmsearch;
   f.View.value = mode;
   f.submit();
 return false;
}
function changePage(page){
 var f=document.frmsearch;
   f.Page.value = page;
   f.submit();
 return false;
}
function changePageSize(pagesize){
 var f=document.frmsearch;
   f.Page.value = 1;
   f.PageSize.value = pagesize;  
   f.submit();
 return false;
}
function changeSortType(type){
 var f=document.frmsearch;
   f.Page.value = 1;  
   f.SortType.value = type;
   f.submit();
 return false;
}
function changeClassCode(code){
 var f=document.frmsearch;
   f.ClassCode.value = code;
   f.Page.value=1;
   f.submit();
 return false;
}
function high(which2){
 theobject=which2;
 highlighting=setInterval("highlightit(theobject)",40);
}
function low(which2){
 clearInterval(highlighting);
 which2.filters.alpha.opacity=40;
}
function highlightit(cur2){
 if (cur2.filters.alpha.opacity<100)
  cur2.filters.alpha.opacity+=5
 else if (window.highlighting)
  clearInterval(highlighting)
}
function delightit(cur2){
 if (cur2.filters.alpha.opacity>5)
  cur2.filters.alpha.opacity-=5;
 else if (window.highlighting)
   clearInterval(highlighting);
}
</script>
<div id="popImageLayer" align="center"  name="popImageLayer"  style="position:absolute; visibility: hidden; width: 180; height: 180;cursor: hand;border-style:solid;border-width:1pt; border-color:orange" calss=""></div>
<center>
<br /><br /><br />
<div id="090" ><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" onMouseOver="popImage(this,'http://www.google.com.hk/intl/zh-CN/images/logo_cn.png','http://wangfenglitai.mall.dangdang.com/products/G00000072867.html');" border=0>hkjhgkhk</div></a>
</center>
</body>
</html>

syayaya
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
zoomjs是一款非常实用的jQuery图片放大预览特效插件
08-10
zoom.js是一款非常实用的jQuery图片放大预览特效插件。该jquery插件可以将页面上的任何图片居中放大到图片的原来尺寸，非常适合用于制作一些小图片的大图预览效果。
js实现放大效果
weixin_30279671的博客
04-13 135
<!doctype html><html> <head> <meta charset="UTF-8"> <title>放大镜</title> <style> * { margin: 0; padding: 0 } #demo { display: bloc...
JS实现放大器效果
qq_44738313的博客
06-07 239
JS实现放大器效果，并将注释放入代码中，不懂可提问 JS样式
原生js代码实现图片放大境效果
sunqian_happy的博客
11-02 2671
采用了两张图片给两张图片设定相应的尺寸，最后显示在不同位置，最终实现放大效果。 第一种是仿照淘宝购物页面的一个放大镜效果，当鼠标移动到商品图片上时，图片上会出现一个矩形区域，而这个区域就是你要放大的区域，然后商品图片的右侧会出现一个放大后的商品图片。这种放大方式只需要你计算好放大的比例，然后通过修改放大区域的scrollLeft和scrollTop值实现相应的放大效果。 html>
js实现放大镜效果(图片放大)—JavaScript
热门推荐
原地起飞
11-10 1万+
类似于放大镜效果的图片放大效果，学到了才知道什么叫做人外有人！！！！
js实现放大镜效果
qq_65325072的博客
03-15 6323
思路： 先让mask块和bigImg块、big块隐藏，当鼠标经过pre_img就显示遮罩层mask和big块，获取鼠标当前的位置，根据“ 大图片移动距离 = 遮挡层移动距离*大图片最大移动距离 / 遮挡层最大移动距离 ”实现放大镜效果 大概思路实现图： html + css 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t...
js 图片放大缩小（动画效果）
yiwenyida的博客
09-07 1万+
javascript实现图片放大缩小（动画效果）
js放大效果（一）
十分拧巴的白某的技术博客
10-19 2723
实现效果： 很简易的，只是完成了一个简单的放大功能。 布局方面左右两个容器分别放了两个图片，右边是正常尺寸，左边是缩小版的。 遮罩层和右边的图片用了绝对定位，用left，top值来控制显示的区域 html代码： &amp;amp;lt;div class=&amp;quot;wrap&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;left&amp;quot;&amp;amp
用js实现高清放大图片效果
courageFei的博客
09-08 2888
var box = my$("box"); var small = box.children[0]; var big = box.children[1]; var mask = small.children[1]; var bigImg = big.children[0]; //鼠标进入显示遮挡层和大图div box.onmouseover = ...
js实现图片缩放
探索未知
07-31 1744
var fileinput = document.getElementById('fileinput');var max_width = fileinput.getAttribute('data-maxwidth'); var max_height = fileinput.getAttribute('data-maxheight');var preview = document.getElement
JS图片放大查看的3种方案
东成熙就
10-28 2350
JS图片放大查看的3种方案
h5 img js 点击图片放大_img点击放大的js实现
weixin_42502089的博客
02-15 3207
业务需要，从后台获取图片列表，用img标签展示，由于图片太小看不清，需要点击放大，类似如下效果：点击后放大(由于图片高度超出了页面，需要通过overflow:auto;设置滚动条，点击放大图片回到列表界面)：js实现：1、获取所有img标签，添加展开功能，该方法在图片列表加载完成以后执行：function addExpand() {var imgs = document.getElementsBy...
html5 图片虚化 js,javascript – HTML5 – Canvas,drawImage()绘制图像模糊
weixin_30994645的博客
06-04 332
我试图将以下图像绘制到画布,但尽管定义了画布的大小,但它看起来很模糊.正如您在下面所看到的,图像清晰而清晰,而在画布上,图像模糊且像素化. 它的外观如下(左边是原始的,右边是绘制的画布,模糊不清.) 我究竟做错了什么？console.log('Hello world')var c = document.getElementById('canvas')var ctx = c.getContext('...
前端JS利用canvas的drawImage()对图片进行压缩
我是谁的博客
05-27 8006
对于大尺寸图片的上传，在前端进行压缩除了省流量外，最大的意义是极大的提高了用户体验。 这种体验包括两方面： 1、由于上传图片尺寸比较小，因此上传速度会比较快，交互会更加流畅，同时大大降低了网络异常导致上传失败风险。 2、最重要的体验改进点：省略了图片的再加工成本。很多网站的图片上传功能都会对图片的大小进行限制，尤其是头像上传，限制5M或者2M以内是非常常见的。然后现在的数码设备拍摄功能都非常出众，...
js实现单击放大图片双击缩小图片的效果
qq_32526373的博客
11-06 7468
&lt; img src="test.jpg" width="100" title="单击放大，双击缩小" onclick="maxPic(event);" ondblclick="minPic(event);"&gt; var clickTimer = null; //单击放大照片 function maxPic(event){ var event = window.even
CANVAS drawImage 绘图图片模糊已解决
felicity_zll的博客
01-05 5667
Vue 中 组件命名，父组件向子组件传值props 里面元素的命名，在标签中都不识别大写，要求驼峰命名改为小写。
修改图片模糊问题canvas.drawImage
有 prepare , No out
09-16 2423
https://github.com/jondavidjohn/hidpi-canvas-polyfill
js实现图片虚化_js canvas画布实现高斯模糊效果
weixin_39891262的博客
12-19 783
最近项目中有一个需求是实现图片的局部模糊效果，看上去一个挺难的效果。在实现局部模糊效果前，首先能够实现全部模糊。经过和度娘的一番较劲后，找到了一个不错的案例，然后在他的基础上，经过一番修改，和备注，实现了当前的案例：canvas画布的高斯模糊效果var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2...
用JS控制图片大小按比例放缩或扩大图片
gaogao0603的专栏
07-09 3041
<br />第一个： 按比例扩大或缩小图片<br /><br /> <HTML> <br /> <HEAD> <br /> <TITLE> New Document </TITLE> <br /> <script language="JavaScript"> <br /> <!-- <br /> var flag=false; <br /> function DrawImage(ImgD){ <br /> var image=new Image(); <br /> image.
javascript图片放大效果
最新发布
06-05
JavaScript实现图片放大效果有很多方法，其中比较常用的是利用CSS的transform属性实现图片缩放，以及使用JavaScript的事件监听来实现鼠标悬停时图片放大的效果。以下是一种常见的实现方式： 1. HTML结构 ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值