关于touchTouch.jquery.js浏览图片重复的问题

今天在处理图片预览的时候,需要每提交一次,执行touch里的方法,但是点击之后 ,弹出的图片总是同一个,跟踪源码才发现,每执行一次就会将html中的dom加载一个,这样前几张永远都是那几个,所以看不到后面的,于是用执行touch方法之前将dom移除,还是不行,跟踪源码原来dom没有移除,我以为remove方法有问题,百度了半天终于发现问题了,原来添加的dom被当做全局变量保存了起来,于是我将代码移到局部变量中就解决了这个问题。哈哈O(∩_∩)O哈哈~

代码如下

移除dom的代码

$("#galleryOverlay").remove();

         

$(‘#thumbs  a‘).touchTouch();

touch文件里移动的代码,将这些代码变成局部变量即可

var overlay = $(‘<div id="galleryOverlay">‘),

  slider = $(‘<div id="gallerySlider">‘),

  prevArrow = $(‘<a id="prevArrow"></a>‘),

  nextArrow = $(‘<a id="nextArrow"></a>‘),

  pageSpan = $(‘<span id="pagelimit"></span‘),

  overlayVisible = false;
时间: 2024-12-28 11:20:57

关于touchTouch.jquery.js浏览图片重复的问题的相关文章

Jquery.LazyLoad.js实现图片延迟加载功能

从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下. 解决思路大致是两点,一是从LazyLoad本身的滤镜参数下手,发现有一个参数在IE6和IE7是可以用的,就是show,那么在IE6和IE7下用这个特效:二是IE8以上(包

jquery插件实现图片延迟加载(lazyload.js)

http://www.cnblogs.com/tinyphp/archive/2013/04/09/3009385.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/x

Jquery OR Js 实现图片预览

Jquery方法一: <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="jquery.js"></script> </head> <body> <input type='file' id='file'/> <div style=&

js和jquery如何获取图片真实的宽度和高度

按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度 1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都是按照图片的原尺寸来展示,如果手机屏幕太小,太大的图就会超出去!这时候有两种解决办法 1)给所有的图片加上这样的样式 .news img{margin:5

html+css+js(+JQuery)制作扑克牌图片切换效果

要实现的效果图: 先把静态页面写出来: index.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery制作扑克牌图片切换效果<

jquery实现的图片延时加载插件

jquery实现的图片延时加载插件: 在很多网站尤其是图片站,都采用了图片延时加载效果,这样可以有效的减轻服务器的压力,有点自然不言而喻了,下面就和大家分享一个图片延时加载的插件,希望能够给大家带来一定的帮助. 代码如下: <script type="text/javascript"> (function( $ ){ $.fn.imglazyload=function( options ) { var o=$.extend({ attr:'lazy-src', contai

Viewer 是一款强大的 jQuery 图像浏览插件。

Viewer 是一款强大的 jQuery 图像浏览插件. 主要功能: 支持选项 支持方法 支持事件 支持触摸 支持移动 支持缩放 支持旋转 支持键盘 跨浏览器支持 链接: viewer的官方演示,及github上的开源代码. 使用方法: 1.引入css和js <link rel="stylesheet" href="css/viewer.min.css"> <script src="js/viewer.min.js">&l

web浏览图片支持旋转,缩放功能

浏览图片使用了layer插件,旋转需要引用jquery.rotate.min.js 放大缩小是根据图片等比例缩放,下面是本人写的部分代码:在layer.ext.js这个插件的扩展js文件里需要加上如下代码,实现旋转,缩放功能: //旋转 var value = 0; log.imgtit.find('a').on('click', function () { value += 90; log.bigimg.find('img').rotate({ animateTo: value }) });

页面性能优化-原生JS实现图片懒加载

在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片.这种加载图片的方式叫做图片懒加载,又叫做按需加载或图片的延时加载.这样做的好处是:1.可以加快页面首屏渲染的速度:2.节约用户的流量. 一.实现思路 1.图片img标签自定义一个属性data-src来存放真实的地址. 2.当滚动页面时,检查所有的img标签,判断是否出现在事业中,如果