动态切换图片

最新推荐文章于 2024-08-08 23:04:40 发布
最新推荐文章于 2024-08-08 23:04:40 发布
阅读量82 收藏
点赞数
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/zhangdapeng89/blog/38462
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

// JavaScript Document
pop = {
	triggerClass:'picturepop',
	openPopupLinkClass:'popuplink',
	popupClass:'popup',
	displayPrefix:'Hide',
	popContainer:null,
	init:function(){
		if(!document.getElementById || !document.createTextNode){
			return;
		}
		var allLinks = document.getElementsByTagName('a');
		for(var i=0;i<allLinks.length;i++){
			if(!DOMhelp.cssjs('check',allLinks[i],pop.triggerClass)){
				continue;
			}
			DOMhelp.addEvent(allLinks[i],'click',pop.openPopup,false);
			allLinks[i].onclick = DOMhelp.safariClickFix;
			allLinks[i].preset = allLinks[i].innerHTML;
		}
	},
	openPopup:function(e){
		var t = DOMhelp.getTarget(e);
		if(t.nodeName.toLowerCase() != 'a'){
			t = t.parentNode;
		}
		if(!pop.popContainer){
			t.innerHTML = pop.displayPrefix + t.preset;
			pop.popContainer = document.createElement('div');
			DOMhelp.cssjs('add',pop.popContainer,pop.popupClass);
			DOMhelp.cssjs('add',t,pop.openPopupLinkClass);
			var newimg = document.createElement('img');
			newimg.setAttribute('src',t.getAttribute('href'));
			pop.popContainer.appendChild(newimg);
			document.body.appendChild(pop.popContainer);
			pop.positionPopup(t);
		}else{
			pop.killPopup();
			t.innerHTML = t.preset;
			DOMhelp.cssjs('remove',t,pop.openPopupLinkClass);
		}
		DOMhelp.cancelClick(e);
	},
	positionPopup:function(o){
		var x=0;
		var y=0;
		var h=o.offsetHeight;
		while(o!=null){
			x += o.offsetLeft;
			y += o.offsetTop;
			o = o.offsetParent;
		}
		pop.popContainer.style.left = x + 'px';
		pop.popContainer.style.top = y + h + 'px';
	},
	killPopup:function(e){
		pop.popContainer.parentNode.removeChild(pop.popContainer);
		pop.popContainer=null;
		DOMhelp.cancelClick(e);
	}
}
DOMhelp.addEvent(window,'load',pop.init,false);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
	<title>Example: Replacing image popups with layer ads</title>
	<style type="text/css">
 		@import 'style/picturepopu.css';
	</style>
	<!-- <script type="text/javascript" src="js/DOMhelp.js"></script>
	<script type="text/javascript" src="js/picturepopu.js"></script> -->
	<script type="text/javascript" src="js/DOMhelp.js"></script>
	<script type="text/javascript" src="Chapter6/picturePopup.js"></script>
</head>
<body>
	  <p>Sometimes it is better not to wake a
	  <a class="picturepop" href="Chapter6/pictures/thumbs/dog7.jpg">Sleeping Dog</a>.</p>
</body>
</html>

/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
DOMhelp={
	//动态添加和移除一个元素的类
	cssjs:function(a,o,c1,c2){
		switch(a){
			case 'swap':
				if(!DOMhelp.cssjs('check',o,c1)){
					o.className.replace(c2,c1);
				}else{
					o.className.replace(c1,c2);
				}
			break;
			case 'add':
				if(!DOMhelp.cssjs('check',o,c1)){
					o.className += o.className ? ' '+c1 : c1;
				}
			break;
			case 'remove':
				var rep = o.className.match(' '+c1) ? ' '+c1 : c1;
				o.className = o.className.replace(rep,'');
			break;
			case 'check':
				var found = false;
				var temparray = o.className.split(' ');
				for(var i=0;i<temparray.length;i++){
					if(temparray[i]==c1){
						found = true;
					}
				}
				return found;
			break;
		}
	},
	safariClickFix:function(){
      		return false;
    },
    //Find the last sibling of the current node
    lastSibling:function(node){
        var tempObj = node.parentNode.lastChild;
        while(tempObj.nodeType != 1 && tempObj.previousSibling != null){
            tempObj = tempObj.previousSibling;
        }
        return (tempObj.nodeType==1) ? tempObj : false;
    },
    //Find the first sibling of the current node
    firstSibling:function(node){
        var tempObj = node.parentNode.firstChild;
        while(tempObj.nodeType != 1 && tempObj.nextSibling != null){
            tempObj = tempObj.nextSibling;
        }
        return (tempObj.nodeType==1) ? tempObj : false;
    },
    //Retrieve the content fo the first text node sibling of the current node
    getText:function(node){
        if(!node.hasChildNodes()){
            return false;
        }
        var reg=/^\s+$/;
        var tempObj = node.firstChild;
        while(tempObj.nodeType != 3 && tempObj.nextSibling != null || reg.test(tempObj.nodeValue)){
            tempObj = tempObj.nextSibling;
        }
        return (tempObj.nodeType == 3) ? tempObj.nodeValue:false;
    },
    //Set the content of the first text node sibling the current node
    setText:function(node,txt){
        if(!node.hasChildNodes()){
            return false;
        }
        var reg = /^s+$/;
        var tempObj = node.firstChild;
        while(tempObj.nodeType != 3 && tempObj.nextSibling != null || reg.test(tempObj.nodeValue)){
            tempObj = tempObj.nextSibling;
        }
        if(tempObj.nodeType == 3){
            tempObj.nodeValue = txt;
        }else{
            return false;
        }
    },
    
    //Find the text pr previous sibling that is an element
    //and not a text node or line break
    //
    //1表示下一个兄弟节点，-1表示上一个兄弟节点
    closestSibling:function(node,direction){
        var tempObj;
        if(direction == -1 && node.previousSibling != null){
            tempObj = node.previousSibling;
            while(tempObj.nodeType != 1 && tempObj.previousSibling != null){
                tempObj = tempObj.previousSibling;
            }
        }else if(direction==1 && node.nextSibling != null){
            tempObj=tempObj.nextSibling;
            while(tempObj.nodeType != 1 && tempObj.textSibling != null){
                tempObj = tempObj.nextSibling;
            }
        }
        return tempObj.nodeType==1 ? tempObj : false;
    },
    //Create a new link containing the given text
    createLink:function(to,txt){
        var tempObj = document.createElement('a');
        tempObj.appendChild(document.createTextNode(txt));
        tempObj.setAttribute('href',to);
        return tempObj;
    },
    //Create a new element containing the given text
    createTextElem:function(elm,txt){
       var tempObj = document.createElement(elm);
       tempObj.appendChild(document.createTextNode(txt));
       return tempObj;
    },
    //Simulate a debugging console to avoid the nees for alerts
    initDebug:function(){
        if(DOMhelp.debug){
            DOMhelp.stopDebug();
        }
        DOMhelp.debug = document.createElement('div');
        DOMhelp.debug.setAttribute('id',DOMhelp.debugWindowId);
        document.body.insertBefore(DOMhelp.debug,document.body.firstChild);
    },
    setDebug:function(bug){
        if(!DOMhelp.debug){
            DOMhelp.initDebug();
        }
        DOMhelp.debug.innerHTML += bug+'\n';
    },
    stopDebug:function(){
        if(DOMhelp.debug){
            DOMhelp.debug.parentNode.removeChild(DOMhelp.debug);
            DOMhelp.debug = null;
        }
    },
    //Cross-browser event handing for IE5+ ,NS6+ and Mozilla/Gecko
    //By Scott Andrew
    addEvent:function(elm,evType,fn,useCapture){
    	if(elm.addEventListener){
    		elm.addEventListener(evType,fn,useCapture);
    		return true;
    	}else if(elm.attachEvent){
    		var r = elm.attatchEvent('on' + evType,fn);
    		return r;
    	}else{
    		elm['on' + evType] = fn;
    	}
    },
    //为了适应在ie下target被srcElement取代
    //button返回值的不同
    getTarget:function(e){
    	var target;
    	if(window.event){
    		target = window.event.srcElement;
    	}else if(e){
    		target = e.target;
    	}else{
    		target = null;
    	}
    	if(target.nodeName.toLowerCase() != 'a'){
    		target = target.parentNode;
    	}
    	return target;
    },
    //由于Safari支持stopPropagation方法，但是使用它就什么也做不了，不会阻止事件继续冒泡
    stopDefault:function(e){
    	if(window.event && window.event.returnValue){
    		window.event.cancelBubble = true;
    	}
    	if(e && e.preventDefault){
    		e.preventDefault();
    	}
    },
    //一般情况下都需要阻止stopPropagation()和preventDefault()
    cancelClick:function(e){
    	if(window.event && window.event.cancelBubble && window.event.returnValue){
    		window.event.cancelBubble = true;
    		window.event.returnValue = false;
    		return ;
    	}
    	if(e && e.stopPropagation && e.preventDefault){
    		e.stopPropagation();
    		e.preventDefault();
    	}
    	
    }
}

*{
		margin:0;
		padding:0;
	}
	body{
		font-size:.8em;
		font-family:arial,sans-serif;
		color:#333;
		background:#fff;
		padding:.5em;
	}
	h1{
		font-size:1.2em;
	}
	p{
		margin-top:.5em;
	}
	.popup{
		padding:.5em;
		background:url(indicator_medium.gif) center center no-repeat #eee;
		border:1px solid #999;
		position:absolute;
		top:0;
		left:0;
	}
	a.popuplink{
		background:#eee;
		padding:0 .5em;	
		border:1px solid #999;
		text-decoration:none;
		font-weight:bold;
		color:#666;
		margin-bottom:-1px;
	}

图片自己可以替换的，在css中需要替换图片，在html代码汇总需要替换图片

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://my.oschina.net/zhangdapeng89/blog/38462

weixin_34187822
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp动态切换图片及样式
m0_59437963的博客
04-24 1246
<view class="bank2"> <text class="bank2_A" >选择银行卡类型</text> <view class="bank_C" @click="savings(0)" :class="currentswiperboxindex === 0 ? 'bank2_B' : ''"> <text>储蓄卡</text> <image src="../../static/img/.
图片动态切换
08-27
图片动态切换，类似qq空间；图片切换，图片列表
动态图片切换
weixin_30838921的博客
06-18 85
<html> <head> <meta charset="UTF-8"> <title></title> <style> img{ display: block; } </style> <script> /** * 需求 * 点击下一张按钮。让图片切换成下一张图...
动态更换文件或图片
olivechinese
08-28 228
虽然用c#一年多了，但一直抱着得过且过的态度，前些日子在产品中使用到换肤功能，自己抱着头乱闯一通，既然把WEB方式用到了C/S上，看着自己的Class文件一个一个的冒出来，嗯，虽然完成了，但一想到那些配置文件，自己就不禁没心思写下去了，一个控件对应一个图片的配置节点，很是烦恼！随便一个form界面就不知多少个控件，要手写到猴年马月？但看看动态更换图片的功能还是出来，但就是有一点工作量太大了！ 最...
动态切换图片（改变src属性值）
玫瑰余香20100615的专栏
08-21 2731
动态改变HTML图像(动态改变的src属性值 /*function imageChange() { img = document.getElementById('imgChang') if(img.src.match("bulboff")){ img.src = "images/eg_bulbon.gif" } else { img.src = "images/eg_bu
HTML页面；js动态切换图片（2种方法。。。持续更新。。。）
热门推荐
wstm2016的博客
07-17 2万+
一、 思路是先定义一个图片显示块div， 在块内定义图片列表以float：left横排； 改变图片列表的位置以显示不同的图片； HTML代码如下： <div id="slide"> <ul id="photos"> <li><img src="images/pic1.jpg"></li> ...
Unity 动态切换图片
a451319296的博客
10-29 809
动态切换
js动态切换图片的方法
10-24
主要介绍了js动态切换图片的方法,包含完整的css文件与js文件实现技巧,非常具有实用价值,需要的朋友可以参考下
Jquery实现动态切换图片的方法
10-24
主要介绍了Jquery实现动态切换图片的方法,涉及jQuery页面元素操作及链式操作的相关技巧,需要的朋友可以参考下
css 动态切换图片效果
03-13
动态切换图片效果是CSS的一个重要应用，它可以让用户交互时或者根据特定条件改变图片显示，增加页面的互动性和视觉吸引力。下面将详细探讨如何使用CSS实现动态切换图片效果。 首先，我们需要准备HTML结构。一个简单...
js之动态切换图片
anan的博客
08-06 1528
代码需要多敲多练才能越来越熟练，才能不断的挖掘出代码的深层用法！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片切换</title> <style type="text/css"> img{ width...
动态切换图片效果
weixin_30750335的博客
10-21 303
本文介绍的这种动态切换图片效果，具有二十三种切换样式，并不是用动画软件制作的动画，而是用Javascript制作出来的效果，是 不是有点出乎你的意料。更值得一看的是它只用了廖廖几行程序代码，且变换的图片数量可以随意增加却不增加程序代码。你感到奇怪吗？继续往下看你就明白了。　　制作思路：　　给插入的图片加上一个ID（img1)号，以便 Javascript程序对其操作，再给图片加载一个CS...
Qt之动态换图
Sagittarius_Warrior的博客
11-25 1388
Abstract: 1，“动态创建” 2，封装qwt的Plot类 3，拖拽 4，Plot类型转换 一、功能描述 假设有一个信号分析的软件工程，在它的主窗口mainwindow上，左侧是一个测试项列表(QListWidget)，右侧是四个图形窗口(Plot or QTableWidget)用于观察测试项的图形结果。现在要实现的功能是：通过拖拽右侧测试项列表中任一项到右侧的任一窗口，即可在该窗口观
ElementUI 事件回调函数传参技巧与自定义参数应用
No_Name_Cao_Ni_Mei的博客
08-08 406
在使用elementUI时，事件回调函数传递参数是一个常见的需求。使用回调函数：当elementUI组件触发事件时，我们可以通过回调函数传递自定义参数。例如，在el-input组件中，可以使用@change事件，并在回调函数中添加自定义参数。代码示例如下：在方法中，val是事件传递的默认参数，而'myId'是我们自定义的参数。使用$event：另一种方法是使用$event来传递事件对象，然后将其作为参数传递给自定义的方法。例如：这里的$event等同于方法1中的val，而'myId'依然是自定义参数。
Element学习（布局组件、案例操作）（4）
最新发布
m0_74363339的博客
08-08 140
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
自习 leetcode+react官方文档学习
weixin_63681863的博客
08-08 265
哈希完结+ 字符串第一题。
Android TV上OTT PWA应用开发的播放器选择：video.js vs exoplayer
Ranye的博客
08-08 110
二者都是非常主流的播放器，功能相近，不过在此场景下，性能就不同了
Windows系统上使用nvm管理node版本的详细教程
战族狼魂的博客
08-07 923
NVM 是一个非常方便的工具，使得在不同项目之间管理和切换 Node.js 版本变得非常简单。通过本文的步骤，你可以轻松安装和使用 NVM 来管理你的 Node.js 环境。
jquery动态切换图片地址
05-13
你可以通过 jQuery 的 `attr()` 方法来动态切换图片地址。 例如，你有一个图片标签，它的 id 是 `myImage`，初始的图片地址是 `image1.jpg`： ```html ``` 你可以通过以下代码来切换图片地址： ```javascript $...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值