非常不错的JS鼠标滑动效果

2024-09-05 12:18:27

字体：大中小

来源：转载

供稿：网友

非常不错的JS鼠标滑动效果，分享使用jQuery实现简单动画的方法，而且也惊喜的发现，jquery有更好的书写方法，可以连写，在animate方法前加上stop方法就可实现鼠标移出后，不再执行滑动效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>非常不错的JS鼠标滑动效果</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><style>body{font-size:12px;font-family:Tahoma,Arial,Verdana;color:#fff; background:#000; width:100%; height:100%;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td ,i{padding:0;margin:0}fieldset,img {border:0}.clear{ clear:both;}address,caption,cite,code,dfn,em,th,var {font-weight:normal;font-style:normal}ol,ul {list-style:none}caption,th {text-align:left}h1,h2,h3,h4,h5,h6 {font-size:100%}abbr,acronym,img {border:0}button,input,select,textarea{font-size:100%;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}table {border-collapse:collapse;border-spacing:0;}a{text-decoration:none;}a:hover {text-decoration:underline;}.clearfix:after {visibility: hidden;display: block;font-size: 0;content: ".";clear:both;}.all ul{ width:100%; text-align:center;}.all ul li{ width:100%; height:40px; line-height:40px; border-bottom:1px dashed #990066; cursor:pointer;}</style></head><body><div class="all">                <ul>                <li>第一项</li>                <li>第二项</li>                <li>第三项</li>        </ul>        </div><script type="text/javascript">$(document).ready(function(){        $('.all ul li').mouseover(function(){                $(this).animate({"height":"70px","line-height":"70px"},100)        }).mouseleave(function(){                $(this).stop().animate({"height":"40px","line-height":"40px"},100)        });  })</script></body></html>

上一篇：jQuery仿百度分页足迹效果

下一篇：jQuery实现彩带效果的网页加载条动画

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注