腾讯网微博每日天气的动态向右滑动伸展效果

稿源：互联网 2018-09-21 23:48:36 点击： 10124 撤稿纠错

腾讯网微博右边的那个每日天气栏目，有个这样的效果。大家可以借鉴一下本例网页特效来学习制作。

以下讨论的是和腾讯微博天气滑动相关的腾讯网微博每日天气的动态向右滑动伸展效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>仿腾讯微博的每日天气效果</title>
<style type="text/css">
 .weather{width:500px;height:100px;margin:0 auto;position:relative;color:#fff;text-align:center;overflow:hidden;}
 .weather_main{width:99px;border-right:solid 1px #fff;float:left;background:#F03;text-align:center;position:relative;z-index:2;}
 .weather_main strong{line-height:100px;}
 .weather_main strong a{border-bottom:solid 2px #fff;cursor:pointer;}
 .alert{width:400px;height:100px;position:absolute;left:-400px;top:0;background:#F03;}

</style>
<script src="http://www.alixixi.com/script/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
   $(".weather_main").hover(function(){
      $(".alert").animate({left:"100px"},1000);
      return false;
    },function(){
      $(".alert").animate({left:"-400px"},1000);
      return false;
     })
  })
</script>
</head>

<body>
 <div class="weather">
     <div class="weather_main">
         <strong><a>深圳</a></strong>
        </div>
        <div class="alert">
         <p>如果云知道，多想凉风来做伴~</p>
   <p><a>提醒好友</a></p>
        </div>
    </div>
</body>
</html>

关于腾讯网微博每日天气的动态向右滑动伸展效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018092183700.shtml方便下次再访问哦。

·上一篇： 仿花瓣网顶部始终浮动在顶部的导航特效代码
·下一篇： jquery实现静态HTML分页特效代码展示

腾讯网微博每日天气的动态向右滑动伸展效果

文章分类LIST >>返回首页

最新游戏

最新新闻