威尼斯www.9778.com-威尼斯正版官方网站

jQuery实现点击图片翻页展示效果的方法_jquery_脚本之家威尼斯www.9778.com

日期:2020-01-01编辑作者:服务器&运维

威尼斯www.9778.com 1

相关文章

相关搜索:

今天看啥

搜索技术库

返回首页

  • iOS9无法打开爱思助手解决方
  • iPhone怎么打电话
  • iPhone苹果如何同时接听两个电话
  • 三星S6Edge怎么拍摄GIF图片
  • 华为Mate7如何开启按电源键结束通话
  • 红米2自动接听怎么设置?

相关频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

 fetch_pages.php

基于jQuery实现的点击图片翻页展示效果

帮客评论

 php代码

若不能显示效果,则刷新页面可正常。

jQuery实现点击图片翻页展示效果的方法

 这篇文章主要介绍了jQuery实现点击图片翻页展示效果的方法,涉及jQuery操作图片的操作技巧,非常具有实用价值,需要的朋友可以参考下

 

 

本文实例讲述了jQuery实现点击图片翻页展示效果的方法。分享给大家供大家参考。具体实现方法如下:

 

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>基于jQuery实现的点击图片翻页展示效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.div{width:240px;height:90px;z-index:0;position:absolute;left:10px;border:2px #3300FF solid;border:0px;color:#FFFFFF;margin-left:320px;}
</style>
<script type="text/javascript" src="/images/jquery1.3.2.js"></script>
<script type="text/javascript">
$(function(){
var z=-1;
$("div").click(function(){
$(this).animate({left:"350px"},1000,function(){$(this).css("zIndex",z--)}).animate({left:"10px"},1000);
})
});
</script>
</head>
<body>若不能显示效果,则刷新页面可正常。
<div class="div"><img src="images/m01.jpg"></div>
<div class="div"><img src="images/m02.jpg"></div>
<div class="div"><img src="images/m03.jpg"></div>
<div class="div"><img src="images/m04.jpg"></div>
</body>
</html>

 

希望本文所述对大家的jQuery程序设计有所帮助。

这篇文章主要介绍了jQuery实现点击图片翻页展示效果的方法,涉及jQuery操作图片的操作技巧,非常具有...

<div id="results"></div> 
<div align="center"> 
<button class="load_more" id="load_more_button">load More</button> 
<div class="animation_image" style="display:none;"><img src="ajax-loader.gif"> Loading...</div> 
</div> 

威尼斯www.9778.com 2

以上内容是小编给大家介绍的基于ajax实现点击加载更多无刷新载入到本页,希望大家喜欢。

希望本文所述对大家的jQuery程序设计有所帮助。

您可能感兴趣的文章:

  • 如何使用AJAX实现按需加载【推荐】
  • ajax异步加载图片实例分析
  • JQuery实现Ajax加载图片的方法
  • js ajax加载时的进度条代码
  • javascript+ajax实现产品页面加载信息
  • jQuery+AJAX实现无刷新下拉加载更多
  • jQuery结合AJAX之在页面滚动时从服务器加载数据
  • jQuery结合ajax实现动态加载文本内容
  • Ajax加载外部页面弹出层效果实现方法
  • php+ajax+jquery实现点击加载更多内容
  • php+ajax实现无刷新动态加载数据技术
  • jquery ajax局部加载方法详解(实现代码)

本文实例讲述了jQuery实现点击图片翻页展示效果的方法。分享给大家供大家参考。具体实现方法如下:

JavaScript 代码

威尼斯www.9778.com 3

威尼斯www.9778.com 4

威尼斯www.9778.com 5

<script type="text/javascript"> 
$(document).ready(function() { 
  var track_click = ; //track user click on "load more" button, righ now it is click 
  var total_pages = <?php echo $total_pages; ?>; 
  $('#results').load("fetch_pages.php", {'page':track_click}, function() {track_click++;}); //initial data to load 
  $(".load_more").click(function (e) { //user clicks on button 
    $(this).hide(); //hide load more button on click 
    $('.animation_image').show(); //show loading image 
    if(track_click <= total_pages) //make sure user clicks are still less than total pages 
    { 
      //post page number and load returned data into result element 
      $.post('fetch_pages.php',{'page': track_click}, function(data) { 
        $(".load_more").show(); //bring back load more button 
        $("#results").append(data); //append data received from server 
        //scroll page to button element 
        $("html, body").animate({scrollTop: $("#load_more_button").offset().top}, ); 
        //hide loading image 
        $('.animation_image').hide(); //hide loading image once data is received 
        track_click++; //user click increment on load button 
      }).fail(function(xhr, ajaxOptions, thrownError) {  
        alert(thrownError); //alert any HTTP error 
        $(".load_more").show(); //bring back load more button 
        $('.animation_image').hide(); //hide loading image once data is received 
      }); 
      if(track_click >= total_pages-) 
      { 
        //reached end of the page yet? disable load button 
        $(".load_more").attr("disabled", "disabled"); 
      } 
     } 
    }); 
}); 
</script>

复制代码 代码如下:

数据库结构与《ajax 翻页》是一样的

<?php 
include("conn.php"); 
$item_per_page = 3; 
//sanitize post value 
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH); 

//throw HTTP error if page number is not valid 
if(!is_numeric($page_number)){ 
  header('HTTP/1.1 500 Invalid page number!'); 
  exit(); 
} 

//get current starting point of records 
$position = ($page_number * $item_per_page); 

//Limit our results within a specified range.  
$results = mysql_query("SELECT * FROM content ORDER BY id DESC LIMIT $position, $item_per_page"); 

//output results from database 
echo '<ul class="page_result">'; 
while($row = mysql_fetch_array($results)) 
{ 
  echo '<li id="item_'.$row["id"].'">'.$row["id"].') '.$row["name"].''.$row["message"].'</li>'; 
} 
echo '</ul>'; 
?> 

效果演示

XML/HTML代码

先给大家展示效果图:

本例是分页的另外一种显示方式,并不是隐藏未显示的内容

本文由威尼斯www.9778.com发布于服务器&运维,转载请注明出处:jQuery实现点击图片翻页展示效果的方法_jquery_脚本之家威尼斯www.9778.com

关键词:

JS+CSS实现Li列表隔行换色效果的方法_javascript技巧_脚本之家

本文实例讲述了JavaScript实现文字与图片拖拽效果的方法。分享给大家供大家参考。具体实现方法如下: 本文实例讲述...

详细>>

建议27:明晓类公共领域的方法都是虚方法

本文实例讲述了js实现下拉框选择要显示图片的方法。分享给大家供大家参考。具体实现方法如下: 众所周知,在C...

详细>>

JS+CSS实现可拖动的弹出提示框

本文实例讲述了JS+CSS实现可拖动的弹出提示框。分享给大家供大家参考。具体实现方法如下: JS+CSS实现可拖动的弹出...

详细>>

JS+CSS实现Li列表隔行换色效果的方法

本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法。分享给大家供大家参考。具体实现方法如下: JS+CSS实现Li列表隔...

详细>>