基于jquery實現網站全屏滾動代碼特效



42 167 56



特效描述:基于jquery實現 網站全屏 滾動代碼,基于jquery實現網站全屏滾動代碼特效

代碼結構

1. 引入CSS

<link href="static/spring/css/basic.css?ver=20140623" rel="stylesheet" type="text/css" />
<link href="static/spring/css/head.css?ver=20140623" rel="stylesheet" type="text/css" />
<link href="static/spring/css/index.css?ver=20140623" rel="stylesheet" type="text/css" />

2. 引入JS

<script src="static/common/js/jquery.min.js?ver=20140623" type="text/javascript"></script>
<script src="static/common/js/global.min.js?ver=20140623" type="text/javascript"></script>
<script src="static/common/js/jquery.mousewheel.min.js?ver=20140623" type="text/javascript"></script>
<script src="static/common/js/index_mousewheel.js" type="text/javascript" type="text/javascript"></script>

3. HTML代碼

<script type="text/javascript">
var _skin = UI.cookie('pp_member_skin');
bodySkin(_skin);
</script>
<div class="first_mousewheel">
<!-----頭部----->
<div class="head" id="head">
    <div class="head_lef">
        <h1><a href="" title="JS代碼網" class="tencent"></a></h1>
        <ul>
                        <li><a href="timer/">騰訊平臺</a></li>
            <li><a href="time/">新浪平臺</a></li>
                        <li class="more_app">
                <a href="javascript:;">更多應用<i></i></a>
                <div>
                                        <h3>騰訊平臺<span></span></h3>
                    <a href="weitu/">微圖</a>
                    <a href="ceshi/">微測試</a>
                    <a href="fenxi/">微分析</a>
                    <a href="count/">轉播統計</a>
                    <h3>新浪平臺<span></span></h3>
                    <a href="http://51qianduan.com/?weitu/">微圖</a>
                    <a href="http://51qianduan.com/?ceshi/">微測試</a>
                                    </div>
            </li>
        </ul>
    </div>
    <div class="head_rig">
        <i class="tel"></i>
            </div>
</div>
<!-----頭部結束----->
<div class="index_mian">
    <div class="index_banner">
        <ul>
            <li class="img_01"></li>
            <li class="img_02"></li>
        </ul>
    </div>
</div>
<!-----banner登錄結束----->
<div class="scroll_top">
    <div class="middle">
        <h2>皮皮時光機網站全屏滾動代碼特效</h2>
        <h3>皮皮時光機,是基于騰訊微博和新浪微博的第三方應用;主推定時發送微博服務,以高效、穩定著稱</h3>
        <div>
            <a href="javascript:void(0)">
                查看詳情<br /><br />
                <i></i>
            </a>
        </div>
    </div>
</div>
</div>
<div class="mousewheel_box"></div>
<div class="index_scroll">
    <div class="scroll_box scroll_01">
        <div class="middle">
            <h2>定時發送、轉發微博</h2>
            <h3>您可以將編輯好的微博內容,設置在未來某一分鐘由皮皮時光機代您自動發送;并在錄入微博內容時,提供在線修改圖片,裁剪大小、去水印、加水印等貼心功能</h3>
            <p><img src="static/spring/index_images/scroll_01.png" /></p>
        </div>
    </div>
    <div class="scroll_box scroll_02">
        <div class="middle">
            <h2>微博互動</h2>
            <h3>多個微博賬號授權皮皮時光機后,無需分別登錄微博,即可輕松完成與粉絲轉發、評論等互動交流</h3>
            <p><img src="static/spring/index_images/scroll_02.png" /></p>
        </div>
    </div>
    <div class="scroll_box scroll_03">
        <div class="middle">
            <h2>多微博平臺同步</h2>
            <h3>您可以將編輯好的微博內容,一次同時發布至多個微博平臺。</h3>
            <p><img src="static/spring/index_images/scroll_03.png" /></p>
        </div>
    </div>
    <div class="scroll_box scroll_04">
        <div class="middle">
            <h2>多人協同</h2>
            <h3>您可以將一個微博賬號,同時分配給多個人來管理;靈活的權限分配,讓您不必為賬號安全性擔憂</h3>
            <p><img src="static/spring/index_images/scroll_04.png" /></p>
        </div>
    </div>
    <div class="scroll_box scroll_05">
        <div class="middle">
            <h2>微博內容庫</h2>
            <h3>皮皮時光機為您提供上千萬條的優質微博內容,以便您在運營微博時參考使用</h3>
            <p><img src="static/spring/index_images/scroll_05.png" /></p>
        </div>
    </div>
</div>
<div class="scroll_navs">
    <a href="javascript:void(0)" class="current">1</a>
    <a href="javascript:void(0)">2</a>
    <a href="javascript:void(0)">3</a>
    <a href="javascript:void(0)">4</a>
    <a href="javascript:void(0)">5</a>
</div>    
<script type="text/javascript">
$(document).ready(function(){
//頭部更多應用下拉
$(".more_app a:first").click(function(){
$(this).siblings("div").show();
});
$(".more_app div").mouseenter(function(){
$(this).show();
}).mouseleave(function(){
$(this).hide();
});
/*用戶名下拉列表*/
$(".head_rig .user .nick").click(function(){
$(this).siblings("ul").show();
});
$(".head_rig .user ul:first").mouseenter(function(){
$(this).show();
}).mouseleave(function(){
$(this).hide();
});
});
/*banner幻燈js*/
$(function(){
var aPage = $('.index_login .lef a');		//分頁按鈕
var aImg = $('.index_banner ul li');		//圖像集合
var iSize = aImg.size();		//圖像個數
var index = 0;		//切換索引
var t;
$('.up').click(function(){		//左邊按鈕點擊
index--;
if(index<0){
index=iSize-1
}
change(index);
})
$('.down').click(function(){    //右邊按鈕點擊
index++;
if(index>iSize-1){
index=0
}
change(index);
})
//分頁按鈕點擊
aPage.click(function(){
index = $(this).index();
change(index);
});
//切換過程
function change(index){
aPage.removeClass('current');
aPage.eq(index).addClass('current');
aImg.stop();
//隱藏除了當前元素,所以圖像
aImg.eq(index).siblings().animate({opacity:0},1000);
//顯示當前圖像
aImg.eq(index).animate({opacity:1},1000);
}
function autoshow() {
index=index+1;
if(index<=iSize-1){
   change(index);
}else{
index=0;
change(index);
}	
}
int=setInterval(autoshow,5000);
function clearInt() {
$('.banner_page a.up,.banner_page a.down').mouseover(function() {
clearInterval(int);
})
}
function setInt() {
$('.banner_page a.up,.banner_page a.down').mouseout(function() {
int=setInterval(autoshow,5000);
})
}
clearInt();
setInt();
});
/*輸入框效果*/
$(".input_bar").click(function(){
var it = $(this).parents("li").find("input.txt");
if(it.val() == ""){
$(this).hide();
it.focus();
}
});
$("input.txt").blur(function(){
if($(this).val() == ""){
$(this).parents("li").find(".input_bar").show();
}
}).keyup(function(){
$(this).next(".input_bar").hide();
});
UI.getScript("static/spring/js/login.min.js?ver=20140623", function() {
    onLoginReady();
});
function accountLogin(type, app)
{
    $.get('member.php?mod=bind&action=request&referer=http%3A%2F%2Ft.pp.cc%2F' + app + '&type=' + type + '&app=' + app + '&sinav=3&random=' + UI.random(), function(data) {
        location.href = data;
    });
    }
function onLoginSwitchReady(){}
SyncLoginState(true);
function LC_onPageSync(r) 
{
    if (r) {
    	location.href = siteurl;
    }
}
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 二維碼 頭像上傳 圖片上傳 圖片全屏 圖片淡出淡進 圖片淡出 圖片淡進 圖片延遲加載 圖片延遲 圖片加載 圖片翻轉 圖片旋轉 圖片疊加 圖片層疊 圖片放大鏡 圖片拖動 圖片拖拽 滾動切換 滾動條切換 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 圖片廣告 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 帶縮略圖的幻燈片 地圖 中國地圖 世界地圖 滑動選項卡 滑動切換 純圖片輪播 圖片輪播 圖片滾動 圖片滾動條 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖片滑動 圖片滑塊 圖片切換 圖片選項卡 圖標選項卡 圖片收縮展開 圖片收縮 圖片展開 圖標導航 圖標菜單 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 背景切換 大圖切換 滑動手風琴 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 圖表 圖片 圖片插件 頭像截圖 全屏滾動 全屏切換 圖片切換 切換圖片
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表