jquery滑动效果

最新推荐文章于 2023-09-29 09:18:52 发布

虫子68

最新推荐文章于 2023-09-29 09:18:52 发布

阅读量3.2k

点赞数

分类专栏： jQuery/otherJsLib 文章标签： jquery border callback div function class

本文链接：https://blog.csdn.net/yinyiniao/article/details/5194143

版权

jQuery/otherJsLib 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这个貌似记得在以前的wordpress上见过，设计的效果还很不错的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 1.1//EN"> <mce:script type="text/javascript" src="../jquery/jquery.js" mce_src="jquery/jquery.js"></mce:script> <mce:script type="text/javascript"></mce:script> <mce:style></mce:style><style mce_bogus="1"> div{margin: 0; padding: 0; border: 0;} h1,h2,h3,h4,h5,h6 { margin:0; padding:0;} h1 { margin: 42px 0 20px; font-size: 18px; text-align: center; } body { margin: 0 auto; width: 960px; background: #282c2f; color: #d1d9dc; font: 12px 'Lucida Grande', Verdana, sans-serif; } #layout { margin: 0 auto; width: 280px; } .text { line-height: 22px; padding: 0 6px; color:#666; } .box h3 { font-size: 12px; padding-left: 6px; line-height: 22px; background: #99CC00 url(arrow.gif) no-repeat right -17px; font-weight:bold; color:#fff; border: 1px solid #669900; height:22px; } .box h3 a { color:#fff; } .box h3 a:hover { color:#eee; } .box { position: relative; background: #363C41; border: 5px solid #4A5055; } </style> <h1>jQuery animate(params[,duration[,easing[,callback]]])</h1> <div id="layout"> <div class="box"> <h3 style="cursor:hand;" mce_style="cursor:hand;"><span>请用鼠标点击这里</span></h3> <div class="text"> animate(params[,duration[,easing[,callback]]]) 用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。隐逸鸟(yinyiniao's Blog) </div> </div> <div class="box"> <h3 style="cursor:hand;" mce_style="cursor:hand;">也可以用鼠标点击这里</h3> <div class="text"> 在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。 </div> </div> </div>