画像のローリング シャッター効果を実装するための Javascript CSS のアイデアとコード_JavaScript スキル
Arcgis を使用したことがある人は、Arcmap のローラー シャッター エフェクトを深く覚えているはずで、それを自分の WebGIS システムに移行したいと考えています。私もこの比較的クールなローラー シャッターが気に入っています。効果については、ははは、出ました、結果は皆さんに報告します
この効果を見て、ニワトリが少し動きましたか? ふふ、心配しないで、ゆっくり聞いてください。
まずは容器です。 2 つの DIV を使用して、2 つの異なる期間の画像を表示します。次に、2 つのコンテナのスタイルを設定します。コード:
#after{
position: absolute;
top: 0px;
left: 0px;
background-image: url(../images/24.jpg);
width: 940px;
height: 529px;
background-repeat: no-repeat;
}
#before{
position: absolute;
top: 0px;
left: 0px;
border-right: 3px solid #f00;
background-image: url(../images/23.jpg);
width: 433px;
height: 529px;
background-repeat: no-repeat;
max-width: 940px;
}
このようにして、Web上に画像が表示されます。
次にローリングシャッター効果を実装します。ローリングシャッターを実装するには、beforeの幅を設定することが最も重要です。その設定方法は次のとおりです。
function RollImage(evt){
var x=evt.pageX;
console.log(x);
$("#before").css("width",x+"px");
}
/script>このようにして、ローラーブラインドの効果が得られます。ソースコードは次のとおりです:
スタイル.css
.beforeafter{
width: 940px;
height: 529px;
}
#after{
position: absolute;
top: 0px;
left: 0px;
background-image: url(../images/24.jpg);
width: 940px;
height: 529px;
background-repeat: no-repeat;
}
#before{
position: absolute;
top: 0px;
left: 0px;
border-right: 3px solid #f00;
background-image: url(../images/23.jpg);
width: 433px;
height: 529px;
background-repeat: no-repeat;
max-width: 940px;
}
test.html
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"><head>
<title>日本地震灾区前后对比</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="zh-CN">
<link href="css/roll.css" type="text/css" rel="stylesheet">
<script src="../jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function RollImage(evt){
<strong>var x=evt.pageX;
$("#before").css("width",x+"px");</strong>
}
</script>
</head>
<body>
<div class="beforeafter" onmousemove="RollImage(event)">
<div id="after"></div>
<div id="before"> </div>
</div>
</body>
</html> 
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7687
15
1639
14
1393
52
1287
25
1229
29
フラッグシップと同じモデルです！ Xiaomi Civi 4 Proはイメージングブレイン3.0をアップグレード：Xiaomi AISPを搭載
Mar 22, 2024 pm 12:02 PM
3月21日のニュースによると、Xiaomi Civi4Proが本日正式にリリースされ、オリジナルのライカプロフェッショナルトリプルカメラを搭載し、ライトハンター800カスタマイズされたプロフェッショナルセンサーが搭載されました。報道によると、Xiaomi Civi4Proもフラッグシップモデルの長所を継承し、Xiaomi AISPを搭載しているとのこと。 Xiaomi の ThePaper OS を通じて、ハードウェア層に深く入り込み、テクノロジー パイプラインを再構築し、SoC の各モジュールに深く入り込んで、CPU、GPU、NPU、および ISP の計算能力を完全に統合します。 42TOPSとなり、連写速度も69％向上。同時に、新しいマシンは 4 つの主要なコンピューテーショナル フォトグラフィー モデルを統合し、アルゴリズムと光学系を巧みに統合して、3 次元のトーン、リアルな色、映画レベルのレイヤーを実現します。新しい大型ポートレート モデルには、新しい AIGAN 美容アルゴリズムも組み込まれています。
iPhone 16 はすべてのカメラ機能を明らかにします: Vision Pro の基礎を築く?
Jan 25, 2024 am 08:15 AM
昨年の Apple 秋のカンファレンスで、iPhone 15 Pro Max は間違いなく最も話題の主役の 1 つでした。それは単に、それが潜望鏡望遠レンズを搭載した Apple の最初のスマートフォンだったからです。もちろん、iPhone 15 Pro Maxは最大5倍の光学ズームまでしかサポートしておらず、センサーサイズが小さいため、ほとんどのシーンでのパフォーマンスは少し残念です。 （出典：Apple） Android陣営では、フラッグシップモデルには1インチのアウトソールセンサーがほぼ標準装備となり、2023年のハイエンド市場では例年にも増して「アウトソール望遠」トレンドが再び吹く中、各メーカー人気が高すぎて、気になる望遠レンズも大きな変化を遂げています。ハードウェアだけを見れば、iPhone は確かに大きく遅れをとっています。おそらくAppleもこの問題を認識しているのでしょう。
Huawei Imaging XMAGE: 10 の主要なトレンドが将来のモバイル イメージングの新しい方向性を決定します
Jun 01, 2024 pm 12:27 PM
Pシリーズの開発の歴史は動画の発展の歴史です。 P シリーズ誕生 12 周年を機に、ファーウェイはモバイル イメージングと将来の計画に対する深い理解とともに再び取り組み始めます。動画の概念の出現から段階的な発展と成長に至るまで、ファーウェイは常にリーダーとして重要な役割を果たし、何百万ものユーザーにとって自分の生活を記録する主な手段となってきました。今日、業界がハードウェアのスタッキング、画質の向上、従来のイメージング ブランド スタイルのバンドルという 3 つの次元で必死に革新を進めているとき、均質なハードウェアのスタッキングとアルゴリズムの最適化では各ブランドを真に差別化することはできないことが明らかです。そしてさらに重要なことに、特定の画像スタイルは消費者の個々のニーズに適応することが困難でした。より高い次元に立ち、モバイルイメージングの次の発展方向を考えるリーダーはファーウェイです。
2億画素のサノス画像！ Vivo X100 Ultra の実際の携帯電話ハンズオン: 巨大なリング カメラ
May 07, 2024 am 09:50 AM
5月7日のニュースによると、vivoは5月13日に新製品発表会を開催し、vivoX100sシリーズとvivoX100Ultraを発売するとのこと。さらに、vivo の新しいイメージング技術ブランド、ブループリント イメージングもカンファレンスで発表されます。最近、vivo 公式旗艦店は、vivo X100 Ultra のハンズオン ビデオを公開しました。新しい携帯電話の背面には、新しいレンズ レイアウトが採用されており、メイン カメラ、望遠鏡、超カメラを含む巨大なリング状のカメラ モジュールが搭載されています。広角レンズ。 Vivo はまた、レンズリングの外側につや消し金属テクスチャーの円を追加しており、細部は非常に精巧です。 vivo ブランド担当副社長の Jia Jingdong 氏は、ウォームアップ中に、vivoX100Ultra は「イメージ破壊者」であり、もともと vivo が社内で開発したものであると述べました。
OPPO Find X7は傑作です！あらゆる瞬間を画像で捉えましょう
Aug 07, 2024 pm 07:19 PM
このペースの速い時代において、OPPO Find X7 はその画像処理能力を利用して、人生のあらゆる美しい瞬間を味わうことができます。雄大な山、川、湖、海、温かい家族の集まり、街での出会いや驚きなど、あらゆる場面を「比類のない」画質で記録できます。 Find Itのカメラデコデザインは外観から見ても一目瞭然で高級感があります。基本的なハードウェア構成をはじめ、内部もユニークです。 FindX7 は以前の状態を維持します
ファーウェイの元チーフイメージングエンジニア、ルオ・ウェイ氏がHonorに加わり、写真を公開
Jul 29, 2024 am 09:01 AM
かつてファーウェイのチーフイメージングエンジニアを務めたLuo Wei氏が控えめな形でHonorのイメージングチームに加わったと報じられており、これは間違いなくHonor携帯電話のイメージング性能に質的な向上をもたらすだろう。ちょうど今日、Luo Wei 氏は、Honor Magic 6 Ultimate Edition と Honor Magic 5 Pro の黄花水万里の長城をテーマにした一連の写真を、「テストしてみてください」というテキストとともに個人の Weibo に投稿しました。これは間違いなく、Luo Wei が Honor に入社し、仕事を始めたという声明を裏付けています。 Weibo のコメントでは、一部のネチズンが Honor Magic 6 Pro のマクロの問題について質問しました。クローズアップで撮影すると、広角レンズと望遠レンズが競合し、レンズが繰り返しレンズを横切ってしまいます。これに対し、羅偉氏はバージョンアップすれば問題ないと即答した。さらに、Honor MagicV3 がリリースされました
Xiaomi Mi 14 Ultraにはプロ仕様の写真ハンドルが装備されており、携帯電話を即座にカメラにアップグレードできます
Jan 17, 2024 pm 03:36 PM
1月17日のニュースによると、Xiaomi 14Ultraはまだ発売されておらず、アクセサリーが先になるとのことですが、最近Xiaomiの新製品「Professional Photography Grip (Power Bank)」が3C認証を通過し、メーカーはLens Technologyとなっています。 Xiaomi 13 Ultraのプロの写真スーツを参照すると、この新しいプロの写真ハンドルは明らかにXiaomi 14 Ultra用に準備されており、新しいゲームプレイをもたらすことが期待されています。 Xiaomi 13Ultraプロ用撮影スーツXiaomi 13Ultraは発売と同時にプロ用撮影スーツも発売したことがわかり、価格は999元で、中古プラットフォームでは一時約1,500元で販売されており、非常に人気があります。写真撮影キットには、テクノロジーナノレザー保護ケースとワイヤレス撮影ハンドルが含まれており、保護ケースは67mmフィルターアダプターリングと接続して、携帯電話を使用することもできます。
Nubia Z60 Ultraの魅力に浸って肇慶市3万歩を歩いた
Aug 10, 2024 pm 09:34 PM
写真を撮るときに一番好きなレンズは何ですか?私の答えは、35mm固定焦点（フルサイズ相当の焦点距離に基づいて計算、以下同じ）です。携帯電話市場において、ネイティブ 35mm メインカメラを搭載しているのは Nubia だけです。誰もが「イメージのフラッグシップ」であると主張しますが、Nubia Z60 Ultra の主要バージョンは、今年使用した携帯電話の中で最もカメラらしく、歪みの少ない 18 mm 超広角、35 mm 人間味のあるメイン カメラ、85 mm 望遠を備えています。レンズの品質は非常に良く、スライドボタンでカメラのオン/オフを素早く行うことができ、カードカメラのような感覚です。この携帯電話は非常に特別なので、この体験も少し特別になるでしょう。この Nubia Z60 Ultra の主要バージョンを使用して、肇慶で過ごした週末を記録します。リラクゼーション
