推荐一个不错的图片浏览效果_图象特效-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

推荐一个不错的图片浏览效果_图象特效

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:12 PM

受那位WPSXXX的 IMG大于DIV 的启发写的
有不足之处如果有什么好的修改或建议希望能给我一份copy 谢谢
sjx.saxon@gmail.com

<title>Map Image</title> 
<style type="text/css"> 
* {margin:0px auto;padding:0px;text-align:center;} 
* {font-size:9pt;font-family:Arial;} 
body {margin-top:20px;} 
body{-moz-user-select: none;-khtml-user-select: none;user-select: none;} 
div {position:relative;width:400px;height:400px;} 
font {cursor:default;color:red;font-weight:bold;line-height:16px;border:solid 1px red;} 
/* Img Show Zone */ 
#imgShow {border:solid 1px red;width:400px;height:400px;overflow:hidden;} 
#imgShow img {border:none;} 
/* Control Bar Style */ 
#ctlBar {position:absolute;bottom:0px;right:0px;width:140px;height:140px;border:solid 1px red;overflow:hidden;} 
#ctlBar[id] {bottom:-2px;right:-2px;} 
.ctlTop {width:100%;height:15%;overflow:hidden;cursor:default;color:snow;} 
.ctlBottom {width:100%;height:15%;clear:both;overflow:hidden;} 
.ctlLeft {width:15%;height:70%;float:left;overflow:hidden;color:orange;cursor:default;font-weight:bold;} 
.ctlRight {width:15%;height:70%;float:right;overflow:hidden;} 
#ctlBar img {border:none;display:block;} 
.ctlBottom a {color:snow;text-decoration:none;float:left;font-size:7pt;margin-top:5px;margin-left:2px;margin-right:2px;} 
* html .ctlBottom a {margin-left:0px;margin-right:0px;} 
.ctlBottom a:hover {color:#3cf;} 
#arrUp {position:absolute;left:0px;margin:2px;width:16px;height:16px;} 
#arrDown {position:absolute;bottom:0px;left:0px;margin:2px;width:16px;height:16px;} 
#arrLeft {float:left;margin:2px;width:16px;height:16px;} 
#arrRight {float:right;margin:2px;width:16px;height:16px;} 
.ctlTop span {font-weight:bold;font-family:Arial;color:red;float:right;padding:1px 3px 1px 3px;cursor:pointer;} 
#ctlCenter {width:70%;height:70%;float:left;overflow:hidden;} 
#dragDiv {position:absolute;border:solid 1px blue;height:80px;width:80px;opacity:0.5;background:orange;} 
* html #dragDiv {filter: progid:DXImageTransform.Microsoft.Alpha (opacity=50);} 
#pre {position:relative;} 
/* top:0px;left:0px; */  
/* Hide ctl bar */ 
#ctlHide {position:absolute;right:-1px;bottom:-1px;padding:1px 3px 1px 3px;background-color:red;color:snow;cursor:pointer;display:none;font-weight:bold;} 
* html #ctlHide {right:0px;bottom:0px;} 
/* Test Other Parts */ 
#test {margin-top:10px;} 
#test img{width:120px;height:120px;margin:5px 5px;padding:0px;border:solid 1px dodgerblue;cursor:pointer;} 
</style> 
<script type="text/javascript"> 
var p=1; 
var prep; 
var imgp; 
var px; 
var py; 
var msx; 
var msy; 
var tmpx; 
var tmpy; 
var dx=0; 
var dy=0; 
var dragfg=false; 
function pDrag(e){ 
if(dragfg){ 
var pcon=document.getElementById("ctlCenter"); 
var pdiv=document.getElementById("dragDiv"); 
var pimg=document.getElementById("pre"); 
var dltx=e.clientX-tmpx; 
var dlty=e.clientY-tmpy; 
var marl=(pcon.clientWidth-pimg.width)/2; 
var marr=marl+pimg.width-pdiv.clientWidth; 
var mart=(pcon.clientHeight-pimg.height)/2; 
var marb=mart+pimg.height-pdiv.clientHeight; 
var divt=parseInt(pdiv.style.top); 
var divl=parseInt(pdiv.style.left); 
var demox=divl+dltx; 
var demoy=divt+dlty; 
if((demox>=marl) && (demox<=marr)) pdiv.style.left=demox+"px"; 
if((demoy>=mart) && (demoy<=marb)) pdiv.style.top=demoy+"px"; 
tmpx=e.clientX; 
tmpy=e.clientY; 
//return false; 
} 
} 
function sDrag(e) 
{ 
var temp = (typeof e.target != "undefined")?e.target:e.srcElement; 
dx=0; 
dy=0; 
if(!dragfg) { 
msx=e.clientX; 
msy=e.clientY; 
} 
if(temp.id=="dragDiv"){ 
dragfg=true; 
px=(typeof(e.offsetX)=="undefined")?e.layerX-2:e.offsetX; 
py=(typeof(e.offsetY)=="undefined")?e.layerY-2:e.offsetY; 
tmpx=e.clientX; 
tmpy=e.clientY; 
} 
} 
function eDrag(e){ 
dragfg=false; 
var scrLeft=parseInt(document.getElementById("dragDiv").style.left)-(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2; 
var scrTop=parseInt(document.getElementById("dragDiv").style.top)-(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2; 
var ppp=document.getElementById("imgShow").clientWidth/document.getElementById("dragDiv").clientWidth; 
o.scrollTop=scrTop*ppp; 
o.scrollLeft=scrLeft*ppp; 
} 
</script> 
 
 
<div> 
<div id="imgShow"> 
<img src="/static/imghw/default1.png" data-src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" class="lazy" id="pic" alt="Oops"> 
</div> 
<div id="ctlBar"> 
<div class="ctlTop">
<span onclick="document.getElementById('ctlBar').style.display='none';document.getElementById('ctlHide').style.display='block';">Hide</span>Design by saxon</div> 
<div class="ctlLeft">
T
O
O
L
S</div> 
<div class="ctlRight"> 
<font id="arrUp" onmouseover="imgScroll('up');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">↑</font> 
<font id="arrDown" onmouseover="imgScroll('down');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">↓</font> 
</div> 
<div id="ctlCenter">
<img src="/static/imghw/default1.png" data-src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" class="lazy" id="pre" alt="Oops"> 
<div id="dragDiv" onmousedown="sDrag(event);" onmousemove="pDrag(event);" onmouseup="eDrag(event);" onmouseout="eDrag(event);"></div> 
</div> 
<div class="ctlBottom"> 
<font id="arrLeft" onmouseover="imgScroll('left');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">←</font> 
<a href="mailto:sjx.saxon@gmail.com">sjx.saxon@gmail.com</a> 
<font id="arrRight" onmouseover="imgScroll('right');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">→</font> 
</div> 
</div> 
<span id="ctlHide" onclick="document.getElementById('ctlBar').style.display='block';document.getElementById('ctlHide').style.display='none';">Display</span> 
</div> 
<p id="test"> 
<img src="/static/imghw/default1.png" data-src="http://img.ea3w.com/article/0/420/likNolm87uUbI.jpg" class="lazy" alt="Oops" onclick="imgChg(this.src)"> 
<img src="/static/imghw/default1.png" data-src="http://www.yczhang.com/upload/200606021857377727.jpg" class="lazy" alt="Oops" onclick="imgChg(this.src)"> 
<img src="/static/imghw/default1.png" data-src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" class="lazy" alt="Oops" onclick="imgChg(this.src)"> 
<img src="/static/imghw/default1.png" data-src="http://image2.sina.com.cn/gm/o/n/2005-03-23/U508P115T9D91113F168DT20050323104505.JPG" class="lazy" alt="Oops" onclick="imgChg(this.src)"> 
</p> 
<p>本地浏览IE下有效<input type="file" id="viewLocal"><input type="button" value="Change Pic" onclick="chkValue('viewLocal');"></p> 
<p>URL图片地址浏览<input type="text" id="viewOnline"><input type="button" value="Change Pic" onclick="chkValue('viewOnline');"></p> 
<script type="text/javascript"> 
function imgChg(s){ 
if(document.getElementById('ctlBar').style.display=="none"){ 
document.getElementById('ctlBar').style.display="block"; 
document.getElementById('ctlHide').style.display="none"; 
var flag=true; 
} 
var newImg=document.createElement("img"); 
newImg.id="pre"; 
newImg.alt="Oops"; 
newImg.onmouseout="eDrag(event);" 
newImg.src=s; 
document.getElementById("pic").src=s; 
document.getElementById("ctlCenter").replaceChild(newImg,document.getElementById("pre")); 
preImgInit(); 
if(flag){ 
document.getElementById('ctlBar').style.display="none"; 
document.getElementById('ctlHide').style.display="block"; 
} 
o.scrollTop=0; 
o.scrollLeft=0; 
} 
function chkValue(ob) 
{ 
var str=document.getElementById(ob).value.split('.')[document.getElementById(ob).value.split('.').length-1].toLowerCase(); 
if(/^jpg$|^gif$|^ico$|^png$|^bmp$/.test(str)) imgChg(document.getElementById(ob).value); 
} 
document.getElementById("viewOnline").value="http://image2.sina.com.cn/gm/o/n/2005-03-22/U508P115T9D90812F168DT20050322105759.jpg"; 
</script> 
<script type="text/javascript"> 
var sp=5; 
var tc; 
function imgScroll(d){ 
var ptx=o.scrollLeft; 
var pty=o.scrollTop; 
if(tc) clearInterval(tc); 
if(d=="up"){ 
tc=setInterval("up()",30); 
} 
else if(d=="down"){ 
tc=setInterval("down()",30); 
} 
else if(d=="left"){ 
tc=setInterval("left()",30); 
} 
else if(d=="right"){ 
tc=setInterval("right()",30); 
} 
else{ 
return alert("There must be something wrong..."); 
} 
} 
function up() {o.scrollTop -= sp; 
document.getElementById("dragDiv").style.top =(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+o.scrollTop*prep+"px";} 
function down() {o.scrollTop += sp; 
document.getElementById("dragDiv").style.top =(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+o.scrollTop*prep+"px";} 
function left() {o.scrollLeft -= sp; 
document.getElementById("dragDiv").style.left =(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2+o.scrollLeft*prep+"px";} 
function right() {o.scrollLeft += sp; 
document.getElementById("dragDiv").style.left =(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2+o.scrollLeft*prep+"px";} 
function mvStop() 
{ 
if(tc) clearInterval(tc); 
} 
</script> 
<script type="text/javascript"> 
function preImgInit(){ 
var imgx=document.getElementById("pre").width; 
var imgy=document.getElementById("pre").height; 
if(imgx==imgy) 
{ 
document.getElementById("pre").style.width="100%"; 
document.getElementById("pre").style.height="100%"; 
prep=document.getElementById("pre").clientHeight/imgy; 
imgp=document.getElementById("imgShow").clientHeight/imgy; 
document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientHeight+"px"; 
document.getElementById("dragDiv").style.height=imgp*document.getElementById("pre").clientHeight+"px"; 
document.getElementById("dragDiv").style.left="0px"; 
document.getElementById("dragDiv").style.top="0px"; 
} 
else if(imgx>imgy) 
{ 
document.getElementById("pre").style.width="100%"; 
document.getElementById("pre").style.height=imgy/imgx*100+"%"; 
prep=document.getElementById("pre").clientWidth/imgx; 
imgp=document.getElementById("imgShow").clientWidth/imgx; 
document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientWidth+"px"; 
document.getElementById("dragDiv").style.height=imgp*document.getElementById("pre").clientWidth+"px"; 
document.getElementById("dragDiv").style.left="0px"; 
document.getElementById("dragDiv").style.top=(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+"px"; 
document.getElementById("pre").style.top=(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+"px"; 
} 
else 
{ 
document.getElementById("pre").style.height="100%"; 
document.getElementById("pre").style.width=imgx/imgy*100+"%"; 
prep=document.getElementById("pre").clientHeight/imgy; 
imgp=document.getElementById("imgShow").clientHeight/imgy; 
document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientHeight+"px"; 
document.getElementById("dragDiv").style.height=imgp*document.getElementById("pre").clientHeight+"px"; 
document.getElementById("dragDiv").style.top="0px"; 
document.getElementById("dragDiv").style.left=(document.getElementById("pre").offsetLeft-1)+"px"; 
} 
} 
document.body.onselectstart=function(){return false}; 
preImgInit(); 
var o=document.getElementById("imgShow"); 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

(不会封装代码有待更一步优化...)
关于层拖动第一次写参考了一些别人的方法直接在mousedown里加mousemove事件在mouseup里取消move事件写不来只能手动加在div上面加3个事件...

PS:貌似这素自从加入51js后第2个原创(也不知道别人写过没应该写过吧...) 记的没错的话和第一次写相隔了4年多了...-_-|||...看着代码能运行感觉真好早知道应该考计算机系的...

打包文件下载

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

1 bulan yang lalu By DDD

R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?

1 bulan yang lalu By DDD

R.E.P.O. Tetapan grafik terbaik

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

1 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7393

Tutorial Java

1630

Tutorial CakePHP

1357

Tutorial Laravel

1268

Tutorial PHP

1217

Tunjukkan Lagi

Related knowledge

Ganti aksara rentetan dalam javascript Mar 11, 2025 am 12:07 AM

Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi

8 plugin susun atur halaman jquery yang menakjubkan Mar 06, 2025 am 12:48 AM

Leverage JQuery untuk Layouts Laman Web yang mudah: 8 Plugin Essential JQuery memudahkan susun atur laman web dengan ketara. Artikel ini menyoroti lapan plugin jQuery yang kuat yang menyelaraskan proses, terutamanya berguna untuk penciptaan laman web manual

Bina Aplikasi Web Ajax anda sendiri Mar 09, 2025 am 12:11 AM

Jadi di sini anda, bersedia untuk mempelajari semua perkara ini yang dipanggil Ajax. Tetapi, apa sebenarnya? Istilah Ajax merujuk kepada kumpulan teknologi longgar yang digunakan untuk membuat kandungan web yang dinamik dan interaktif. Istilah Ajax, yang asalnya dicipta oleh Jesse J

10 JQuery Fun and Games Plugin Mar 08, 2025 am 12:42 AM

10 Plugin Permainan JQuery yang menyeronokkan untuk menjadikan laman web anda lebih menarik dan meningkatkan keletihan pengguna! Walaupun Flash masih merupakan perisian terbaik untuk membangunkan permainan web kasual, jQuery juga boleh menghasilkan kesan yang mengejutkan, dan walaupun tidak setanding dengan permainan flash aksi tulen, dalam beberapa kes, anda juga boleh bersenang -senang di penyemak imbas anda. permainan jquery tic toe "Hello World" pengaturcaraan permainan kini mempunyai versi jQuery. Kod sumber JQuery Game Composition Crazy Word Ini adalah permainan mengisi kosong, dan ia dapat menghasilkan beberapa hasil yang pelik kerana tidak mengetahui konteks perkataan. Kod sumber JQuery Mine Sweeping Game

Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri? Mar 18, 2025 pm 03:12 PM

Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.

Kandungan kotak beban secara dinamik menggunakan ajax Mar 06, 2025 am 01:07 AM

Tutorial ini menunjukkan membuat kotak halaman dinamik yang dimuatkan melalui AJAX, membolehkan Refresh Instant tanpa tambah nilai halaman penuh. Ia memanfaatkan JQuery dan JavaScript. Fikirkannya sebagai loader kotak kandungan gaya Facebook tersuai. Konsep Utama: Ajax dan JQuery

JQuery Parallax Tutorial - Latar Belakang Header Animasi Mar 08, 2025 am 12:39 AM

Tutorial ini menunjukkan cara membuat kesan latar belakang paralaks yang menawan menggunakan jQuery. Kami akan membina sepanduk header dengan imej berlapis yang mewujudkan kedalaman visual yang menakjubkan. Plugin yang dikemas kini berfungsi dengan JQuery 1.6.4 dan kemudian. Muat turun

Cara Menulis Perpustakaan Sesi Kurang Kuki Untuk JavaScript Mar 06, 2025 am 01:18 AM

Perpustakaan JavaScript ini memanfaatkan Window.Name Property untuk menguruskan data sesi tanpa bergantung pada kuki. Ia menawarkan penyelesaian yang mantap untuk menyimpan dan mengambil pembolehubah sesi di seluruh pelayar. Perpustakaan menyediakan tiga kaedah teras: sesi

See all articles