- 首页 > it技术 > >
用js实现了一个简单的图片查看效果。主要功能:
1、点击图片后打开遮罩并在遮罩中显示图片，大小已做好限制，不会因为图片太大而导致出现滚动条；
2、鼠标放上图片后可以滚动放大或缩小图片；
注意:需要jquery.js和jquery.mousewheel.js的支持。
【jquery|JS实现简单的图片查看效果】js(pic-view.js)代码如下:
$(function () {
$("body").delegate(".pic-view", "click", function () {
//容器
var $container = $("");
$container.attr("id", "pic_view_container");
//遮罩层
var $mask = $("")
$mask.attr("id", "pic_view_mask");
$mask.attr("title", "点击空白处关闭");
$mask.css("position", "absolute");
$mask.css("top", 0);
$mask.css("bottom", 0);
$mask.css("left", 0);
$mask.css("right", 0);
$mask.css("width", "100%");
$mask.css("height", "100%");
$mask.css("background", "#000");
$mask.css("opacity", 0.7);
$mask.css("cursor", "pointer");
//图片
var $img = $("
文章图片
文章图片
文章图片
文章图片
