배너 비동기 그림 텍스트 효과 전환 그림 특수 효과의 jquery 희석 버전_jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head> <br><meta charset='utf-8'/> <br><title>全屏淡入淡出简洁banner，异步图片文字效果切换图片特效</title> <br><meta name="keywords" content="淡化版banner,淡化版banner"> <br><meta name="description" content="淡入淡出简洁banner" /> <br><style type="text/css"> <br>body,ul,li,ol{list-style:none;padding:0px;margin:0px;font-size:12px;} <br>img{border:0px;} <br><br>.bzBanner{width:100%; min-width:980px; height:auto; overflow:hidden; position: relative; } <br>.bzBanner .content,.bzBanner .col,.bzBanner .col a{width:100%; height:100%; position: absolute; top:0px; left:0px; } <br>.bzBanner .btn{position: absolute; bottom:25px; right:50px; z-index:5; } <br>.bzBanner .btn i{display:block; float: left; width:15px; height:15px; padding:0 5px; border-radius:15px; margin-left:15px; background:white; overflow:hidden; opacity:0.4; filter:alpha(opacity=40); cursor:pointer; } <br>.bzBanner .btn i:hover{background:#9C0; } <br>.bzBanner .btn i.act{opacity:0.8; filter:alpha(opacity=80); background:#9C0; } <br>.bzBanner .pre,.bzBanner .next{display:inline-block; width:72px; height:72px; background:url(./bzbanner/btn.png) no-repeat; position:absolute; top:50%; margin-top:-50px; z-index:3; } <br>.bzBanner .pre{left:30px; } <br>.bzBanner .next{right:30px; background-position:0 -72px; } <br>.bzBanner .pre:hover{background-position:0 -144px; } <br>.bzBanner .next:hover{background-position:0 -216px; } <br>.bzBanner .col a{color:white; } <br>.bzBanner .col span{display:inline-block; width:550px; height:200px; background:rgba(0,0,0,.1); position:absolute; z-index:3; bottom:70px; left:130px; } <br>.bzBanner .col span h3{font-weight:normal; font-size:28px; font-weight:normal; font-family:微软雅黑; padding:0px; margin:0px; padding-left:20px; line-height:70px; text-shadow:1px 1px rgba(0,0,0,.3); } <br>.bzBanner .col span p{display:inline-block; width:90%; line-height:25px; font-size: 14px; font-family:微软雅黑; margin:0px; padding:0px; padding-left:20px; text-shadow:1px 1px rgba(0,0,0,.3); } <br><br></style> <br></head> <br><body> <br><br><div class='bzBanner'> <br><div class='content'> <br><div class='col'> <br><a href='javascript:;' > <br><img src='./bzbanner/12.jpg' width=100% /> <br><span> <br><h3>独家首播：范玮琪&曾静玟《千年》</h3> <br><p>范玮琪&曾静玟《千年》MV首播！歌词特别力邀名词人葛大為操刀，延续“一日如千年”的概念，转换在爱情里就是可以把对方的思念拉得很长，每一秒的想念都可以像是一千年的蔓延。而一千年的等待，也因为一秒钟的珍爱相遇而有了意义爱情。</p> <br></span> <br></a> <br></div> <br><div class='col'> <br><a href='javascript:;' > <br><img src='./bzbanner/13.jpg' width=100% /> <br><span> <br><h3>独家首播：It Began With A Fallen Leaf</h3> <br><p>普莉西雅（Priscilla Ahn）和苏打绿全新单曲《It Began With A Fallen Leaf》MV首播！一袭白色雪纺洋装的普莉西雅置身于森林中，红发青峰似偶然闯入森林中活泼调皮的精灵，邂逅了森林中的仙女。歌曲由吴青峰作曲，普莉西雅和吴青峰共同作词，描述了对一位再也无法相见的好友的思念之情。</p> <br></span> <br></a> <br></div> <br><div class='col'> <br><a href='javascript:;' > <br><img src='./bzbanner/14.jpg' width=100% /> <br><span> <br><h3>首播：真的假的</h3> <br><p>暌违乐坛八年陶晶莹新专辑同名主打《真的假的》MV官方版首播!歌曲由周杰伦＋林夕两位乐坛大才子携手合作，唱出男女情爱中许多真真假假的现象和矛盾，MV由廖人帥执导，时而如梦幻童话时而如辉煌宫殿的场景布置亦真亦假似幻似真，逼真特技效果十足！</p> <br></span> <br></a> <br></div> <br><div class='col'> <br><a href='javascript:;' > <br><img src='./bzbanner/15.jpg' width=100% /> <br><span> <br><h3>口袋·FAN 把你的偶像装进口袋里</h3> <br><p>睡不着过后，梦游到这里。在亚纶生日的这一天迎来闪闪发亮的【口袋·炎亚纶】！这里有新鲜资讯影像 ，是勾搭交流平台。是炎亚纶专属，为每一个可爱的布丁纪念永恒，关于阿布有爱的一切都在这里，在这 里全世界只看见你，快把阿布装进口袋，祝炎亚纶1120生日快乐！Android版和IOS越狱版抢先上线…</p> <br></span> <br></a> <br></div> <br></div> <br><div class='btn'><i></i><i></i><i></i><i></i></div> <br><a class='pre' href='javascript:;' title='上一张' ></a> <br><a class='next' href='javascript:;' title='下一张' ></a> <br></div> <br><br><script type="text/javascript" src="./jquery-1.10.2.min.js" ></script><br><script type="text/ javascript" src="./bzBanner.min.js" ></script> <br><script type="text/javascript"> <br>$(function(){ benzi.bzBanner(); }); <br></body> <br></htmlcode_snippet_id="280064" snippet_file_name="blog_20140408_2_455436" name="code" class="html">---------html---- ------------------------------------- --------------
<pre code_snippet_id=" 280064" snippet_file_name="blog_20140408_2_455436" name="code" class="javascript">/*============================ === ===== <br>@Title: 제목 설명과 작은 버튼이 포함된 배너의 희석 버전 <br>@Time: 2013.11.22 <br>@출처: BENZI.PW <br>@Description: <br><br> 플러그인 사용 방법: <br>사용하기 전에 CSS HTML을 완전히 복사하세요.<br>benzi.bzBanner(); <br><br>객체 호출은 js에서 모두 변경됩니다<br>컨테이너: 가장 바깥쪽 프레임<br>cols: 모든 콘텐츠<br>btns: 모든 작은 버튼<br>act: 버튼 활성화 스타일 이름 <br>pre: 앞으로 스크롤 버튼 <br>next: 뒤로 스크롤 버튼 <br><br><br>====*/ <br>var benzi = { <br>bzBanner: function (){ <br><br>//모든 매개변수가 초기화됩니다(캡슐화 후 삭제됩니다) <br>var 값 = { <br>container:$('.bzBanner'), <br>cols:$('. bzBanner .col'), <br>btns:$('.bzBanner .btn i'), <br>act:'act', <br>pre:$('.bzBanner .pre'), <br>next : $('.bzBanner .next'), <br>now:0 <br>} <br><br>//페이드 효과, 모든 개별 개체의 zindex 설정, 표시 및 숨기기 <br>// col: 모든 콘텐츠 객체 <br> // 이전: 이전 객체 <br> // 현재: 현재 표시된 객체 <br> // ----------------------- - <br>var Weak = function( pre,now ){ <br>var col = value.cols; <br>col.css({ zIndex:1 }).eq( pre ).css({ zIndex:2 } ); <br>col.eq( 현재 ).css({ zIndex:3,opacity:0 }).stop(true).animate({ opacity:1 },700) <br><br>//증분 계산, 이전에 표시된 콘텐츠와 현재 표시할 콘텐츠를 반환<br>//현재: 현재 선택된 인덱스<br>//---------------- --- <br>var 증가 = function( now ){ <br>var pre = now ,now = pre 1 <br>if( now >= value.cols.length ) now = 0 <br>return { pre:pre ,now:now }; <br>} <br><br>//계산 감소<br>//------------------ <br> var regression = function( now ){ <br>var pre = now ,now = pre - 1 <br>if( now < 0 ) now = value.cols.length-1 <br>return { pre: pre ,now:now }; <br>} <br><br>//작은 버튼 스타일 수정<br>//---------------------- <br>var btnStyle = function( now ){ <br>if( value.btns && value.act ) <br>values.btns.removeClass(values.act ).eq( now ).addClass( value.act ) <br>} <br><br>//작은 버튼 이벤트 훅, 초기화에 작은 버튼이 있으면 실행되고, 없으면 실행되지 않습니다 <br>//--------- -------- ------ <br>var 버튼 = function(){ <br>values.btns.click(function(){ <br>var now = $(this).index( ); <br>if( value .now != now ){ <br>weaken( value.now ,now ) <br>btnStyle( now ) <br>values.now = now; <br>} <br>}); <br>} <br><br>//콘텐츠 전환<br>// 측면: 방향, 값이 0이거나 없으면 뒤로 뒤집기를 의미하고, 1은 앞으로 뒤집기를 의미합니다<br> //------ --- <br>varchange = function( 양상 ){ <br>var val = 양상 ? regression(values.now ): 증가(values.now); <br>weaken(val.pre,val.now); <br>btnStyle(val.now) <br>text(val.now); now; <br>} <br><br>//왼쪽 및 오른쪽 버튼 효과<br>//------------ <br> varshortcut=function(){ <br>values.pre.click(function(){change(1); })<br>values.next.click(function(){change(); }); >} <br><br>// 텍스트 전환 효과, 이 효과는 매우 타겟팅되어 있으며 스타일 지원이 필요합니다. <br>//---------------------- <br>var text = function ( now ){ <br>values.cols.find('span').css({ opacity:0 }).eq( now ).stop(true).delay(500).animate( { 불투명도:1 }, 1000); <br>values.cols.find('h3').css({ 불투명도:0 }).eq( 이제 ).stop(true).delay(500).animate({ 불투명도:1 },500 ); <br>values.cols.find('p').css({ 불투명도:0 }).eq( 이제 ).stop(true).delay(1000).animate({ 불투명도 :1 },500) ; <br>} <br><br>//프레임 크기<br>//------------------------- -------- - <br>$(window).resize(function(){ <br>values.container.height(values.cols.find('img').height() ); <br>}).resize(); <br><br>//자동 재생, 도 메서드는 해당 매개변수를 가져오고 작은 버튼 스타일을 수정한 다음(작은 버튼이 있는 경우) 전역 변수 값을 새로 고칩니다. now <br>// time: 지연 시간<br> //--------- <br>var loop,play = function( time ){ <br>clearTimeout( 루프 ); <br>loop = setTimeout(function(){ <br>change(); <br>play( 3000 ); <br>}, time ) <br><br>//일시 중지 및 자동 재생 실행<br>// --------------------- <br>var control = function(){ <br>values.container .hover(function(){ <br>clearTimeout( loop ); <br>},function(){ <br>play( 2000 ); <br>}) <br>} <br><br>// 효과를 초기화하고 각 함수를 호출합니다. <br>//- ----- <br>var 초기화 = function(){ <br>var now = 값. now; <br>weaken(values.cols.length-1 ,now ); <br>if(values.btns ) 버튼() <br>if(values.pre &&values.next ) <br>btnStyle( now ); <br>text( now ); <br>control() <br>} <br><br>//-- -------------- ----- <br>초기화() <br><br>} <br><br>} <br>< br><br><pre code_snippet_id="280064" snippet_file_name="blog_20140408_2_455436" name="code" class="html">< ;/pre><pre code_snippet_id="280064" snippet_file_name= "blog_20140408_2_455436" name="code" class="html">
;사전>
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7401
15
1630
14
1358
52
1268
25
1217
29
빠른 적용: 여러 파일의 PHP 비동기 HTTP 다운로드에 대한 실제 개발 사례 분석
Sep 12, 2023 pm 01:15 PM
빠른 적용: PHP의 실제 개발 사례 분석 여러 파일의 비동기 HTTP 다운로드 인터넷의 발전으로 파일 다운로드 기능은 많은 웹 사이트와 응용 프로그램의 기본 요구 사항 중 하나가 되었습니다. 여러 파일을 동시에 다운로드해야 하는 시나리오의 경우 기존 동기 다운로드 방법은 비효율적이고 시간이 많이 걸리는 경우가 많습니다. 이러한 이유로 PHP를 사용하여 HTTP를 통해 여러 파일을 비동기적으로 다운로드하는 것이 점점 더 일반적인 솔루션이 되었습니다. 본 글에서는 실제 개발 사례를 통해 PHP 비동기 HTTP를 활용하는 방법을 자세히 분석해 보겠습니다.
Swoole이 비동기 SMTP 작업을 지원하는 방법
Jun 25, 2023 pm 12:24 PM
인터넷의 지속적인 발전과 대중화로 인해 이메일은 사람들의 생활과 업무에 없어서는 안 될 부분이 되었으며, SMTP(Simple Mail Transfer Protocol)는 이메일 전송을 위한 중요한 프로토콜 중 하나입니다. PHP용 비동기 네트워크 통신 프레임워크인 Swoole은 비동기 SMTP 작업을 지원하여 이메일 전송을 더욱 효율적이고 안정적으로 만들어줍니다. 이 기사에서는 Swoole이 동기화 사용을 포함하여 비동기 SMTP 작업을 지원하는 방법을 소개합니다.
Python asyncio 고급 가이드: 초보자부터 전문가까지
Mar 04, 2024 am 09:43 AM
동시 및 비동기 프로그래밍 동시 프로그래밍은 동시에 실행되는 여러 작업을 처리하며, 비동기 프로그래밍은 작업이 스레드를 차단하지 않는 일종의 동시 프로그래밍입니다. asyncio는 프로그램이 메인 스레드를 차단하지 않고 I/O 작업을 수행할 수 있도록 하는 Python의 비동기 프로그래밍용 라이브러리입니다. 이벤트 루프 asyncio의 핵심은 I/O 이벤트를 모니터링하고 해당 작업을 예약하는 이벤트 루프입니다. 코루틴이 준비되면 이벤트 루프는 I/O 작업을 기다릴 때까지 이를 실행합니다. 그런 다음 코루틴을 일시 중지하고 다른 코루틴을 계속 실행합니다. 코루틴 코루틴은 실행을 일시 중지하고 다시 시작할 수 있는 함수입니다. asyncdef 키워드는 코루틴을 만드는 데 사용됩니다. 코루틴은 I/O 작업이 완료될 때까지 기다리기 위해 wait 키워드를 사용합니다. 다음과 같은 asyncio의 기본 사항
Swoole이 비동기 AMQP 작업을 지원하는 방법
Jun 25, 2023 am 08:22 AM
인터넷 비즈니스 규모가 지속적으로 성장함에 따라 높은 동시성, 고성능에 대한 요구가 점점 높아지고 있으며, PHP용 네트워크 통신 프레임워크인 Swoole은 개발자들의 선호도가 높아지고 있습니다. 그중 Swoole은 가장 일반적인 애플리케이션 시나리오 중 하나인 비동기 AMQP를 지원합니다. 이제 Swoole이 비동기 AMQP 작업을 어떻게 지원하는지 살펴보겠습니다. 먼저 AMQP가 무엇인지 명확히 해야 합니다. AMQP(AdvancedMessageQueuingProtocol) 고급
PHP 비동기 코루틴 개발: 데이터 캐싱 속도 향상 및 읽기 및 쓰기 작업
Dec 18, 2023 pm 01:09 PM
PHP 비동기 코루틴 개발: 데이터 캐싱 및 읽기 및 쓰기 작업 가속화 실제 애플리케이션 개발에서 데이터 캐싱과 읽기 및 쓰기 작업은 일반적인 성능 병목 현상입니다. 시스템 효율성과 사용자 경험을 향상시키기 위해 PHP 비동기 코루틴 기술을 사용하여 이러한 작업을 가속화할 수 있습니다. 이 문서에서는 PHP 비동기 코루틴의 기본 개념과 원칙을 소개하고 구체적인 코드 예제를 제공합니다. 1. 비동기 코루틴의 개념과 원리 비동기 코루틴은 단일 스레드를 사용하여 경량 작업 스케줄링 및 협업을 달성하는 효율적인 동시 프로그래밍 기술입니다. 기존의 다중 스레드 또는 다중 프로세스 동시 프로그래밍과 비교
Vue 문서에서 비동기 요청 기능을 사용하는 방법
Jun 20, 2023 pm 05:55 PM
Vue.js는 애플리케이션에서 사용자 인터페이스를 구축하는 방법을 제공하는 인기 있는 프런트 엔드 JavaScript 프레임워크입니다. Vue.js 문서에서 특히 비동기 요청 기능을 사용하는 방법에 대한 많은 유용한 정보를 찾을 수 있습니다. 비동기 요청 기능은 애플리케이션에서 비동기 작업을 수행하는 방법입니다. 서버에서 데이터를 가져오고, 입력을 처리하고, 양식을 검증하는 데 사용됩니다. 일반적으로 비동기 요청 기능은 Promise, async 및 Wait와 같은 Java 기능과 결합되어야 합니다.
비동기 로깅 작업에 ThinkPHP6을 사용하는 방법은 무엇입니까?
Jun 12, 2023 am 09:57 AM
인터넷의 급속한 발전으로 인해 로깅 서비스는 모든 대규모 웹 애플리케이션의 필수 모듈이 되었습니다. 오류 문제 해결 및 성능 모니터링과 같은 다양한 요구 사항을 용이하게 하기 위해 이 기사에서는 ThinkPHP6 프레임워크를 사용하여 비동기 로깅 작업을 수행하는 방법을 소개합니다. 1. 로깅이란 무엇입니까? 컴퓨터 과학 분야에서 로깅은 컴퓨터 시스템에서 발생하는 이벤트 및 정보를 기록하는 것을 의미합니다. 일반적으로 이러한 레코드는 파일이나 데이터베이스에 저장됩니다. 로깅은 시스템 작동 상태를 이해하고 적시에 문제를 감지 및 해결하는 데 도움이 됩니다.
Ajax 기능을 사용한 비동기 데이터 교환
Jan 26, 2024 am 09:41 AM
Ajax 기능을 사용하여 비동기식 데이터 상호작용을 구현하는 방법 인터넷과 웹 기술의 발전으로 프런트엔드와 백엔드 간의 데이터 상호작용이 매우 중요해졌습니다. 페이지 새로 고침, 양식 제출 등 기존의 데이터 상호 작용 방법은 더 이상 사용자 요구 사항을 충족할 수 없습니다. Ajax(비동기 JavaScript 및 XML)는 비동기 데이터 상호 작용을 위한 중요한 도구가 되었습니다. Ajax를 사용하면 웹에서 JavaScript와 XMLHttpRequest 객체를 사용할 수 있습니다.
