参考网上代码,自己做了一个仿QQ空间图片弹出效果,但现在还无法在弹出层切换图片。
以下是js代码:
function imageShow(which_click) {
var image_path = which_click.src;
//alert(image_path);
var tag_top = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
//创建底层灰色DIV
var index_tag = document.createElement("div");
index_tag.style.cssText = "width:100%;height:"+Math.max(document.body.clientHeight,document.body.offsetHeight,document.documentElement.clientHeight)+"px;position:absolute;background:black;top:0;filter: Alpha(Opacity=80);Opacity:0.8;";
document.body.appendChild(index_tag);
index_tag.ondblclick = closeIndexTag;
//创建图片DIV
var img_tag = document.createElement("div");
img_tag.style.cssText = "font:12px /18px verdana;overflow:auto;text-align:center;position:absolute;width:200px;border:5px solid white;background:white;color:white;left:"+(parseInt(document.body.offsetWidth)/2-100)+"px;top:"+(document.documentElement.clientHeight/3+tag_top)+"px;";
img_tag.innerHTML = "<div style='padding:10px;background:#cccccc;border:1px solid white'><img src='images/loading.gif' /><br /><br /><b style='color:#999999;font-weight:normal'>Image loading...</b><br /></div>";
img_tag.oncontextmenu = function() {
var clsOK=confirm("是否确定关闭图片显示");
if(clsOK)
closeIndexTag();
return false;
}
img_tag.onmousemove = barDidplay;
document.body.appendChild(img_tag);
//构建图片关闭按钮
var close_tag = document.createElement("div");
close_tag.style.cssText = "display:none;position:absolute;left:10px;top:10px;color:black;";
close_tag.innerHTML = "<b style='background:red;border:1px solid white;filter:Alpha(Opacity=50);Opacity:0.5;cursor:pointer;'> 关闭 </b>";
close_tag.onclick = closeIndexTag;
var img = new Image();
img.src = image_path;
img.style.cssText = "border:1px solid #cccccc;filter: Alpha(Opacity=0);Opacity:0;cursor:pointer";
img.onload = imgOK();
function imgOK() {
var temp = 0;
var stop_x = false;
var stop_y = false;
var img_tag_x = img_tag.offsetWidth;
var img_tag_y = img_tag.offsetHeight;
var img_x = img.width;
var img_y = img.height;
var scroll_x=document.documentElement.clientWidth;
var scroll_y=window.innerHeight||document.documentElement.clientHeight;
var yy = 0;
var xx = 0;
if(img_y > scroll_y || img_x > scroll_x){
yy = scroll_y - 100;
xx = (img_x / img_y) * yy;
}else{
xx = img_x + 4;
yy = img_y + 3;
}
img.style.width=xx-4+'px';
img.style.height=yy-3+'px';
var maxTime = setInterval(function() {
temp += 30;
if((img_tag_x + temp) < xx) {
img_tag.style.width = (img_tag_x + temp) + "px";
img_tag.style.left = (scroll_x - img_tag_x - temp)/2 + "px";
} else {
stop_x = true;
img_tag.style.width = xx + "px";
img_tag.style.left = (scroll_x - xx)/2 + "px";
}
if((img_tag_y + temp) < yy) {
img_tag.style.height = (img_tag_y + temp) + "px";
img_tag.style.top = (tag_top + (scroll_y - img_tag_y - temp)/2) + "px";
} else {
stop_y = true;
img_tag.style.height = yy + "px";
img_tag.style.top = (tag_top + (scroll_y - yy)/2) + "px";
}
if(stop_x && stop_y) {
clearInterval(maxTime);
img_tag.appendChild(img);
temp = 0;
imgOpacity(temp);
}
}, 1);
img_tag.innerHTML="";
img_tag.appendChild(close_tag);
}
function closeIndexTag() {
document.body.removeChild(index_tag);
document.body.removeChild(img_tag);
}
function imgOpacity(temp_imgOpacity) {
var temp = temp_imgOpacity;
temp += 10;
img.style.filter = "alpha(opacity=" + temp + ")";
img.style.opacity = temp/100;
var imgTime = setTimeout(function() {imgOpacity(temp);}, 10);
if(temp > 100)
clearTimeout(imgTime);
}
var bar_show;
function barDidplay(){
clearTimeout(bar_show);
close_tag.style.display = "block";
bar_show = setTimeout(function() {close_tag.style.display = "none"}, 1000);
}
}
分享到:
相关推荐
主要介绍了JS实现的仿QQ空间图片弹出效果代码,涉及JavaScript响应鼠标事件动态生成弹出层的相关技巧,需要的朋友可以参考下
点击图片放大并且可以左右切换代码,弹出图片渐渐出现,效果比较良好
此示例用GreyBox控件,Asp.net之DataList动态绑定图片实现仿QQ空间弹出图片效果。点击图片可以查看大图展示,图片之间的切换,有需要的朋友可以下载看看……
仿最新版QQ空间,新浪微博底部菜单(Menu)源码,该效果是Fragment+FragmentTabHost实现仿新浪微博底部菜单栏,Fragment+PopupWindow仿QQ空间最新版底部菜单栏等,仿QQ空间的底部菜单栏效果为主,仿新浪微博底部菜单栏...
事实上,qq空间的这种实现在效果上是兼容了ie和现代浏览器的,做的非常好。上面是chrome ie8 ie7 ie6就不上图片了,太卡了,都懂得,最后本屌会附上最终例子的,当然也兼容ie6。 下面就说说怎么实现的。 先看看qq
38:___图片拖拉缩放效果(仿PHOTOSHOP) 39:___图片控制内容框的文字上下翻滚 40:___图片旋转构成3D圆环的展示特效 41:___图片点击后变灰色的CSs代码 42:___图片闪烁代码 43:___图片雷达效果,像光照一样 44:___在...
2.jQuery层拖拽插件之jquery仿QQ空间的模块拖动功能插件下载 3.jQuery动感图标切换网页Tab选项卡导航代码 4.jquery封装Tab标签选项卡,内含动画版选项卡及滑动门 5.jQuery实现flash动感切换选项卡TAB插件示例 ...
可以把任意一张平面的画面转换成立体图片,无需专用立体相机,更省去了冲印胶片的繁杂工序,只需要用数码相机拍摄一张平面图像,导入电脑后,就能立即制作出一幅栩栩如生的立体画面,给人以身临其境的感觉,这样,就...
0223 怎样弹出ConnectionString设置页 148 0224 利用ADO获取DELETE后所影响的记录数 148 7.3 业务实现数据处理技术 149 0225 随机产生中奖号码 149 0226 使用快捷键保存数据 150 0227 密码只允许输入8位...
TT--仿qq+p2p通讯(nat穿透) VC++遍历文件夹自动生成目录树 对CTree控件的操作。 vc++动态链接库(dll)编程深入浅出 内含开发文档。主要是对动态链接库的教程。 vc++动态链接库编程之DLL典型实例源代码下载 VC++仿...
TT--仿qq+p2p通讯(nat穿透) VC++遍历文件夹自动生成目录树 对CTree控件的操作。 vc++动态链接库(dll)编程深入浅出 内含开发文档。主要是对动态链接库的教程。 vc++动态链接库编程之DLL典型实例源代码下载 VC++仿...
TT--仿qq+p2p通讯(nat穿透) VC++遍历文件夹自动生成目录树 对CTree控件的操作。 vc++动态链接库(dll)编程深入浅出 内含开发文档。主要是对动态链接库的教程。 vc++动态链接库编程之DLL典型实例源代码下载 VC++仿...
0223 怎样弹出ConnectionString设置页 148 0224 利用ADO获取DELETE后所影响的记录数 148 7.3 业务实现数据处理技术 149 0225 随机产生中奖号码 149 0226 使用快捷键保存数据 150 0227 密码只允许输入8位...
TT--仿qq+p2p通讯(nat穿透) VC++遍历文件夹自动生成目录树 对CTree控件的操作。 vc++动态链接库(dll)编程深入浅出 内含开发文档。主要是对动态链接库的教程。 vc++动态链接库编程之DLL典型实例源代码下载 VC++仿...
TT--仿qq+p2p通讯(nat穿透) VC++遍历文件夹自动生成目录树 对CTree控件的操作。 vc++动态链接库(dll)编程深入浅出 内含开发文档。主要是对动态链接库的教程。 vc++动态链接库编程之DLL典型实例源代码下载 VC++仿...
9:采用Messenger的弹出滑动消息提示框. 10:下载管理,虚拟文件夹. 11:自动ping. 12:连接到搜索引擎. 13:自动报告bug,建议等. 14:宏功能. 15:自动同步文件夹. 16:保存加载任务. 17:计划任务. 18:单线程下载时不能创建...
实例139 模仿QQ空间的电子相册 409 实例140 会动的七彩文字 413 实例141 模仿3D渐层效果 416 实例142 模仿QQ空间的欢迎动画 418 实例143 百叶窗效果 420 实例144 闪电效果 425 实例145 模拟放大镜效果 430 ...
用户分享商品链接到QQ空间,微信,百度,豆瓣,微博....等等都可以返积分或则现金,完美对接ecshop推荐分享功能! 2014年9月20日更新 不同会员登陆后显示对应的会员等级价格 2014.9.26 手机产品详情页选择颜色属性...