帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 九宫格鼠标悬停放大缩小
九宫格鼠标悬停放大缩小
浏览:667次
-
评论:0次
-
发布时间:2017-09-25
Html
Css
Js
* { padding:0; margin:0; } #ulList { position:relative; width:366px; margin:0 auto; } #ulList li { list-style:none; width:100px; height:100px; background:#c00; border:1px solid black; float:left; margin:10px; }
window.onload = function() { var oUl = document.getElementById('ulList'); var aLi = oUl.getElementsByTagName('li'); var i = 0; var initzIndex = 2; /*注意这里必须用两个for循环,首先给每个li添加了left和top值,在使他们的position=absolute,如果用一个for就会使所有li重叠在一起*/ for (i = 0; i < aLi.length; i++) { aLi[i].style.left = aLi[i].offsetLeft + 'px'; aLi[i].style.top = aLi[i].offsetTop + 'px'; } for (i = 0; i < aLi.length; i++) { aLi[i].style.position = 'absolute'; // 因为上面aLi[i].offsetLeft获取的值本身就已经包括了margin的值,所以这里需要将style里margin清零 aLi[i].style.margin = '0'; aLi[i].onmousemove = function() { this.style.zIndex = initzIndex++; startMove(this, { width: 200, height: 200, marginLeft: -50, marginTop: -50 }); } aLi[i].onmouseout = function() { startMove(this, { width: 100, height: 100, marginLeft: 0, marginTop: 0 }); } } } function getStyle(obj, attr) { return window.getComputedStyle ? window.getComputedStyle(obj, false)[attr] : obj.currentStyle[attr]; } function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function() { var bStop = true; for (attr in json) { // 1. 取得当前的值(可以是widht,height,opacity等的值) var objAttr = 0; if (attr == "opacity") { objAttr = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { objAttr = parseInt(getStyle(obj, attr)); } // 2.计算运动速度 var iSpeed = (json[attr] - objAttr) / 10; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); // 3. 检测所有运动是否到达目标 if (objAttr != json[attr]) { bStop = false; } if (attr == "opacity") { obj.style.filter = 'alpha(opacity:' + (objAttr + iSpeed) + ')'; obj.style.opacity = (objAttr + iSpeed) / 100; } else { obj.style[attr] = objAttr + iSpeed + 'px'; // 需要又.属性名的形式改成[] } } if (bStop) { // 表示所有运动都到达目标值 clearInterval(obj.timer); if (fn) { fn(); } } }, 10); }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>九宫格鼠标悬停放大缩小-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轮播图代码
JS中获取时间new date()的用法
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
667
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值