点击图片出现图片(以弹框方式显示)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="js/layer/skin/layer.css" />
<script type="text/javascript" src="js/jquery-2.1.0.min.js" ></script>
<script type="text/javascript" src="js/layer/layer.js" ></script>

</head>
<body>

<div id="div1">
<img  src="img/123.jpg"/>
<img  src="img/135.jpg"/>
<img src="img/123.jpg"/>
<img  src="img/2.jpg"/>
<img  src="img/4.jpg"/>

</div>


<script>

$(document).ready(function(){

       //jquery方式

$('#div1 img').on('click', function(){
  layer.open({
  type: 1,
  title: false,
  closeBtn: 0,
  shadeClose: true,
  skin: 'yourclass',
  content: "<img src="+$(this).attr("src")+ "/>"
  });

});

      //layer内置组件  layer.photos(option)-相册层    具体看layer官方API

  1. layer.ready(function(){ //为了layer.ext.js加载完毕再执行
  2. layer.photos({
  3. photos: '#layer-photos-demo'
  4. ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
  5. });
  6. });

})



</script>
</body>
</html>
UniApp 是一种基于 Vue.js 的跨平台应用架,它允许开发者编写一套代码生成兼容 iOS、Android、Web 和 H5 等多种平台的应用。在 UniApp 中,如果你想要实现点击图片出一个新的图片预览或者选择图片的界面,可以使用它的 Image 组件配合 Popover 组件来完成。 首先,你需要在页面上添加一个 Image 组件,并设置 `src` 属性为图片路径: ```html <view class="image-container"> <image :src="imageUrl" @click="openImagePicker"></image> </view> ``` 然后,在 JavaScript 或者 TypeScript 部分,定义 openImagePicker 方法以及 Popover 组件的数据和方法: ```javascript export default { data() { return { imageUrl: '', popoverVisible: false, }; }, methods: { openImagePicker(e) { this.popoverVisible = true; // 这里假设你有一个全局的 ImagePicker API 或者封装好的插件 this.$refs.imagePicker.open(); }, handleImageSelect(result) { if (result && result.localId) { this.imageUrl = result.localId; // 设置选中的图片路径到 image 组件 } this.popoverVisible = false; }, }, components: { ImagePicker: { // 这里假设 ImagePicker 是一个自定义组件,用于展示并处理图片选择 }, }, }; ``` 当用户点击图片时,`openImagePicker` 方法会被触发,显示 Popover 组件,用户可以选择图片后,`handleImageSelect` 方法会被调用处理选择结果。记得在实际项目中替换 `ImagePicker` 为实际使用的图片选择组件。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值