帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» jQuery点击小图看大图
jQuery点击小图看大图
浏览:789次
-
评论:0次
-
发布时间:2017-05-10
Html
Css
Js
×
<
>
* { margin: 0; padding: 0; } body { overflow-x: hidden; } .gallery { width: 950px; margin: 10px auto; border: 1px solid #000; overflow: hidden; padding: 20px; border-radius: 15px; box-shadow: 1px 2px 3px black; } .gallery ul { list-style: none; } .gallery ul li { float: left; width: 160px; height: 86px; margin-right: 30px; margin-bottom: 30px; cursor: pointer; padding: 5px; } .BLACKCOVER { width: 100%; height: 100%; background-color: black; opacity: 0.6; position: fixed; top: 0; left: 0; display: none; } .bigShow { position: absolute; top: 38.2%; left: 50%; width: 560px; height: 300px; padding: 20px; background: white url(juhua.gif) no-repeat center center; margin-top: -150px; margin-left: -280px; box-shadow: 1px 2px 3px black; border-radius: 15px; display: none; } .bigShow span.close { position: absolute; width: 30px; height: 30px; background-color: black; color: white; border: 1px solid #000; right: -15px; top: -15px; border-radius: 50%; font-size: 30px; line-height: 30px; text-align: center; cursor: pointer; } .bigShow img { display: none; } .bigShow span.leftBtn { position: absolute; width: 60px; height: 60px; top: 50%; left: -30px; margin-top: -30px; background-color: #38C9C3; font-size: 60px; text-align: center; line-height: 60px; border-radius: 50%; cursor: pointer; } .bigShow span.rightBtn { position: absolute; width: 60px; height: 60px; top: 50%; right: -30px; margin-top: -30px; background-color: #38C9C3; font-size: 60px; text-align: center; line-height: 60px; border-radius: 50%; cursor: pointer; }
$(document).ready(function() { var $BLACKCOVER = $(".BLACKCOVER"); var $bigShow = $(".bigShow"); var $bigImg = $bigShow.children("img"); var $leftBtn = $(".leftBtn"); var $rightBtn = $(".rightBtn"); var $lis = $(".gallery ul li"); var nowimg = 0; $(".gallery>ul>li").click(function() { //让大黑布展示: $BLACKCOVER.fadeIn(); //让大图显示 $bigShow.show(); var URL = $(this).attr("data-large"); nowimg = $(this).index(); $.get(URL, function(data) { //图片已经完整请求之后,做的事情! //请求之后做的事情 //里面不用data参数。 $bigImg.attr("src", URL); $bigImg.fadeIn(); }); //让大图的src,变成你点击的li里面的data-large属性: }); //关闭业务 $(".close , .BLACKCOVER").click(function() { $BLACKCOVER.fadeOut(); $bigShow.hide(); $bigImg.hide(); }); $(".rightBtn").click(function() { nowimg++; if (nowimg > 9) { nowimg = 0; } $bigShow.animate({ "left": -560 }, 400, function() { $bigImg.hide(); $(this).css("left", 3000); $(this).animate({ "left": "50%" }, 400); //请求新的图片 var URL = $lis.eq(nowimg).attr("data-large"); $.get(URL, function(data) { //图片已经完整请求之后,做的事情! //请求之后做的事情 //里面不用data参数。 $bigImg.show(); $bigImg.attr("src", URL); }); }); }); });
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>jQuery点击小图看大图-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:jQuery图片相册简单代码实现
CSS完成计算器功能
TAB标签切换效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
789
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值