大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
$("ID").click(function(){
创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站制作、网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的阿克塞哈萨克族自治网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
$("弹出层ID").show();
})
弹出层:
div id="tachu"
embed src=";resourceId=0_04_05_99/v.swf" /
/div
//开始弹出层要隐藏,要弹出必须绝对定位设置css的z-index
1、首先你要先准备好small.jpg、big.jpg小图和大图;
2、然后加载jquery文件;
3、开始写效果代码。
效果代码如下:
------------------html代码------------------------
pimg class='small_img' src='small.jpg' //p
p图片实际尺寸大小:span id="small_size"/span/p
div id='big_div' style="display:none;"!-- 弹出层 --
p id="close"X/p
pimg class="big_img" src='big.jpg' //p
p图片实际尺寸大小:span id="big_size"/span/p
/div
Jquery代码:
script src="jquery文件路径"/script
script
$(document).ready(function(){
var small = $('.small_img'); //小图
var big_div = $('#big_div'); //大图弹出层
var small_size = $('#small_size'); //显示小图实际尺寸区域
var big_size = $('#big_size'); //显示大图实际尺寸区域
var smallWidth = small.width(); //小图宽度
var smallHeight = small.height(); //小图高度
var bigWidth = $('.big_img').width(); //大图宽度
var bigHeight = $('.big_img').height(); //大图高度
var small_str = smallWidth+' X '+smallHeight+' 像素';
var big_str = bigWidth+' X '+bigHeight+' 像素';
small_size.text(small_str); //显示小图片实际尺寸
small.click(function(){ //点击显示大图弹出层
big_div.show();
big_div.css({ //这里半透明样式我就不写了
'position' : 'fixed',
'left' : '0',
'top' : '0',
'background' : '#eee'
});
big_size.text(big_str);
});
$('#close').click(function(){
big_div.hide();
});
});
/script
点击弹出层的切换下一张按钮时,把弹窗的这张图片的src改成页面中下一张图片的src,点上一张也是,换上一张图片的src,这样通过改src就可以实现,或者是用这个插件,
弹不出图片来~只能弹出文本和简单的空格等反正都是文本类的,不会弹出图片~