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系统的样式.网传主要有以下功能:■弹出的窗口有很漂亮的阴影效果.■关联的对象(就 ...
随机推荐
- 002_JS基础_JavaScript基础语法01
2.1 注释 单行注释: 在某一行使用"//"(两条斜线)可以把斜线之后的内容进行注释:多行注释: 使用"/* 这是要注释的内容 */"可以进行多行注释: /* ...
- 转- 在ubuntu下安装Nginx
一. 安装包安装 1.1 安装Nginx $sudo apt-get install nginx Ubuntu安装之后的文件结构大致为: 所有的配置文件都在/etc/nginx下,并且每个虚拟主机已经 ...
- Flask-SQLAlchemy
Flask-SQLAlchemy SQLAlchemy 一. 介绍 SQLAlchemy是一个基于Python实现的ORM框架.该框架建立在 DB API之上,使用关系对象映射进行数据库操作,简言 ...
- 创建jedis对象
1.先在taotao-parent的pom.xml中复制 以下内容到rest的pom.xml中 <!-- Redis客户端 --> <dependency> <group ...
- 空数组在以下三种遍历中均不可更改：forEach、map和for...in
首先,我们要知道对于forEach.map和for...in三种遍历,在不是空数组的情况下,要想实现更改原数组的方法,代码如下: var list = [1,2,3,4]; var list1 = [ ...
- WPF 实现新手指引功能 DEMO
需求 1.接口化.其他人实现接口就行 2.动态定位到visualTree中任意控件位置,即随意只显示任何部位 3.指示文本控件和箭头控件随意更改(位置,大小,高度,偏移等基本属性) 4.抽出主题 [d ...
- bat脚本设置系统环境变量即时生效
关于bat的资料多但零碎,记录一下. 1.设置环境变量即时生效:通过重启explorer来实现即时生效(亲测有效) @echo off set curPath=%cd% wmic ENVIRONMEN ...
- phpmyadmin 自动登录的办法
在本地开发php项目中,需要配合使用mysql在线管理系统phpmyadmin,因为经常使用,就不想每次都输入密码,所以想办法把用户名密码写入配置文件中,让每次都可以自动登录. 工具/原料 代码编 ...
- Anaconda入门教程
Anaconda入门教程 [TOC] Anaconda是什么 Anaconda附带了 conda.Python 和 150 多个科学包及其依赖项.应用程序 conda 是包和环境管理器.Anacond ...
- PostgreSQL 的 distinct on 的理解
摘录自:http://www.cnblogs.com/gaojian/archive/2012/09/05/2671381.html 对于 select distinct on , 可以利用下面的例子 ...