jQuery水平滑块照片墙点击图片放大特效代码下载


jQuery水平滑块照片墙点击图片放大特效代码下载
jQuery水平滑块照片墙点击图片放大特效代码下载以及水平滑块照片墙、点击图片放大等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" type="text/css" media="all" href="images/css/style.min.css" />

2. 引入JS

<script type='text/javascript' src='images/js/jquery.js'></script>
<script type='text/javascript' src='images/js/jquery.scripts.js'></script>
<script type='text/javascript' src='images/js/jquery.custom.js'></script>
<script type='text/javascript' src='images/js/mootools.js'></script>
<script type="text/javascript" src="images/js/duotive-slider-gallery.js"></script>

3. HTML代码

<div id="slideshow-wrapper">
    <div id="slideshow-pattern" class="subheader-pattern-dot"></div>
    <div id="slideshow-border-top">
        <div id="gallery-slider-wrapper">
            <div id="gallery-slider">
            <div id="slider-controls"><a href="javascript: void(0)" id="slider-control-left">left</a><a href="javascript: void(0)" id="slider-control-right">right</a></div>
                <div id="slider-images-wrapper">
                    <ul id="slider-main-ul">
<!-- 3dwall_001 begin -->
                        <li><ul><li class="type-3"><a class="image-icon" rel="gallery[modal]" title="html6game" href="images/001/001.jpg"><span><div class="icon"></div><strong>html6game 3dwall 001</strong>html53d墙,3d墙,3d立方体,3d图片墙,3d,3d wall,wall,三维,三维图片墙 - 前端开发网 - 专注于网页游戏,为程序员提供web开发教程,这里有最近的资讯和前沿的开发技术!O(∩_∩)O ...<em class="more">查看图片 &#187;</em></span><img height="298" width="318" src="images/001/001a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="PKMN:Magikarp" href="images/001/002.jpg"><span><div class="icon"></div><strong>PKMN:Magikarp</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/002a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="食品艺术 - 羊" href="images/001/003.jpg"><span><div class="icon"></div><strong>食品艺术 - 羊</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/003a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_001 end -->
<!-- 3dwall_002 begin -->
                        <li><ul><li class="type-1"><a class="image-icon" rel="gallery[modal]" title="食品艺术 - 茄子" href="images/001/004.jpg"><span><div class="icon"></div><strong>食品艺术 - 茄子</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/004a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="食品艺术 - 西瓜运动员" href="images/001/005.jpg"><span><div class="icon"></div><strong>食品艺术 - 西瓜运动员</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/005a.jpg" alt="请查看图片"></a></li>
                        <li class="type-2"><a class="image-icon" rel="gallery[modal]" title="食品艺术 - 蛋壳之家" href="images/001/006.jpg"><span><div class="icon"></div><strong>食品艺术 - 蛋壳之家</strong>如果你想步入一个鸡蛋,那么就来看看这个蛋壳房子。<em class="more">查看图片 &#187;</em></span><img height="148" width="318" src="images/001/006a.jpg" alt="请查看图片"></a></li>
                        <li class="type-2"><a class="image-icon" rel="gallery[modal]" title="食物艺术 - 巴斯梨" href="images/001/007.jpg"><span><div class="icon"></div><strong>食物艺术 - 巴斯梨</strong>这是另一种创意,创作出的食品艺术与低音梨,创造一个美好的乐器。<em class="more">查看图片 &#187;</em></span><img height="148" width="318" src="images/001/007a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_002 end -->
<!-- 3dwall_003 begin -->
                        <li><ul><li class="type-2"><a class="image-icon" rel="gallery[modal]" title="食品艺术 - 桔皮人" href="images/001/008.jpg"><span><div class="icon"></div><strong>食品艺术 - 桔皮人</strong>橙色和尝试创建这个橘皮的人,这可能需要一些时间才能掌握。<em class="more">查看图片 &#187;</em></span><img height="148" width="318" src="images/001/008a.jpg" alt="请查看图片"></a></li>
                        <li class="type-3"><a class="image-icon" rel="gallery[modal]" title="食品艺术 - 可爱小羊" href="images/001/009.jpg"><span><div class="icon"></div><strong>食品艺术 - 可爱小羊</strong>此食品的艺术演示了可爱的小绵羊。<em class="more">查看图片 &#187;</em></span><img height="298" width="318" src="images/001/009a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_003 end -->
<!-- 3dwall_004 begin -->
                        <li><ul><li class="type-3"><a href="https://www.51qianduan.com/">51前端</a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="金鱼食品艺术" href="images/001/011.jpg"><span><div class="icon"></div><strong>金鱼食品艺术</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/011a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="橙色最先进的食品展" href="images/001/012.jpg"><span><div class="icon"></div><strong>橙色最先进的食品展</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/012a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_004 end -->
<!-- 3dwall_005 begin -->
                        <li><ul><li class="type-1"><a href="https://www.51qianduan.com/">51前端</a></li>
                        <li class="type-1"><a href="https://www.51qianduan.com/">51前端</a></li>
                        <li class="type-2"><a href="https://www.51qianduan.com/">51前端</a></li>
                        <li class="type-2"><a class="image-icon" rel="gallery[modal]" title="食物艺术 - 葱油小人" href="images/001/016.jpg"><span><div class="icon"></div><strong>食物艺术 - 葱油小人</strong>这种水果的艺术葱油在这样一个美丽的方式,真是非常有趣!O(∩_∩)O ...<em class="more">查看图片 &#187;</em></span><img height="148" width="318" src="images/001/016a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_005 end -->
<!-- 3dwall_006 begin -->
                        <li><ul><li class="type-2"><a href="https://www.51qianduan.com/">51前端</a></li>
                        <li class="type-3"><a href="https://www.51qianduan.com/">51前端</a></li></ul></li>
<!-- 3dwall_006 end -->
<!-- 3dwall_007 begin -->
                        <li><ul><li class="type-3"><a class="image-icon" rel="gallery[modal]" title="生日男孩便当" href="images/001/019.jpg"><span><div class="icon"></div><strong>生日男孩便当</strong>今年的生日演示为您的孩子带来惊喜,使他或她的特殊日子里更特别的个人风格,过生日时,它是最适合您的孩子!O(∩_∩)O ...<em class="more">查看图片 &#187;</em></span><img height="298" width="318" src="images/001/019a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="土耳其一天的便当" href="images/001/020.jpg"><span><div class="icon"></div><strong>土耳其一天的便当</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/020a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a href="https://www.51qianduan.com/">51前端</a></li></ul></li>
<!-- 3dwall_007 end -->
<!-- 3dwall_008 begin -->
                        <li><ul><li class="type-1"><a class="image-icon" rel="gallery[modal]" title="一个鸡蛋吗?" href="images/001/022.jpg"><span><div class="icon"></div><strong>一个鸡蛋吗?</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/022a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a href="https://www.51qianduan.com/">51前端</a></li>
                        <li class="type-2"><a href="https://www.51qianduan.com/">51前端</a></li>
                        <li class="type-2"><a href="https://www.51qianduan.com/">51前端</a></li></ul></li>
<!-- 3dwall_008 end -->
<!-- 3dwall_009 begin -->
                        <li><ul><li class="type-2"><a class="image-icon" rel="gallery[modal]" title="甜品艺术" href="images/001/026.jpg"><span><div class="icon"></div><strong>甜品艺术</strong>一个整洁,简单的纯板,并开始装修的方式,你的客人从来没有想过。<em class="more">查看图片 &#187;</em></span><img height="148" width="318" src="images/001/026a.jpg" alt="请查看图片"></a></li>
                        <li class="type-3"><a class="image-icon" rel="gallery[modal]" title="动物形硬煮鸡蛋" href="images/001/027.jpg"><span><div class="icon"></div><strong>动物形硬煮鸡蛋</strong>艺术与这种食物煮硬的鸡蛋,看起来绝对让人叹为观止。<em class="more">查看图片 &#187;</em></span><img height="298" width="318" src="images/001/027a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_009 end -->
<!-- 3dwall_010 begin -->
                        <li><ul><li class="type-3"><a href="https://www.51qianduan.com/">51前端</a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="鳄鱼" href="images/001/029.jpg"><span><div class="icon"></div><strong>鳄鱼</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/029a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="桔子 - 可爱水果艺术" href="images/001/030.jpg"><span><div class="icon"></div><strong>桔子 - 可爱水果艺术</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/030a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_010 end -->
<!-- 3dwall_011 begin -->
                        <li><ul><li class="type-3"><a class="image-icon" rel="gallery[modal]" title="比萨斜塔" href="images/001/031.jpg"><span><div class="icon"></div><strong>比萨斜塔</strong>比萨斜塔(意大利语:Torre pendente di Pisa或Torre di Pisa)是意大利比萨城大教堂的独立式钟楼,于意大利托斯卡纳省比萨城北面的奇迹广场上。广场的大片草坪上散布着一组宗教建筑,它们是大教堂(建造于1063年—13世纪)、洗礼堂(建造于1153年—14世纪)、钟楼(即比萨斜塔)和墓园(建造于1174年),它们的外墙面均为乳白色大理石砌成,各自相对独立但又形成统一罗马式建筑风格。比萨斜塔位于比萨大教堂的后面。而这是个西瓜制作成的一个非常漂亮的演示,以极高精度创建的比萨斜塔,您相信么!O(∩_∩)O ...<em class="more">查看图片 &#187;</em></span><img height="298" width="318" src="images/001/031a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="食品艺术 - 颗粒" href="images/001/032.jpg"><span><div class="icon"></div><strong>食品艺术 - 颗粒</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/032a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="食物艺术 - 龙虲自行车" href="images/001/033.jpg"><span><div class="icon"></div><strong>食物艺术 - 龙虲自行车</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/033a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_011 end -->
<!-- 3dwall_012 begin -->
                        <li><ul><li class="type-1"><a class="image-icon" rel="gallery[modal]" title="食物艺术 - 孔雀" href="images/001/034.jpg"><span><div class="icon"></div><strong>食物艺术 - 孔雀</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/034a.jpg" alt="请查看图片"></a></li>
                        <li class="type-1"><a class="image-icon" rel="gallery[modal]" title="食品拼盘" href="images/001/035.jpg"><span><div class="icon"></div><strong>食品拼盘</strong><em class="more">查看图片 &#187;</em></span><img height="148" width="158" src="images/001/035a.jpg" alt="请查看图片"></a></li>
                        <li class="type-2"><a class="image-icon" rel="gallery[modal]" title="松饼鼓" href="images/001/036.jpg"><span><div class="icon"></div><strong>松饼鼓</strong>松饼是用在这里创造一个美丽而真实的鼓组,来自意大利音乐艺术家的灵感展现!O(∩_∩)O ...<em class="more">查看图片 &#187;</em></span><img height="148" width="318" src="images/001/036a.jpg" alt="请查看图片"></a></li>
                        <li class="type-2"><a class="image-icon" rel="gallery[modal]" title="火影忍者饭团" href="images/001/037.jpg"><span><div class="icon"></div><strong>火影忍者饭团</strong>享受这个可爱而俏皮的食品艺术,创建是简单和容易地,糥米是非常高的营养价值套餐!O(∩_∩)O ...<em class="more">查看图片 &#187;</em></span><img height="148" width="318" src="images/001/037a.jpg" alt="请查看图片"></a></li></ul></li>
<!-- 3dwall_012 end -->
<!-- 3dwall_013 begin -->
                        <li><ul><li class="type-2"><a href="https://www.51qianduan.com/">51前端</a></li>
                        <li class="type-3"><a href="https://www.51qianduan.com/">51前端</a></li></ul></li>
<!-- 3dwall_013 end -->
                    </ul>
                </div>
            <div id="slider-bottom-controls"><a id="slider-scroll-left" href="javascript: void(0);" title="前端开发网">left</a><div id="slider-scroll"><div class="knob"></div></div><a id="slider-scroll-right" href="javascript: void(0);" title="前端开发网">right</a></div>
            </div>
        </div>                               
    <!-- end of slideshow border top -->
    </div>                  
<!-- end of slideshow wrapper -->
</div>
<script type="text/javascript" src="images/js/duotive-slider-gallery.js"></script> 
<script type="text/javascript">
    //首页banner图展示init
	window.addEvent("load", function(){
	var dtSlideshow = new dtSliderGallery({container: $("gallery-slider"),arrowControls: 1,description: 1,transitionDuration: 1000,transitionInterval: 15000});});
   /** 无限滚动
   function getTmplData() {
        jQuery.get("/web/idol/rest/" + jQuery('#pageNo').val() + "/0",
            function(data) {
                for (var i = 0; i < data.items.length; i++ ) {
                    jQuery('#idol_tmpl').tmpl(data.items[i]).appendTo('#main_container');
                }
                jQuery('#pageNo').val(parseInt(jQuery('#pageNo').val()) + 1);
       });
   }
    jQuery(window).bind("scroll",function() {
        // 然后判断窗口的滚动条是否接近页面底部
        if (jQuery(document).scrollTop() + jQuery(window).height() > jQuery(document).height() - 20) {
        	if (jQuery('#pageNo').val() < 3) {
        		getTmplData();
        	}
        }
    }) **/
</script>

相关推荐

发表评论

相关文章