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系统的样式.网传主要有以下功能:■弹出的窗口有很漂亮的阴影效果.■关联的对象(就 ...
随机推荐
- 编写Qt Designer自定义控件
一)流程概述 在使用Qt Designer设计窗体界面时,我们可以使用Widget Box里的窗体控件非常方便的绘制界面,比如拖进去一个按钮,一个文本编辑器等.虽然Qt Designer里的控件可以满 ...
- org.springframework.expression.spel.SpelEvaluationException: EL1004E: Method call: Method service() cannot be found on com.my.blog.springboot.thymeleaf.util.MethodTest type
前言 本文中提到的解决方案,源码地址在:springboot-thymeleaf,希望可以帮你解决问题. 至于为什么已经写了一篇文章thymeleaf模板引擎调用java类中的方法,又多此一举的单独整 ...
- [Haskell] 为什么列表操作++很昂贵？
博主是haskell新手.学习haskll的时候遇到了一些问题,在寻求答案的过程中产生了一些思考,可能理解存在偏差,希望各位不吝赐教. 提出问题 <Learn you a haskell for ...
- 使用TensorFlow中的Batch Normalization
问题 训练神经网络是一个很复杂的过程,在前面提到了深度学习中常用的激活函数,例如ELU或者Relu的变体能够在开始训练的时候很大程度上减少梯度消失或者爆炸问题.但是却不能保证在训练过程中不出现该问题, ...
- backbone 要点知识整理
1.backbone 是个mvc的库,官方文档说它是个库,而不是个框架.库和框架的区别就是,库只是个工具,方便你的项目应用,不会改变你的项目结构,而框架会有一套自己的机制,项目需要遵循框架的设计来实现 ...
- meterpreter_paranoid_mode.sh允许用户安全上演/无级连接Meterpreter经检查合格证书的处理程序正在连接到
刚刚看完即刻安全大咖的新姿势感觉很6逼,结果成功了meterpreter_paranoid_mode.sh允许用户安全上演/无级连接Meterpreter经检查合格证书的处理程序正在连接到. 我们开始 ...
- [bzoj4098] [Usaco2015 Open]Palindromic Paths
DP.. f[i][j][k]表示左上结束节点是第i条副对角线上的第j个点,右下结束节点是第n*2-i条副对角线上的第k个点,构成回文的方案数. i那维滚动一下.时间复杂度O(n^3)空间复杂度O(n ...
- Vue.js实现一个SPA登录页面的过程
技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理 一般过程 在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cooki ...
- 【C#】数据库脚本生成工具（二）
年C#研发的数据库文档生成工具,给之后的工作带来了便利.近日,又针对该工具,用WinForm开发了数据库脚本生成工具-DbExcelToSQL. 下面数据库文档生成工具效果图: 感兴趣的朋友可以看下[ ...
- 让BLE设备的名称包含MAC地址
对于研发和测试BLE来说,经常看到同名的设备,是极为不方便的,一大堆设备同时上电会让同事不知道哪一个设备才是自己真正想操作的目标.再说一下小米手环,家中有三支小米手环,打开设备搜索全是“MI”,都不知 ...