帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» JS多图片展开收缩效果
JS多图片展开收缩效果
浏览:1028次
-
评论:2次
-
发布时间:2019-01-18
Html
Css
Js
body { margin:0; } ul { margin:0; padding:0; width:330px; margin:100px auto 0; position:relative; } li { width:100px; height:100px; background:red; float:left; list-style:none; margin:10px 0 0 10px; }
function startMove(obj, json, fn) { clearInterval(obj.iTimer); var iCur = 0; var iSpeed = 0; obj.iTimer = setInterval(function() { var iBtn = true; for (var attr in json) { var iTarget = json[attr]; if (attr == "opacity") { iCur = Math.round(css(obj, "opacity") * 100); } else { iCur = parseInt(css(obj, attr)); } iSpeed = (iTarget - iCur) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (iCur != iTarget) { iBtn = false; if (attr == "opacity") { obj.style.opacity = (iCur + iSpeed) / 100; obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')'; } else { obj.style[attr] = iCur + iSpeed + 'px'; } } } if (iBtn) { clearInterval(obj.iTimer); fn && fn.call(obj); } }, 30); } function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } window.onload = function() { var oUl = document.getElementById("ul1"); var aLi = oUl.getElementsByTagName("li"); var arr = []; var zIndex = 1; for (var i = 0; i < aLi.length; i++) { aLi[i].style.left = aLi[i].offsetLeft + "px"; aLi[i].style.top = aLi[i].offsetTop + "px"; arr.push({ left: aLi[i].offsetLeft, top: aLi[i].offsetTop }); } for (var i = 0; i < aLi.length; i++) { aLi[i].index = i; // 在用js去设置css样式的时候:在同一个代码块中,有些css样式的设置的权限要高于其他样式 // aLi[i].style.left=aLi[i].offsetLeft+"px"; // aLi[i].style.top=aLi[i].offsetTop+"px"; aLi[i].style.left = arr[i].left + "px"; aLi[i].style.top = arr[i].top + "px"; aLi[i].style.position = "absolute"; aLi[i].style.margin = "0px"; aLi[i].onmouseover = function() { this.style.background = "green"; this.style.zIndex = zIndex++; startMove(this, { width: 200, height: 200, left: arr[this.index].left - 50, top: arr[this.index].top - 50 }) } aLi[i].onmouseout = function() { this.style.background = "red"; startMove(this, { width: 100, height: 100, left: arr[this.index].left, top: arr[this.index].top }) } } }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>JS多图片展开收缩效果-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会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:多图片的展开收缩
canvas粒子特效
三级联动省份效果
讨论这个常用代码(2)
回答他人问题或分享心得会奖励牛币
Lv10 CTO
aa***on
2019年01月22日
这。。。。现在用css已经完全可以实现了,而且写起来更简单。。。。
回复
Lv4 码徒
qq***15
2020年07月24日
已经写了
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1028
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值