目的
鼠标滑过SVG元素时SVG随机伸缩,后恢复原状(各100ms)
实现代码
<style>
div{
transform: rotate(180deg);//旋转外层DIV 180°使SVG伸缩方向上下颠倒
transform-origin: 50% 50%;
display: inline-block;
}
g.rect_group rect{
transition: all 0.1s ease;//定义SVG变换时间
}
</style>
<body>
<div>
<svg height="300" width="300">
<g class="rect_group" fill="#B9D6E8">//SVG组
<rect height="100" width="20"/>
<rect x="25" height="100" width="20"/>
<rect x="50" height="100" width="20"/>
<rect x="75" height="100" width="20"/>
<rect x="100" height="100" width="20"/>
</g>
Sorry, your browser does not support inline SVG.
</svg>
<div>
<script type="text/javascript">
$(document).ready(function(){
var randomHeight=function($ele){
$ele.data("this_height",$ele.attr("height"));//写入原高度到元素的.data对象
$ele.attr("height",Math.floor((Math.random()+0.5)*parseInt($ele.data("this_height"))));//随机伸长/缩短
setTimeout(function(){
$ele.attr("height",$ele.data("this_height"));
},100);//100ms后恢复原状
}
$(".rect_group rect").on("mouseover",function(){//注册时间
randomHeight($(this));
});
})
</script>
</body>
问题
这段代码在本地实现得很好,但搬到服务器上就无法绑定,元素的event listener也为空,求解?
<style>
div{
transform: rotate(180deg);//旋转外层DIV 180°使SVG伸缩方向上下颠倒
transform-origin: 50% 50%;
display: inline-block;
}
g.rect_group rect{
transition: all 0.1s ease;//定义SVG变换时间
}
</style>
<body>
<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
<div>
<svg height="300" width="300">
<g class="rect_group" fill="#B9D6E8">//SVG组
<rect height="100" width="20"/>
<rect x="25" height="100" width="20"/>
<rect x="50" height="100" width="20"/>
<rect x="75" height="100" width="20"/>
<rect x="100" height="100" width="20"/>
</g>
Sorry, your browser does not support inline SVG.
</svg>
<div>
<script type="text/javascript">
$(document).ready(function(){
var randomHeight=function($ele){
$ele.data("this_height",$ele.attr("height"));//写入原高度到元素的.data对象
$ele.attr("height",Math.floor((Math.random()+0.5)*parseInt($ele.data("this_height"))));//随机伸长/缩短
setTimeout(function(){
$ele.attr("height",$ele.data("this_height"));
},100);//100ms后恢复原状
}
$(".rect_group rect").on("mouseover",function(){//注册时间
randomHeight($(this));
});
})
</script>
</body>
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。