“鼠标精灵”JS代码片段

最新推荐文章于 2024-04-19 12:37:22 发布

fredtaylor

最新推荐文章于 2024-04-19 12:37:22 发布

阅读量695

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： function javascript

本文链接：https://blog.youkuaiyun.com/fredtaylor/article/details/3251070

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

这篇博客分享了一段JavaScript代码，用于创建一个名为'鼠标精灵'的效果。当鼠标悬停在图片上时，图片会逐渐展开，离开时则逐渐收起。代码中定义了一个GGsliceContent类，实现了滑动的上滑和下滑功能，并通过GGSCI_config配置参数进行定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div></div>
    <div style="overflow:hidden;">
    <a href="#"><img src="http://stat.uuu9.com/stat/shouye/UploadSoftPic/200811/20081106141821739.jpg" /></a>
    </div>
<script type=text/javascript>
var GGsliceContent=function(a){this.config=a;this.startPlay=false;this.init()};GGsliceContent.prototype={init:function(){document.getElementById("sliceConten").innerHTML=this.config.source.src.innerHTML;var a=this},execute:function(){var a=this;if(this.startPlay==true){a.sliceDown(a.config.min);setTimeout(function(){a.sliceUp(a.config.max);document.getElementById("sliceConten").onmouseover=function(){clearTimeout(a.setTime);a.sliceDown(a.curHeight())};document.getElementById("sliceConten").onmouseout=function(){clearTimeout(a.setTime);a.sliceUp(a.curHeight())}},this.config.time*1000)}else{document.getElementById("sliceConten").style.height=this.config.min;document.getElementById("sliceConten").onmouseover=function(){clearTimeout(a.setTime);a.sliceDown(a.curHeight())};document.getElementById("sliceConten").onmouseout=function(){clearTimeout(a.setTime);a.sliceUp(a.curHeight())}}},sliceUp:function(i){var a=this;if(i>this.config.min){i=i-6;document.getElementById("sliceConten").style.height=i+"px";this.setTime=setTimeout(function(){a.sliceUp(i)},40)}else{}},sliceDown:function(i){var a=this;document.getElementById("sliceConten").style.display="";if(i<this.config.max){i=i+6;document.getElementById("sliceConten").style.height=i+"px";this.setTime=setTimeout(function(){a.sliceDown(i)},40)}else{}},curHeight:function(){return parseInt(document.getElementById("sliceConten").offsetHeight)}}</script><SCRIPT language="javascript">var GGSCI_config={min:30,max:60,time:10,source:{src:document.getElementById("sliceConten"),width:960,height:60}};var GGSCI_1=new GGsliceContent(GGSCI_config);GGSCI_1.execute();</SCRIPT>
<div></div>  