`
xhuang
  • 浏览: 30650 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

jquery图片点击自动翻页实现

    博客分类:
  • JQ
阅读更多

采用JQuey要实现图片点击自动向上,向下翻页! 代码:

 

 

$(document).ready(function() {
	$("img").mousemove(function(e){  
		var positionX=e.originalEvent.layerX||e.originalEvent.x||0;
		if(positionX<=$(this).width()/2){           
			 this.style.cursor='url("/image/single/pre.cur"),auto';
			 $(this).attr('title','点击查看上一张');
			 $(this).parent().attr('href','$url&goto=up'); 
		}else{  
			 this.style.cursor='url("/image/single/next.cur"),auto';
			 $(this).attr('title','点击查看下一张');
			 $(this).parent().attr('href','$url&goto=down');
		} 
	});
});
 

 

以上基本实现功能啦!!!

 

付:

 

关于chrome下:

 

 

event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.
 

详细可以访问http://stackoverflow.com/questions/7825448/webkit-issues-with-event-layerx-and-event-layery

 

 

 

 

0
0
分享到:
评论

相关推荐

    图片自动轮播翻页jquery

    "图片自动轮播翻页jquery"是利用JavaScript库jQuery实现的一种动态效果,它使得图片轮播更加交互友好,支持用户通过多种方式进行翻页。在这个场景下,我们主要讨论以下几个关键知识点: 1. **jQuery**:jQuery是一...

    可左右翻页的jQuery效果

    总结来说,"可左右翻页的jQuery效果"是通过jQuery库实现的一种用户界面交互设计,它结合了事件监听、CSS样式操作和动画效果,为用户提供了一种便捷的图片浏览方式。通过理解和掌握这些技术,开发者能够创建出更富有...

    java结合jquery插件实现无限滚动自动翻页源代码.

    综上所述,"java结合jquery插件实现无限滚动自动翻页源代码"这个项目涵盖了前端和后端的多种技术,涉及到了用户界面的交互优化、数据加载的效率提升以及多设备适配等多个方面。通过学习和实践这样的项目,开发者可以...

    jquery小图片左右滚动点击小图切换显示大图

    在左右滚动图片时,可以使用此方法改变缩略图容器的`left`或`transform`属性,以实现平滑滚动。 5. **数据管理**:为了跟踪当前显示的缩略图和大图,可能需要存储和更新一些状态数据。这可以通过jQuery的`.data()`...

    带上下翻页jquery相册特效代码

    "带上下翻页jQuery相册特效代码"提供了一种简单而高效的解决方案,它允许用户通过点击或滑动来浏览图片,从而为网站增添动态视觉效果。下面将详细介绍这个特效的实现原理和组成部分。 首先,jQuery是一个强大的...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    1. 2款jQuery图片自动切换常用广告代码 2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. ...

    js 一组图片翻页并自动翻页

    在JavaScript编程领域中,"js 一组图片翻页并自动翻页"是一个常见的应用场景,尤其在网站的轮播图或相册展示中。这个功能可以让用户以动态的方式浏览多张图片,同时支持自动切换和手动切换(上一页、下一页)。下面...

    Jquery翻页 超炫 特效

    本主题将深入探讨如何利用jQuery实现“超炫”的图片翻页特效,让网页的用户体验更加生动和吸引人。 首先,我们需要理解jQuery的基本用法。jQuery库通过引入`&lt;script&gt;`标签引入到HTML文件中,例如: ```html ...

    jQuery上下翻页效果的图片轮显切换特效.rar

    接着,利用jQuery选择器选取这些元素,绑定事件监听器,当用户触发指定事件(如点击按钮或者自动定时切换)时,执行相应的翻页动画。同时,为了实现前后翻页的效果,我们需要计算元素的位置和旋转角度,这通常涉及到...

    jQuery和css3翻页效果幻灯片插件

    本文将详细介绍一款基于jQuery和CSS3技术实现的翻页效果幻灯片插件。该插件以其独特的书本翻页动画效果,为网页内容展示提供了新颖且吸引人的方式。 ### jQuery库 jQuery是一款广泛使用的JavaScript库,它简化了...

    jQuery前后翻页焦点图代码.zip

    【jQuery前后翻页焦点图代码】是一个用于网页设计的JavaScript特效,主要应用于创建具有前后翻页功能的五屏焦点图。这种焦点图通常用于展示网站的亮点内容、产品展示或者新闻更新等,通过动态切换图片或内容来吸引...

    带缩略图和左右按钮的jquery相册插件

    2. **缩略图展示**:缩略图通常会显示在主图片下方,用户可以通过点击缩略图快速跳转到对应的全尺寸图片,提高了浏览效率。 3. **自动播放**:可选的自动播放功能使得相册能像幻灯片一样自动切换图片,为用户带来...

    纯jquery图片滑动(自动滚动)

    【jQuery图片滑动轮播实现详解】 在网页设计中,图片滑动轮播是一种常见的展示方式,用于在有限的空间内展示多张图片或内容。在本文中,我们将深入探讨如何使用jQuery这一强大的JavaScript库来创建一个自动滚动的...

    jquery图片相册幻灯片带对话框提示鼠标点击一张张相册图片放大效果

    本项目“jquery图片相册幻灯片带对话框提示鼠标点击一张张相册图片放大效果”是利用jQuery实现的一个功能丰富的图片展示组件,特别适合于网站中的照片画廊或产品展示。 首先,jQuery图片相册的基础在于动态切换图片...

    jquery实现带有导航条的超酷全屏幻灯自动翻页展示效果.zip

    7. **触发动画**:使用jQuery的`hover()`或`click()`事件监听用户交互,根据用户行为触发幻灯片的切换,例如在鼠标悬停或点击时开始或停止自动翻页。 8. **响应式设计**:为了确保在不同设备上都能良好展示,我们...

    js和jQuery实现图片轮播

    本文将深入探讨如何使用JavaScript和jQuery库来实现这种动态效果,特别是三种不同的图片轮播风格。 首先,JavaScript是网页动态交互的基础,它可以操作DOM(文档对象模型)以实现动态更新页面内容。在图片轮播中,...

    jQuery图片自动手动切换展示

    总之,"jQuery图片自动手动切换展示"这个案例是一个很好的学习材料,它展示了如何利用jQuery实现图片轮播功能,结合自动切换和手动切换,为网页增添互动性。通过理解并实践这个案例,开发者可以进一步掌握jQuery的...

    jquery纵向滚动翻页相册

    《jQuery纵向滚动翻页相册实现详解》 在网页设计中,相册是常见的元素之一,用于展示图片或多媒体内容。传统的相册展示方式多为横向滑动或点击按钮进行切换,而随着用户界面设计的不断创新,纵向滚动翻页相册因其...

    jquery手动自动图片切换.rar_jquery手动自动图片切换

    【jQuery手动自动图片切换】是一种常见的网页交互设计技术,它基于JavaScript库jQuery实现,用于创建动态的、引人注目的图片轮播效果。在网页设计中,这种功能常常被用作焦点图或幻灯片展示,能够有效地吸引用户的...

Global site tag (gtag.js) - Google Analytics