html注释图案,jQuery图片点击弹出遮罩层标记注释特效
这是一款简单的、非常实用的jQuery图片点击弹出遮罩层标记注释特效。
HTML
html结构非常简单。使用一个portfolio作为wrapper,在里面可以添加多个portfolio_item。
...
JAVASCRIPT
首先将wrapper保存为一个jquery变量。
var $portfolio = $('#portfolio');
然后定义当图片被点击时发生的事件。我们将用图片宽度和高度来制作遮罩层的宽度和高度,为了制作遮罩层效果,需要设置它的高度、宽度、透明度和margins。
$portfolio.find('.image_wrap').bind('click',function(){
var $elem = $(this);
var $image = $elem.find('img:first');
$image.stop(true)
.animate({
'width' :'400px',
'height':'400px'
},250);
//the overlay is the next element
var opacity = '1';
if($.browser.msie)
opacity = '0.5'
$elem.next()
.stop(true)
.animate({
'width' :'500px',
'height' :'500px',
'marginTop' :'-250px',
'marginLeft':'-250px',
'opacity' :opacity
},250,function(){
//fade in the annotations
$(this).find('img').fadeIn();
});
});
接下来调用遮罩层被点击时的事件。遮罩层将消失,图片恢复到原来的大小:
$portfolio.find('.zoom_overlay').bind('click',function(){
var $elem = $(this);
var $image = $elem.prev()
.find('img:first');
//hide overlay
$elem.find('img')
.hide()
.end()
.stop(true)
.animate({
'width' :'400px',
'height' :'400px',
'marginTop' :'-200px',
'marginLeft':'-200px',
'opacity' :'0'
},125,function(){
//hide overlay
$(this).hide();
});
//show image
$image.stop(true)
.animate({
'width':'500px',
'height':'500px'
},250);
});
当用户点击了切换链接,我们将隐藏当前表单,显示用户点击的表单。这里需要动态改变表单的高度和宽度到新表单的高度和宽度。
要使用该插件制作你自己的特效,你需要制作一些透明的png图片和一些大小合适的标记注释图片。
CSS文件请参考下载文件。
html注释图案,jQuery图片点击弹出遮罩层标记注释特效相关推荐
- 基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type=&quo ...
- js ajax 点击遮罩层,jQuery弹出遮罩层效果完整示例
本文实例讲述了jQuery弹出遮罩层效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition ...
- jquery 弹出遮罩层
jquery 弹出遮罩层 点击层关闭 转载于:https://blog.51cto.com/ming358721/423505
- html 遮罩层在底部,底部弹出遮罩层.html
底部弹出遮罩层 * { padding: 0; margin: 0; } #content { position: relative; z-index: 0; height: 100vh; backg ...
- 移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究 参考文章: (1)移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究 (2)https://www.cnblogs.com/ranyon ...
- JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- js源生实现图片点击弹出放大效果
参考https://blog.csdn.net/qq_36375934/article/details/78952485 的弹出框查看大图,同时总结自己遇到的问题,做个笔记 HTML代码 <!D ...
- html中移动端遮罩层,移动端微信分享弹出遮罩层js效果_蓝戒的博客
css部分: .btonshare{ width:80%; height:50px; float:left; background:#16bb5c; margin:0 10%; margin-top: ...
- 16种css3动画弹出遮罩层
下载地址 很多种弹出层的动画效果,窗口遮罩效果很漂亮,动画使用css3实现的各式各样的效果. dd:
最新文章
- 热修复测试过程注意事项
- Python数据结构:顺序查找
- SC15 供应商质量管理工程师(武汉)
- 5Python全栈之路系列之字符串格式化
- Eclipse中移除native层编译支持
- php标记符 编译,PHP: 编译问题 - Manual
- 微机计算机继电保护原理,微机继电保护的装置构成
- 单片机原理与接口技术(ESP8266/ESP32)机器人类草稿
- android手机更改手机密码,重要提醒:手机这个密码一定要改!
- EOJ 1864 二分图匹配
- 【数据仓库】6.数据质量监控
- 地面三维激光扫描仪在火灾现场调查取证中的应用
- oracle中设置表的主键字段为自增序列(实例)
- 去哪找到高薪工作怎么找
- Nginx 记录请求 Body
- C++全套视频教程分享——
- 微信公众平台在高校教育工作中的使用
- 凑近一看是地推扫什么码
- java虚拟机年轻代的gc
- 计算机视觉实习生面试经验(微软/腾讯(AI Lab优图)/阿里巴巴)