JS は、上部のドロップダウン JavaScript スキルから表示されるアニメーション QQ カスタマーサービス特殊効果コードを実装します。-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JS は、上部のドロップダウン JavaScript スキルから表示されるアニメーション QQ カスタマーサービス特殊効果コードを実装します。

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:35 PM

js QQカスタマーサービスアニメーション上

この記事の例では、上部のドロップダウン表示からのアニメーションを使用した QQ カスタマーサービスの特殊効果コードの JS 実装について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

これは QQ オンラインカスタマーサービスコードのアニメーションバージョンです。QQ カスタマーサービスコードは、スライド終了後に Web ページの上部からプルダウンされます。世界地図を背景にすると、一気にセンスが良くなったような気がします。アニメーション効果は jq によって実現されます。QQ カスタマーサービスからの情報を変更して、独自の QQ に置き換えることができます。それを Web ページにアップロードすると、利用できるようになります。注: テストの効果は、Firefox および Chrome ブラウザーでより優れています。

実行中のエフェクトのスクリーンショットは次のとおりです:

オンラインデモのアドレスは次のとおりです:

http://demo.jb51.net/js/2015/js-top-show-down-dh-qq-online-codes/

具体的なコードは次のとおりです:

<!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>
<title>网页顶部下拉的jquery在线客服</title>
<style>
*{margin: 0px;padding: 0px;list-style: none;}
#qqlist a{text-decoration: none;color: black;font-size: 12px;display: block;line-height: 28px;vertical-align: middle;}
img{line-height: 28px;vertical-align: middle;text-align: center;padding-bottom: 6px;}
#cs{width: 100%;height: 0px;border-bottom: 3px solid red;-webkit-box-shadow: 2px 2px 2px #999;position: relative;top: 0px;-moz-box-shadow: 2px 2px 2px #999;box-shadow: 2px 2px 2px #999;}
#qqlist{position: absolute;left: -200px;top: 150px;z-index: 1;}
#qqlist ul li{width: 80px;height: 28px;margin: 10px;}
#bg{width: 918px;height: 500px;position: absolute;right: 10px;display: none;filter: alpha(opacity: 0);opacity: 0;}
#btn{width: 100px;height: 20px;margin: auto;background: red;-webkit-box-shadow: 2px 2px 2px #999;border-radius: 0 0 8px 8px;position: relative;top: 0px;-moz-box-shadow: 2px 2px 2px #999;box-shadow: 2px 2px 2px #999;}
#btn span{display: block;color: white;text-align: center;line-height: 20px;cursor: pointer;font-size: 12px;}
#foot_bm a, #foot_bm, p, p a{color: #666;position: relative;}
</style>
<script>
function startMove(obj,json,fnEnd)
{
 clearInterval(obj.timer);
 obj.timer=setInterval(function()
 {
  var bStop=true;
  for (var attr in json)
  {
   var now=0;
   if(attr=="opacity")
   {
    now=Math.round(parseFloat(getStyle(obj,attr))*100);
   }
   else
   {
    now=parseInt(getStyle(obj,attr));
   }
   var speed=(json[attr]-now)/10;
   speed=speed>0&#63;Math.ceil(speed):Math.floor(speed);
   if(now!=json[attr])bStop=false;
   if(attr=="opacity")
   {
    obj.style.filter="alpha(opacity:"+(now+speed)+")";
    obj.style.opacity=(now+speed)/100;
   }
   else
   {
    obj.style[attr]=(now+speed)+"px";
   }
  }
  if(bStop)
  {
   clearInterval(obj.timer);
   if(fnEnd)fnEnd();
  }
 }, 30)
}
function startFlex(obj,json,fnEnd)
{
 clearInterval(obj.timer);
 obj.timer=setInterval(function()
 {
  var bStop=true;
  var cur=0;
  for(var attr in json)
  {
   if(!obj.oSpeed)obj.oSpeed={};
   if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;
   cur=parseInt(getStyle(obj,attr));
   if(Math.abs(json[attr]-cur)>1 || Math.abs(obj.oSpeed[attr])>1)
   {
    bStop=false;
    obj.oSpeed[attr]+=(json[attr]-cur)/5;
    obj.oSpeed[attr]*=0.7;
    var maxSpeed=65;
    if(Math.abs(obj.oSpeed[attr])>maxSpeed)
    {
     obj.oSpeed[attr]=obj.oSpeed[attr]>0&#63;maxSpeed:-maxSpeed;
    }
    obj.style[attr]=cur+obj.oSpeed[attr]+"px";
   }
  } 
  if(bStop)
  {
   clearInterval(obj.timer);
   if(fnEnd)fnEnd();
  }
 }, 30);
}
function getStyle(obj,name)
{
 if(obj.currentStyle)
 {
  return obj.currentStyle[name];
 }
 else
 {
  return getComputedStyle(obj,false)[name];
 }
}
window.onload=function()
{
 var oCs=document.getElementById('cs');
 var oBtn=document.getElementById('btn').getElementsByTagName('span')[0];
 var oImg=document.getElementById('bg');
 var oLi=document.getElementById('qqlist').getElementsByTagName('li');
 var on=0;
 for(var i=0; i<oLi.length; i++)
 {
  oLi[i].style.left=oLi[i].offsetLeft+"px";
  oLi[i].style.top=oLi[i].offsetTop+"px";
 }
 for(var i=0; i<oLi.length; i++)
 {
  oLi[i].style.position="absolute";
  oLi[i].style.margin=0;
 }
 function showImg()
 {
  oImg.style.display="block";
  startMove(oImg,{opacity:80},function()
  {
   showQQ(350);
  });
 }
 function showQQ(iTarget)
 {
  var i=1;
  startFlex(oLi[0],{left:iTarget});
  timer=setInterval(function()
  {
   startFlex(oLi[i],{left:iTarget});
   i++;
   if(i>=oLi.length)
   {
    clearInterval(timer);
   }
  }, 20);
 }
 oBtn.onclick=function()
 {
  if(on==0)
  {
   startFlex(oCs,{height:500},function()
   {
    showImg();
    oBtn.innerHTML="CLOSE";
   });
   on=1;
  }
  else
  {
   showQQ(-200);
   timer2=setInterval(function()
   {
    startMove(oImg,{opacity:0},function()
    {
     oImg.style.display="none";
     startMove(oCs,{height:0});
    })
    if(oCs.style.height==0+"px")
    {
     clearInterval(timer2);
     oBtn.innerHTML="CONTACT US";
    }
   },500); 
   on=0;
  }
 }
}
</script>
</head>
<body>
<div id="cs">
 <div id="qqlist">
  <ul>
   <li><a target="_blank" href="http://wpa.qq.com/msgrd&#63;v=3&uin=123456789&site=qq&menu=yes"><img src="/static/imghw/default1.png"  data-src="http://wpa.qq.com/pa&#63;p=2:123456789:52"  class="lazy"  border="0" alt="JS は、上部のドロップダウン JavaScript スキルから表示されるアニメーション QQ カスタマー サービス特殊効果コードを実装します。" title="您的网站"/> 售前咨询</a></li>
   <li><a target="_blank" href="http://wpa.qq.com/msgrd&#63;v=3&uin=123456789&site=qq&menu=yes"><img src="/static/imghw/default1.png"  data-src="http://wpa.qq.com/pa&#63;p=2:123456789:52"  class="lazy"  border="0" alt="JS は、上部のドロップダウン JavaScript スキルから表示されるアニメーション QQ カスタマー サービス特殊効果コードを実装します。" title="您的站名"/> 售前咨询</a></li>
   <li><a target="_blank" href="http://wpa.qq.com/msgrd&#63;v=3&uin=123456789&site=qq&menu=yes"><img src="/static/imghw/default1.png"  data-src="http://wpa.qq.com/pa&#63;p=2:123456789:52"  class="lazy"  border="0" alt="JS は、上部のドロップダウン JavaScript スキルから表示されるアニメーション QQ カスタマー サービス特殊効果コードを実装します。" title="您的站名"/> 售前咨询</a></li>
   <li><a target="_blank" href="http://wpa.qq.com/msgrd&#63;v=3&uin=123456789&site=qq&menu=yes"><img src="/static/imghw/default1.png"  data-src="http://wpa.qq.com/pa&#63;p=2:123456789:52"  class="lazy"  border="0" alt="JS は、上部のドロップダウン JavaScript スキルから表示されるアニメーション QQ カスタマー サービス特殊効果コードを実装します。" title="您的站名"/> 售前咨询</a></li>
   <li><a target="_blank" href="http://wpa.qq.com/msgrd&#63;v=3&uin=123456789&site=qq&menu=yes"><img src="/static/imghw/default1.png"  data-src="http://wpa.qq.com/pa&#63;p=2:123456789:52"  class="lazy"  border="0" alt="JS は、上部のドロップダウン JavaScript スキルから表示されるアニメーション QQ カスタマー サービス特殊効果コードを実装します。" title="您的站名"/> 售前咨询</a></li>
   <li><a target="_blank" href="http://wpa.qq.com/msgrd&#63;v=3&uin=123456789&site=qq&menu=yes"><img src="/static/imghw/default1.png"  data-src="http://wpa.qq.com/pa&#63;p=2:123456789:52"  class="lazy"  border="0" alt="JS は、上部のドロップダウン JavaScript スキルから表示されるアニメーション QQ カスタマー サービス特殊効果コードを実装します。" title="您的站名"/> 售前咨询</a></li>
  </ul>
 </div>
 <div id="bg"><img  src="/static/imghw/default1.png"  data-src="images/bgbg.png"  class="lazy"/ alt="JS は、上部のドロップダウン JavaScript スキルから表示されるアニメーション QQ カスタマー サービス特殊効果コードを実装します。" ></div>
</div>
<div id="btn"><span>联系我们</span></div>
</body>
</html>

ログイン後にコピー

この記事が JavaScript プログラミングのすべての人に役立つことを願っています。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7393

Java チュートリアル

1630

CakePHP チュートリアル

1357

Laravel チュートリアル

1268

PHP チュートリアル

1217

Related knowledge

PowerPoint でアニメーションが機能しない [修正] Feb 19, 2024 am 11:12 AM

プレゼンテーションを作成しようとしていますが、アニメーションを追加できませんか? Windows PC 上の PowerPoint でアニメーションが機能しない場合は、この記事が役に立ちます。これは多くの人が不満を抱く一般的な問題です。たとえば、Microsoft Teams でのプレゼンテーション中または画面録画中にアニメーションが停止する場合があります。このガイドでは、Windows 上の PowerPoint で動作しないアニメーションを修正するのに役立つさまざまなトラブルシューティングテクニックを説明します。 PowerPoint アニメーションが機能しないのはなぜですか? Windows 上で PowerPoint のアニメーションが機能しない問題を引き起こす可能性のある考えられる理由として、次のようなことが考えられます。

株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます Dec 17, 2023 pm 06:55 PM

株式分析に必須のツール: PHP および JS でローソク足チャートを描画する手順を学びます。特定のコード例が必要です。インターネットとテクノロジーの急速な発展に伴い、株式取引は多くの投資家にとって重要な方法の 1 つになりました。株価分析は投資家の意思決定の重要な部分であり、ローソク足チャートはテクニカル分析で広く使用されています。 PHP と JS を使用してローソク足チャートを描画する方法を学ぶと、投資家がより適切な意思決定を行うのに役立つ、より直感的な情報が得られます。ローソク足チャートとは、株価をローソク足の形で表示するテクニカルチャートです。株価を示しています

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネットアプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワークインタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザーエクスペリエンスが向上することが挙げられます。欠点としては、モデルサイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピュータービジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

最初に入力してから終了するように ppt アニメーションを設定する方法 Mar 20, 2024 am 09:30 AM

私たちは日々の仕事で ppt をよく使用しますが、ppt のすべての操作機能に精通していますか?例: ppt でアニメーション効果を設定する方法、切り替え効果を設定する方法、各アニメーションの効果時間はどれくらいですか?各スライドは自動的に再生されますか、ppt アニメーションの開始と終了などはできますか? 今回は、まず ppt アニメーションの開始と終了の具体的な手順を共有します。以下にあります。友達、見に来てください。見て！ 1. まず、コンピューターで ppt を開き、テキストボックスの外側をクリックしてテキストボックスを選択します (下図の赤い丸で示されているように)。 2. 次に、メニューバーの[アニメーション]をクリックし、[消去]効果を選択します(図の赤丸部分)。 3. 次に、[

2年の遅れを経て、国産3Dアニメ映画『エル・ランシェン：深海竜』が7月13日に公開予定 Jan 26, 2024 am 09:42 AM

当サイトは1月26日、国産3Dアニメ映画『エル・ランシェン：深海竜』が最新スチールを公開し、7月13日に公開されると正式に発表したと報じた。「Er Lang Shen: The Deep Sea Dragon」は、Mihuxing (Beijing) Movie Co., Ltd.、Horgos Zhonghe Qiancheng Film Co., Ltd.、Zhejiang Hengdian Film Co., Ltd.、Zhejiang Gongying Film によって制作されていることがわかります。 Tianhuo Technology Co., Ltd.とHuawen Image (Beijing) Film Co., Ltd.が制作し、Wang Junが監督したこのアニメーション映画は、当初、2022年7月22日に中国本土で公開される予定でした。。このサイトのあらすじ：授与神の戦いの後、蒋子耶が神々を分割するために「授与神リスト」を持ち出し、授与神リストは天宮によって九州の深海に封印された秘密の領域。実は、授与神リストには神職以外にも強力な悪霊が数多く封印されている。

PHP と JS を使用して株価ローソク足チャートを作成する方法 Dec 17, 2023 am 08:08 AM

PHP と JS を使用して株のローソク足チャートを作成する方法。株のローソク足チャートは、株式市場で一般的なテクニカル分析グラフィックです。始値、終値、最高値、株価などのデータを描画することで、投資家が株式をより直観的に理解するのに役立ちます。株価の最低価格、価格変動。この記事では、PHP と JS を使用して株価のローソク足チャートを作成する方法を、具体的なコード例とともに説明します。 1. 準備開始する前に、次の環境を準備する必要があります。 1. PHP を実行するサーバー 2. HTML5 および Canvas をサポートするブラウザー 3

宮崎駿監督のアニメーション映画『紅の豚』が来年1月16日まで延長され、ドゥバンスコアは8.6となった。 Dec 18, 2023 am 08:07 AM

当サイトのニュースによると、宮崎駿監督のアニメーション映画『紅の豚』が、公開日を2024年1月16日まで延長すると発表した。本サイトは以前、『紅の豚』が全国芸術連盟特別ラインシネマで上映開始されたことを報じた。 11月17日に公開され、累計興行収入は2,000万10,000を超え、Doubanスコアは8.6、4つ星と5つ星のレビューの85.8%を獲得した。『紅の豚』はスタジオジブリ制作、宮崎駿監督、森山守山、加藤登紀子、大塚明夫、岡村明美らが吹き替えに参加し、1992年に日本で公開された。この映画は宮崎駿の漫画『飛行船の時代』を原作とし、魔法で豚に変えられたイタリア空軍のエースパイロット、ポロック・ローゼンの物語を描いている。その後、彼は賞金稼ぎとなり、空中強盗と戦い、周囲の人々を守りました。あらすじ: ローゼンは第一次世界大戦の兵士です

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする Dec 18, 2023 pm 03:39 PM

インターネット金融の急速な発展に伴い、株式投資を選択する人がますます増えています。株式取引では、ローソク足チャートは一般的に使用されるテクニカル分析手法であり、株価の変化傾向を示し、投資家がより正確な意思決定を行うのに役立ちます。この記事では、PHP と JS の開発スキルを紹介し、株価ローソク足チャートの描画方法を読者に理解してもらい、具体的なコード例を示します。 1. 株のローソク足チャートを理解する株のローソク足チャートの描き方を紹介する前に、まずローソク足チャートとは何かを理解する必要があります。ローソク足チャートは日本人が開発した

See all articles

JS は、上部のドロップダウン JavaScript スキルから表示されるアニメーション QQ カスタマー サービス特殊効果コードを実装します。