热知识

ftl是Freemarker模板的文件后缀名
Freemarker其实是一种比较简单的网页展示技术,说白了就是网页模板和数据模型的结合体
当鼠标指针穿过元素时，会发生 mouseenter 事件
当鼠标指针离开元素时，会发生 mouseleave 事件

原来的效果

原来的代码

js文件：

function change_photo()
{$("#user_photo").bind('mouseenter',function(){$("#change_photo").css({display: "block"})});$("#user_photo").bind('mouseleave',function(){$("#change_photo").css({display: "none"})});
}

ftl文件：

<div id="user_photo"><#if hsh_stu.headPic??><img id="origin_ph" src="/photo/view?filename=${hsh_stu.headPic}" alt="大头像"> <#else><img id="origin_ph" src="/home/imgs/2shoujie_web_logo.png"></#if><img id="change_photo" src="/home/imgs/person_hover.png" alt="更换头像" style="display: none;">
</div>

修改后的代码

js文件：

function change_photo()
{$("#user_photo").bind('mouseenter',function(){$("#origin_ph").attr('src',$("#change_photo").attr('src'));});$("#user_photo").bind('mouseleave',function(){$("#origin_ph").attr('src',$("#origin_ph").attr('old-src'));$("#change_photo").css({display: "none"})});
}

ftl文件：

<div id="user_photo"><#if hsh_stu.headPic??><img id="origin_ph" src="/photo/view?filename=${hsh_stu.headPic}" old-src="/photo/view?filename=${hsh_stu.headPic}" alt="大头像"> <#else><img id="origin_ph" src="/home/imgs/2shoujie_web_logo.png" old-src="/home/imgs/2shoujie_web_logo.png"></#if><img id="change_photo" src="/home/imgs/person_hover.png" alt="更换头像" style="display: none;">
</div>

修改后的效果

用户中心：设置头像功能相关推荐

php设置用户头像,PHP针对多用户实现更换头像功能
一个网站,其实说白了就是某几个特定功能的组合,而更换用户头像就在这些功能之中.今天就来做个测试,针对不同的用户,实现头像上传功能. 先给大家展示下成品效果图: 思路针对不同的用户上传头像,我们要为每 ...
layui设置按钮不可点击_（eblog）7、博客发布收藏、用户中心的设置
小Hub领读: 继续我们的eblog,今天来完成博客文章收藏,用户中心的设置! 项目名称:eblog 项目 Git 仓库:https://github.com/MarkerHub/eblog(给个 s ...
android 设置头像以及裁剪功能
在android的开发过程中,经常遇到设置用户头像以及裁剪图像大小的功能.昨天我遇到了设置用户头像的功能,开始不知道怎么搞,在技术群里问也没人回答,就研究了微信.以及4399游戏中心用户设置头像的功能 ...
【Android项目实战 | 从零开始写app(十三)】实现用户中心模块清除token退出登录信息修改等功能
五一后,被ji金伤了,哇呜呜,还是得苦逼老老实实打工写代码,看下面吧本篇实现效果: 实现登录用户名展示到用户中心页面上,并且页面有个人信息,订单列表,修改密码,意见反馈发送到服务端,前面登录后,通过 ...
14、阿里云短信Demo演示、Http的Get请求和Post请求演示、httpClient工具类演示、发送短信模块搭建、搭建用户中心模块、完成user注册基本功能、验证码存入redis、短信验证码注册
阿里云短信Demo演示一.前端部分无前端. 二.后端部分 1.创建发送短信测试模块SmsSendDemo,不用使用骨架. 2.在pom文件中引入依赖坐标 <dependency>< ...
php更换wordpress用户头像,WordPress如何添加用户自定义上传头像功能
使用WordPress建站的朋友应该知道,WordPress本身是没有上传自定义头像功能的,如果要更换头像,步骤是非常麻烦的. 而在我们开发一款WordPress主题中,特别是多用户的主题,让注册用户 ...
WordPress收费下载资源插件 vip会员功能/收费下载/收费查看/联盟推广+前端用户中心支付宝/财付通/贝宝/网银/微信[更新至v9.0.2]
Foxpay是一款资源商城插件, 可以给你的用户分享一些收费资源,wordpress插件(Foxpay),经过完美测试运行于wordpress 3.0.1-4.5版本.本插件特点:高级VIP会员系统, ...
php移动商城源码,GitHub - longmix/shopmallmobile: 商城系统源代码移动商城版本，完整的服务器调用，商品展示/用户中心/订单/支付/购物车/功能齐全...
免费商城软件源代码商城系统源代码是延誉宝电商系统的移动商城版本,包含了完整的服务器调用,商品展示/用户中心/订单/支付/购物车/功能齐全. 与网上下载的各类代码和二次开发复杂商城不同,延誉宝免费商城 ...
高保真原型、动画引导、用户登录、巡检任务、维保任务、用户中心、历史记录、帮助中心、清除缓存、任务抽检、扫描二维码、待办事项、账号设置、客服信息、交互说明、手机端、小程序、app原型、BIM信息综合管理
手机端(微信小程序)高仿真原型.动画引导.用户登录.巡检任务.维保任务.用户中心.历史记录.帮助中心.清除缓存.任务抽检.扫描二维码.待办事项.账号设置.客服信息.交互说明.手机端.小程序.app原型 ...

用户中心：设置头像功能

用户中心设置头像功能（一）

热知识

原来的效果

原来的代码

修改后的代码

修改后的效果

用户中心：设置头像功能相关推荐

最新文章

热门文章