js点击图片查看大图，并可以拖动，且滚动滑轮放大缩小
方法一：此方法在页面没有滚动条时无法缩放
JQuery
function hideMax(){
$(".MAX_div").remove();
$("#Cover_Div").hide();
}
function showMax(url){
$("#Cover_Div").show();
var Image=function(){
return document.createElement("img");
}
var DIV=function(){
return document.createElement("div");
}
var div=new DIV();
var close_div=new DIV();
var close_img=new Image();
var img=new Image();
var _enter=false;
$(".MAX_div").remove();
div.setAttribute("class","MAX_div");
close_div.setAttribute("class","close");
close_div.setAttribute("title","点击关闭");
img.setAttribute("class","showMax");
img.src=url;
close_img.src="tpl/images/delete.png";
img.onmouseover=function(){
_enter=true;
}
img.onmouseout=function(){
_enter=false;
}
close_div.onclick=function(){
hideMax();
}
close_div.appendChild(close_img);
div.appendChild(img);
div.appendChild(close_div);
document.body.appendChild(div);
//var _z=9999;
var close=$(".close");
$(document).ready(function(){
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
var wd;//窗口
$(".showMax").click(function(){
//alert("click");//点击（松开后触发）
//this.style.cursor = "default";//鼠标形状
//this.style.zIndex = 999;
}).mousedown(function(e){
_move=true;
wd=$(this);
//this.style.cursor = "move";//鼠标形状
// this.style.zIndex = _z;//窗口层次
// _z++;
_x=e.pageX-(isNaN(parseInt(wd.css("left")))?0:parseInt(wd.css("left")));
_y=e.pageY-(isNaN(parseInt(wd.css("top")))?0:parseInt(wd.css("top")));
c_x=e.pageX-(isNaN(parseInt(close.css("left")))?0:parseInt(close.css("left")));
c_y=e.pageY-(isNaN(parseInt(close.css("top")))?0:parseInt(close.css("top")));
/* wd.fadeTo(20, 0.25); *///点击后开始拖动并透明显示
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
var closeX=e.pageX-c_x;
var closeY=e.pageY-c_y;
wd.css({top:y,left:x});//控件新位置
close.css({top:closeY,left:closeX});
}
}).mouseup(function(){
_move=false;
/* wd.fadeTo("fast", 1); *///松开鼠标后停止移动并恢复成不透明
});
});
});
//$(".showMax").mouseover(function(){
var scrollTop = $(window).scrollTop();
var initTop=scrollTop;
var screenheight = window.screen.availHeight; //获取屏幕高
$(window).scroll( function() {
scrollTop = $(window).scrollTop();;
var w=parseInt($(".showMax").css("width"));
var h=parseInt($(".showMax").css("height"));
if(scrollTop > initTop&&_enter){
$(".showMax").css({"width":w+Number(28)+"px","height":h+Number(50)+"px"});
close.css("margin-left",(w-125)<125?125:(w-125)+"px");
$(window).scrollTop(initTop);//保持滚动条距离底部0px
}
if(scrollTop <initTop&&_enter){
$(".showMax").css({"width":(w-28)<280?280:(w-28)+"px","height":(h-50)<500?500:(h-50)+"px"});
close.css("margin-left",(w-155-28)<125?125:(w-155-28)+"px");
$(window).scrollTop(initTop);//保持滚动条距离底部0px
}
//initTop=scrollTop;
});
//})
function imgdragstart(){return false;}
for(i in document.images)document.images[i].ondragstart=imgdragstart;
}
CSS
.showMax{
padding:5px;
padding-top:30px;
border-radius:3px;
position:fixed;
z-index:;
top:25%;
width:280px;
height:500px;
left:50%;
margin-left:-140px;
background-color:orange;
cursor:move;
}
.MAX_div{
}
.close{
color:#ffffff;
position:fixed;
z-index:;
width:14px;
height:14px;
top:25%;
left:50%;
margin-left:125px;
margin-top:8px;
}
li >img:hover{
border:1px solid orange;
cursor:crosshair;
}
#Cover_Div{
position: fixed;
z-index:;
width: 100%;
height: 100%;
left:;
top:;
min-width: 700px;
min-height: 740px;
opacity: 0.5;
filter: alpha(opacity = 50);
background-color: #ffffff;
display:none;
}
.cut{
font-weight:bold;
font-weight:normal\0;
font-size:18px;
height:30px;
max-height:35px;
color:#FFFFFF;
font-family:楷书;
}
Html
<img onclick="showMax('url")" src="url" style="width:288px;height:216px;" />
<div id="Cover_Div" onClick="hideMax()"></div>
方法二：
JS（其它同上）
function hideMax(){
$(".MAX_div").remove();
$("#Cover_Div").hide();
}
var _enter=false;
var scrollFunc = function (e) {
e = e || window.event;
if(_enter){
if (e&&e.preventDefault){
e.preventDefault();
e.stopPropagation();
}else{
e.returnvalue=false;
}
}
var w=parseInt($(".showMax").css("width"));
var h=parseInt($(".showMax").css("height"));
if (e.wheelDelta&&_enter) { //判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
$(".showMax").css({"width":w+Number(28)+"px","height":h+Number(50)+"px"});
$(".close").css("margin-left",(w-125)<125?125:(w-125)+"px");
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
$(".showMax").css({"width":(w-28)<280?280:(w-28)+"px","height":(h-50)<500?500:(h-50)+"px"});
$(".close").css("margin-left",(w-155-28)<125?125:(w-155-28)+"px");
}
} else if (e.detail&&_enter) { //Firefox滑轮事件
if (e.detail> 0) { //当滑轮向下滚动时
$(".showMax").css({"width":(w-28)<280?280:(w-28)+"px","height":(h-50)<500?500:(h-50)+"px"});
$(".close").css("margin-left",(w-155-28)<125?125:(w-155-28)+"px");
}
if (e.detail< 0) { //当滑轮向上滚动时
$(".showMax").css({"width":w+Number(28)+"px","height":h+Number(50)+"px"});
$(".close").css("margin-left",(w-125)<125?125:(w-125)+"px");
}
} } //给页面绑定滑轮滚动事件
if (document.addEventListener) {
//webkit
document.addEventListener('mousewheel', scrollFunc, false);
//firefox
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}else if(window.attachEvent){//IE
document.attachEvent('onmousewheel',scrollFunc);
}
function showMax(url){
$("#Cover_Div").show();
var Image=function(){
return document.createElement("img");
}
var DIV=function(){
return document.createElement("div");
}
var div=new DIV();
var close_div=new DIV();
var close_img=new Image();
var img=new Image();
$(".MAX_div").remove();
div.setAttribute("class","MAX_div");
close_div.setAttribute("class","close");
close_div.setAttribute("title","点击关闭");
img.setAttribute("class","showMax");
img.src=url;
close_img.src="img/delete.png";
img.onmouseover=function(){
_enter=true;
}
img.onmouseout=function(){
_enter=false;
}
close_div.onclick=function(){
hideMax();
}
close_div.appendChild(close_img);
div.appendChild(img);
div.appendChild(close_div);
document.body.appendChild(div);
//var _z=9999;
var close=$(".close");
$(document).ready(function(){
var _move=false;//移动标记
var _x,_y;//鼠标离控件左上角的相对位置
var wd;//窗口
$(".showMax").click(function(){
//alert("click");//点击（松开后触发）
//this.style.cursor = "default";//鼠标形状
//this.style.zIndex = 999;
}).mousedown(function(e){
_move=true;
wd=$(this);
//this.style.cursor = "move";//鼠标形状
// this.style.zIndex = _z;//窗口层次
// _z++;
_x=e.pageX-(isNaN(parseInt(wd.css("left")))?0:parseInt(wd.css("left")));
_y=e.pageY-(isNaN(parseInt(wd.css("top")))?0:parseInt(wd.css("top")));
c_x=e.pageX-(isNaN(parseInt(close.css("left")))?0:parseInt(close.css("left")));
c_y=e.pageY-(isNaN(parseInt(close.css("top")))?0:parseInt(close.css("top")));
/* wd.fadeTo(20, 0.25); *///点击后开始拖动并透明显示
$(document).mousemove(function(e){
if(_move){
var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y=e.pageY-_y;
var closeX=e.pageX-c_x;
var closeY=e.pageY-c_y;
wd.css({top:y,left:x});//控件新位置
close.css({top:closeY,left:closeX});
}
}).mouseup(function(){
_move=false;
/* wd.fadeTo("fast", 1); *///松开鼠标后停止移动并恢复成不透明
});
});
});
//禁止拖动页面图片在新窗口打开
function imgdragstart(){return false;}
for(i in document.images)document.images[i].ondragstart=imgdragstart;
}
js点击图片查看大图，并可以拖动，且滚动滑轮放大缩小的更多相关文章
- 点击图片查看大图（纯js）
$(function(){ $(".pimg").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 img ...
- [原创]WKWebview点击图片查看大图
大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...
- WKWebview点击图片查看大图
大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...
- jQuery插件——imgbox（点击图片查看大图）
需要的资源: 需要对应的js代码和css样式,大家可以通过www.htmldrive.net平台下载,也可以在我文章的底部下载.对应的资源如下,将资源引入页面(别忘了JQuery): 注意:jQuer ...
- jquery层居中,点击小图查看大图,弹出层居中代码，顶部层固定不动，滚动条滚动情况
jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...
- android开发:点击缩略图查看大图
android中点击缩略图查看大图的方法一般有两种,一种是想新浪微博list页面那样,弹出一个窗口显示大图(原activity为背景).另一种就是直接打开一个新的activity显示大图. 1.第一种 ...
- ionic中点击图片看大图的实现
在页面上显示了几张图片后,因为是手机端,图片会有点小的感觉,就想着怎么样才能让用户点击小图片看到大图呢,项目中ionic结合angularjs实现了这个功能 1.首先是三张小图上应添加一个函数,当点击 ...
- js手写图片查看器（图片的缩放、旋转、拖拽）
在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> ...
- 点击小图查看大图jQuery插件FancyBox魔幻灯箱
今日发现一个不错的JQuery插件FancyBox,也许早就有这个插件了,但是没名字,我就暂且叫他魔幻灯箱吧,采用Mac系统的样式.网传主要有以下功能:■弹出的窗口有很漂亮的阴影效果.■关联的对象(就 ...
随机推荐
- Chris Richardson微服务翻译：构建微服务之微服务架构的进程通讯
Chris Richardson 微服务系列翻译全7篇链接: 微服务介绍 构建微服务之使用API网关 构建微服务之微服务架构的进程通讯(本文) 微服务架构中的服务发现 微服务之事件驱动的数据管理 微服 ...
- 【Java】静态代码块使用
一.java静态代码块与静态方法区别一般情况下,如果有些代码必须在项目启动的时候就执行的时候,需要使用静态代码块,这种代码是主动执行的;需要在项目启动的时候就初始化,在不创建对象的情况下,其他程序来调 ...
- 【Java数据结构学习笔记之一】线性表的存储结构及其代码实现
应用程序后在那个的数据大致有四种基本的逻辑结构: 集合:数据元素之间只有"同属于一个集合"的关系 线性结构:数据元素之间存在一个对一个的关系 树形结构:数据元素之间存在一个对多个关 ...
- 将电脑文件复制到vm虚拟机中，然后安装步骤
[root@lixiaohu 桌面]# cp openssl-1.0.1f.tar.gz /usr/src /usr/src 这是复制到的路径[root@lixiaohu 桌面]# cd / ...
- vhost：一种 virtio 高性能的后端驱动实现
什么是 vhost vhost 是 virtio 的一种后端实现方案,在 virtio 简介中,我们已经提到 virtio 是一种半虚拟化的实现方案,需要虚拟机端和主机端都提供驱动才能完成通信,通常, ...
- java常量池詳解
一.相关概念 什么是常量用final修饰的成员变量表示常量,值一旦给定就无法改变!final修饰的变量有三种:静态变量.实例变量和局部变量,分别表示三种类型的常量. Class文件中的常量池在Clas ...
- Windows7下远程操作虚拟机
⒈分别查看两台物理机的IP地址 ⒉查看虚拟机的IP地址 ⒊两台物理机和虚拟机必须都要处于同一网段,上图中我已经做过了修改(每个节点都要修改,修改见步骤6 ) ⒋打开VMware,编辑虚拟机设置(每个节 ...
- 百度地图API显示多个标注点带百度样式信息检索窗口的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 关于userInteractionEnabled的属性的理解
userInteractionEnabled A Boolean value that determines whether user events are ignored and removed f ...
- C# 内置 DateTime类详解
C# 内置 DateTime类详解 摘抄自微软官方文档,用来方便自己查阅:网址:https://msdn.microsoft.com/zh-cn/library/system.datetime(v=v ...