怎么用js实现图片的变形

这个用css就可以解决，当然css能解决的js基本都能解决。

首先css：

左边图片设置关键css属性（其他属性你自己补充）：

①透明度：filter: Alpha(Opacity=50)opacity:0.5兼容火狐和IE，

②Z轴顺序（要小于右边图像）：z-index: 1也可以不设置；

③定位，固定大小：position: relative(或absolute)left: 100pxtop:100pxwidth:100pxheight:80px

右边图片设置关键css属性（其他属性你自己补充）：

①Z轴顺序（要保证大于左边图像的Z轴顺序）：z-index: 2

②定位，固定大小：position: relative(或absolute)left: 40pxtop:100pxwidth:100pxheight:80px

js实现的话就稍微复杂一点，如果你懂jQuery也许还能容易点，所以就不写了，太多代码，

因为css就可以解决，那么你就用css实现吧。

至于你是否要实现矩形图像变成梯形图片，我肯定的说也是可以做到的，

就比如：flip.js，这是个翻牌效果，他在翻牌的时候就是矩形到梯形，梯形回矩形。

1．在同一个div中，编写如下图所示的一段代码，并在这段代码中设置dive的宽度和高度，以便文本具有特定的范围。

2．找到背景，如下图所示，添加背景后的图像作为背景图案。

3．在后台添加url（）。为了连接图像，在url中写入背景图像的路径。

4．你可以把你最喜欢的图片根据你的个人喜好。你必须把正确的路径写在这里。

5．这样，保存后的文本将覆盖在图片的顶部。

1、在微信开发者工具中，打开app.json文件，在pages数组中增加show.wxml页面相关文件的代码，以加粗显示，代码如下：

{

"pages":[

"pages/index/index",

"pages/show/show",

"pages/logs/logs"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#ccc",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle":"black"

}

}

2、在index.wxml文件中，在类为usermotto的view组件中添加绑定属性catchtap='enterShow'，以加粗显示，代码如下：

<!--index.wxml-->

<view class="container">

<view class="userinfo">

<button wx:if="{{!hasUserInfo &&canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取头像昵称 </button>

<block wx:else>

<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

<text class="userinfo-nickname">{{userInfo.nickName}}</text>

</block>

</view>

<view class="usermotto" catchtap='enterShow'>

<text class="user-motto">{{motto}}</text>

</view>

</view>

3、在index.js文件中，将data中motto的值改为“点击进入”。编写实现跳转的自定义函数enterShow，加粗显示，代码如下：

//index.js

//获取应用实例

const app = getApp()

Page({

data: {

motto: '点击进入',

userInfo: {},

hasUserInfo: false,

canIUse: wx.canIUse('button.open-type.getUserInfo')

},

//事件处理函数

enterShow:function(){

wx.navigateTo({

url: '../show/show',

})

4、 在show.wxml中，输入跳转后页面显示的信息，代码如下：

<view>

<text>这是跳转后的页面</text>

</view>

5、然后在index.xwml中点击测试就可以了。

说明：在上面的页面跳转自定义函数enterShow中，也可以使用wx.redirectTo实现跳转。两者的区别:redirectTo将关闭当前页面，跳转到指定页面，页面左上角没有返回的箭头按钮；而navigateTo将保留页面，跳转到指定页面，页面左上角有返回的箭头按钮。

扩展资料

其实在小程序后台很早就有个wx.openUrl的函数，普通开发者没有调用权限，这次微信给自家的小程序开放权限，旨在测试这一功能可能的风险。因为这一功能如果全部开放，将会给小程序用户带来很大的安全隐患。居心不良的开发者可能会将用户引流至一些不安全页面。

小程序的审核难度也会变得很大。因为微信除了审核小程序本身的页面跳转和内容，还需要审核外链的链接，并且还不一定能够审核清楚。

---