js点击图片放大预览

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#divid {
position:fixed;
z-index:2000;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
#imgid {
width:1000px;
height:500px;
}
</style>
<!-- <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script> -->
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script >
function myFunction(){
var src=$("#imgip").attr("src")
$("#imgid").attr("src",src)
$("#divid").css("display","block")
}
function myFunc(){
$("#divid").css("display","none")
}
</script>
</head>
<body>
<img id="imgip" onclick="myFunction()" src="http://localhost:8888/11.jpg"/>
<div style="display:none;" id="divid" >
<img onclick="myFunc()" src="" id="imgid" />
</div>
</body>
</html>

原文地址：https://www.cnblogs.com/ayanboke/p/11460824.html

时间： 2024-10-10 15:20:16

js点击图片放大预览的相关文章

微信小程序点击图片放大预览

微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{{images}}" > <view wx:for="{{images}}"> <image src="{{item}}" data-src="{{item}}" bindtap="previewImage

jQuery Lightbox图片放大预览

简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://hovertree.com/texiao/jqimg/6/ 效果图如下: 源码下载:http://hovertree.com/h/bjaf/hdhgnftp.htm HTML文件代码: <!DOCTYPE html> <html lang="zh"> <head

巧用weui.gallery()，点击图片后预览图片

要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是它的demo:   https://weui.io/weui.js/ 要先给图片创建一个节点: var imgDom = $("<img class='weui-jiaj-img' />"); 因为接口中取到的图片会是很多,因此,在循环图片数据的时候,要给每个图片添加一个动态的

图片放大预览（支持多张，支持双击放大）

使用方法 JZAlbumViewController *album = [[JZAlbumViewController alloc] init]; album.imgArr = self.imgsArray;//可以是图片的url字符串数组,亦可以是UIImage album.currentIndex = tap.view.tag-100; //下标 [self presentViewController:album animated:YES completion:nil]; 源码(或者去文件中

仿淘宝京东商品图片放大预览功能

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>图片放大镜效果</title> <style> *{ padding: 0; margin: 0; } body{ padding: 50px; position: relative; } .goods { width: 220px; height: 200px; position

【layui】一个简单的layui点击图片进行预览的方法

1 function previewImg(obj) { 2 var img = new Image(); 3 img.src = obj.src; 4 alert(img.src); 5 var imgHtml = "<img src='" + obj.src + "' />"; 6 //捕获页 7 layer.open({ 8 type: 1, 9 shade: false, 10 title: false, //不显示标题 11 //area:['

android GridView显示相同尺寸图片以及预览功能

项目描述: GridView加载图片,在程序中控制各个图片尺寸一致,点击图片进行预览,可以滑动切换查看不同的界面,可以手势控制图片缩放,效果图如下: 1.GridView控制每个控件大小一致 GridView中的控件大小在程序中控制,思路就是获取屏幕宽高,减去控件之间的空隙,除以每一行控件的个数,就是控件的宽,可以将控件的高设置与宽一致. 首先获取屏幕宽高 public static int screenWidth;//屏幕宽度 WindowManager windowManager = get

iOS HTML图片本地预览

1.引言 相信用过苹果手机的童鞋,会发现很多新闻类的应用,都可以实现HTML图片本地预览,那么这是如何实现的呢?本文将深入阐述其中的原理. 关于此功能,我还实现了一个DEMO,大家可以点击此访问更详细内容 2.原理 接触过web开发的人,就了解与html元素交互都是通过javascript进行的,比如点击.滑动等,比如点击标签的响应代码如下 var img = document.getElementById('test'); img.onclick = function() { do some

layui——上传图片，并实现放大预览

一般上传文件后会返回文件的路径,然后存储到数据库,那么首先实现上传后的放大和删除功能 function uploadSmallPic() { var upload = layui.upload; upload.render({ elem: '#smallPic' , url: '/upload/uploadPic' , auto: false , number: 1 , bindAction: '#uploadSmallPic' , choose: function (obj) { var fi