教程集 > 脚本编程 > javascript > 正文感应鼠标出现滑块跟随的标签代码

感应鼠标出现滑块跟随的标签代码

发布时间：2016-10-19 编辑：jiaochengji.com

教程集为您提供感应鼠标出现滑块跟随的标签代码等资源，欢迎您收藏本站，我们将为您提供最新的感应鼠标出现滑块跟随的标签代码资源

为你提供一款感应鼠标出现滑块跟随的标签代码哦，如果你喜欢就进来看看吧。

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>感应鼠标出现滑块跟随的标签</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> #mydiv *{ margin:0; padding:0; font:100 12px/25px 'Arial'; background:transparent; } #mydiv ul{ overflow:hidden; } #mydiv ul li{ float:left; padding:0 10px; text-align:center; list-style:none; } #mydiv ul li a{ color:black; text-decoration:none; } </style> <script src="http://www.google.com/jsapi"></script> <script language="javascript"> google.load("jquery", "1.3.1"); google.setOnLoadCallback(OnLoad); function OnLoad(){ var div=$("

"); div.css({border:"2px solid red",background:'yellow',position:"absolute",left:"0px",height:"25px",width:"0px",zIndex:"1"}); $("#mydiv").prepend(div); var ul_left=$("#mydiv ul").position().left; var ul_top=$("#mydiv ul").position().top; $("#mydiv ul").css({position:'absolute',left:ul_left,top:ul_top,zIndex:'2'}); move_($("#mydiv ul li").eq(0)) function move_(elem){ div.animate({left:elem.position().left 15,width:elem.width() 4},"fast","swing") } $("#mydiv ul li").mouseover(function(){ move_($(this)) }); } </script> </head> <body> 预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。

</body> </html></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
感应鼠标出现滑块跟随的标签代码
 40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
 jquery tab标签页的制作
 HTML5的触摸事件
 鼠标的滚轮失灵怎么办？
html5 details标签的作用是什么？<details>标签的使用方法介绍(附使用实例)
jQuery 表格隔行换色鼠标高亮行变色的实现代码
 html5 canvas标签的作用以及canvas标签的历史由来介绍
 什么是canvas离屏技术？canvas放大镜效果如何实现？
CSS滑动门技术教程

上一篇：js 二级联动菜单下一篇：javasctipt 漂亮的感应鼠标导航菜单

[关闭]

感应鼠标出现滑块跟随的标签代码

最近更新

浏览排行