设为首页收藏本站
切换到宽版

PHPIN.NET

 找回密码
 立即注册
PHPIN.NET»论坛 › 网页前端技术 › 网页综合特效 › 原生JS实现类似百度页面的分享效果
返回列表 发新帖
查看: 5398|回复: 0

[jQuery/Js/AJAX] 原生JS实现类似百度页面的分享效果

[复制链接]
admin

469

主题

31

回帖

5569

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5569
发表于 2015-5-28 19:46:36 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
原生JS实现类似百度页面的分享效果
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title>类似于网站的分享效果</title>
  6.     <style type="text/css">
  7.         #div1 {width:150px; height:200px;
  8.                background-color:#ff6a00;
  9.                position:absolute;
  10.                left:-150px;
  11.                top:50px;
  12.         }
  13.         #div2 {vertical-align:middle;
  14.                text-align:center;
  15.             width:20px;
  16.             height:60px;
  17.             background-color:#e64e4e;
  18.             position:absolute;
  19.             right:-20px;
  20.             top:80px;
  21.         }
  22.     </style>
  23.     <script type="text/javascript">
  24.         window.onload = function () {
  25.             var div1 = document.getElementById("div1");
  26.             var div2 = document.getElementById("div2");

  28.             div2.onmouseover=div1.onmouseover = function () {
  29.                 start(0);
  30.             };
  31.            div2.onmouseout= div1.onmouseout = function () {
  32.                 start(-150);
  33.             };
  34.         };
  35.         var time = null;
  36.         function start(target) {
  37.             var speed = 0;
  38.             if (div1.offsetLeft<target) {
  39.                 speed = 10;
  40.             }
  41.             if(div1.offsetLeft>target) {
  42.                 speed = -10;
  43.             }
  44.             if (div1.offsetLeft == target) {
  45.                 speed = 0;
  46.             }
  47.             clearInterval(time);
  48.             time = setInterval(function () {
  49.                 if (div1.offsetLeft== target) {
  50.                     clearInterval(time);
  51.                 }
  52.                 else {
  53.                     div1.style.left = div1.offsetLeft + speed + "px";
  54.                 }
  55.             }, 30);
  56.         }
  57.     </script>
  58. </head>
  59. <body>
  60.     <div id="div1">
  61.             <div id="div2">分享</div>
  62.     </div>
  63. </body>
  64. </html>
复制代码


百度分享
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2024-11-21 20:57

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表