奥门巴黎人手机网址【app】

无须jQuery完毕的动画效果代码

2019-09-18 09:51·澳门巴黎人网上开户

而是随着新本子的进级换代, 体量也渐渐变大了.
24KB, Minified and Gzipped 155KB, Uncompressed Code
压缩并gzip输出24K, 也十分的大了.
借使页面上一个大致的作用,二个简练的动画就没须求载入这么大的库.
看下边那个图形渐变效果, 其实纯js不到20行就足以化解了.

弹出层在实际应用中我们平日会遇上大量的弹出层效果,下边作者来做一个基于jquery的简练的弹出层效果实例,各位朋友有意思味可参照。

jQuery达成感应鼠标动画效果自动伸长的输入框实例,jquery感应

正文实例陈说了jQuery完毕感应鼠标动画效果自动伸长的输入框。分享给我们供大家参谋。具体落实况势如下:

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery完毕感应鼠标动画效果自动伸长的输入框</title>
<script type="text/javascript" src="/images/jquery-1.4.2.min.js"></script>
<style type="text/css">
body
{
margin:0; padding:0; font-size:12px;
}
a:link {
color:#1553a9; text-decoration: none;
}
a:visited {
text-decoration:none; color: #1553a9;
}
a:hover {
text-decoration:none; color: #f46662;
}
a:active {
text-decoration: none; color:#f46662;
}
#main
{
width:500px; margin:0 auto; margin-top:100px;
}

#de
{
display:block;width:100px; height:30px; line-height:30px; float:right; border:#b7b7b7 1px solid; padding-left:5px; border-right:0;
}
#go
{
width:30px; float:right;height:22px; border:#b7b7b7 1px solid; border-left:0; padding-top:10px; padding-left:15px; background-color:#464646; cursor:pointer; color:#FFFFFF;
科技世界,}
</style>
<script type="text/javascript">
$(function(){

$("#de").mouseover(function(){
 $("#de").animate({"width":"250px"});
}).mouseout(function(){
 $("#de").animate({"width":"100px"});
});
});
</script>
</head>
<body>
<div id="main">
<div id="ss"><div id="go">→</div><input type="text" id="de"/></div>
</div>
</body>
</html>

指望本文所述对我们的jQuery程序设计有着协理。

本文实例陈述了jQuery达成感应鼠标动画效果自动伸长的输入框。分享给我们供...

body {padding:0; margin:0;} #main {margin: 50px auto;border: 1px solid #ccc;width:700px} #main img {padding:0 20px; border:none; display:none}

效果代码如下:
科技世界 1

科技世界 2 科技世界 3 科技世界 4 科技世界 5 科技世界 6 科技世界 7 科技世界 8 科技世界 9

在 弹出层 中下边是核心代码

[Ctrl+A 全选 注:如需引入外界Js需刷新手艺实施]

复制代码 代码如下:

你也许感兴趣的文章:

  • jQuery完成动画效果的实例代码
  • jQuery中贯彻动画效果的基本操作介绍
  • 听新闻说jquery的动画片效果代码
  • Jquery完结简单的动画效果代码
  • 根据Jquery的温度表动画效果
  • jQuery学习笔记之jQuery动画效果

<script type="text/javascript">
// 渐变弹出层
$(document).ready(function(){
 var speed = 600;//动画速度
 $("#race a").click(function(event){//绑定事件管理
  event.stopPropagation();
  var offset = $(event.target).offset();//撤废事件冒泡
  $("#racePop").css({ top:offset.top + $(event.target).height() + "px", left:offset.left });//设置弹出层地方
  $("#racePop").show(speed);//动画展现
 });
 $(document).click(function(event) { $("#racePop").hide(speed) });//单击空白区域遮盖
 $("#racePop").click(function(event) { $("#racePop").hide(speed) });//单击弹出层则自个儿隐敝