鼠标事件,JS构建的图片查看器

  1. 新建项目 项目名称:MFCBaseMessage

这是一个使用 CSS JS 构建的简易图片查看器,采用缩略图点击查看大图,可以分别显示每张图片的描述,大图显示位置采用固定宽度和高度,超出部分隐藏,点击大图可查看完全尺寸,兼容性:IE、Firefox 、Opera。

图片 1

JS部分

  1. 选择基本对话框模式,如图 ,点击完成
    图片 2
  2. 最终如图

function showPic (whichpic) {  
if (document.getElementById) {   
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {    
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {    
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}   return false;  
} else {   
return true;  
} }

图片 3

xhtml

4.右键添加类向导

<div id="album">
<div id="pic">
<img src="第一张大图的地址" alt="" id="placeholder" />
</div>
<p id="desc">第一张大图的描述</p>
<div id="thumbs">
<ul>
<li><a onclick="return showPic(this);" href="第一张大图的地址" title="">
<img src="第一张小图的地址" alt="" /></a></li>
.
.
.
</ul>
</div>
</div>

 

CSS代码见文章末端演示文件下载

 图片 4

现在的效果

5.添加鼠标事件
图片 5

因为大图显示位置是固定大小的,但图片每张大小是不一的,所以上面代码运行的结果不是理想的,还要加上点击大图查看完全尺寸的代码,这里采用不错的LightBox效果。

 

在上面JS代码中加入:

 6.在ON_LButtonDown添加如下代码:

document.getElementById('ShowLightBox').href = whichpic.href;

void CMFCBaseMessageDlg::OnLButtonDown(UINT nFlags, CPoint point)
{
 // TODO:  在此添加消息处理程序代码和/或调用默认值

 CString str;
 //ZeroMemory(&str, sizeof(CString));
 str.Format(_T("x=%d,y=%d"), point.x, point.y);


 if (MK_CONTROL &&nFlags)
 {
  str  = L"您按了ctrl键 ";
 }
 if (MK_SHIFT && nFlags)
 {
  str  = L"您按了shift键 ";
 }

 AfxMessageBox(str);
 CDialogEx::OnLButtonDown(nFlags, point);
}

lightbox需要在A标签里有个大图的地址。.
head区加入lightbox的代码。

7。查看效果
图片 6

在上面的xhtml代码中加入:

 

<div id="pic"> <a href="第一张大图的地址" rel="lightbox" id="ShowLightBox">
<img src="第一张大图的地址" alt="点击查看完全尺寸" id="placeholder" /></a>
</div>

 8.模拟发送事件

最终效果

1 void CMFCBaseMessageDlg::OnBnClickedButton2()
2 {
3     // TODO:  在此添加控件通知处理程序代码
4 
5     // 0x00010002 叉成0x0001  和   0x0002
6 
7     SendMessage(WM_LBUTTONDOWN, WM_LBUTTONDOWN, 0x00010002);
8 }

全部演示文件下载

9.查看效果

感谢hooline 和 Lokesh Dhakar

图片 7

您可能感兴趣的文章:

  • js实现为a标签添加事件的方法(使用闭包循环)
  • JS脚本实现动态给标签控件添加事件的方法
  • JavaScript使用addEventListener添加事件监听用法实例
  • 多种方法实现JS动态添加事件
  • js动态添加事件并可传参数示例代码
  • JS中动态添加事件(绑定事件)的代码
  • javascript 动态添加事件代码
  • javascript下给元素添加事件的方法与代码
  • 基于JavaScript实现移动端点击图片查看大图点击大图隐藏
  • js写的方法实现上传图片之后查看大图
  • JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动
  • JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法

 

本文由星彩网app下载发布于星彩网app下载,转载请注明出处:鼠标事件,JS构建的图片查看器

TAG标签: 星彩网app下载
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。