- 浏览: 38881 次
- 性别:
- 来自: 北京
-
最新评论
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS弹性图片放大代码</title>
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #000;
position: absolute;
cursor: crosshair;
}
#diapoContainer {
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
background: #222;
overflow: hidden;
}
.imgDC {
position: absolute;
cursor: pointer;
border: #000 solid 2px;
filter: alpha(opacity=90);
opacity: 0.9;
visibility: hidden;
}
.spaDC {
position: absolute;
filter: alpha(opacity=20);
opacity: 0.2;
background: #000;
visibility: hidden;
}
.imgsrc {
position: absolute;
width: 120px;
height: 67px;
visibility: hidden;
margin: 4%;
}
#bkgcaption {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 6%;
background:#1a1a1a;
}
#caption {
position: absolute;
font-family: arial, helvetica, verdana, sans-serif;
white-space: nowrap;
color: #fff;
bottom: 0px;
width: 100%;
left: -10000px;
text-align: center;
}
</style>
<script type="text/javascript">
var xm;
var ym;
document.onmousemove = function(e){
if(window.event) e=window.event;
xm = (e.x || e.clientX);
ym = (e.y || e.clientY);
}
function resize() {
if(diapo)diapo.resize();
}
onresize = resize;
setOpacity = function(o, alpha){
if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
}
diapo = {
O : [],
DC : 0,
img : 0,
txt : 0,
N : 0,
xm : 0,
ym : 0,
nx : 0,
ny : 0,
nw : 0,
nh : 0,
rs : 0,
rsB : 0,
zo : 0,
tx_pos : 0,
tx_var : 0,
tx_target : 0,
attraction : 2,
acceleration : .9,
dampening : .1,
zoomOver : 2,
zoomClick : 6,
transparency : .8,
font_size: 18,
resize : function(){
with(this){
nx = DC.offsetLeft;
ny = DC.offsetTop;
nw = DC.offsetWidth;
nh = DC.offsetHeight;
txt.style.fontSize = Math.round(nh / font_size) + "px";
if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();
rsB = rs;
}
},
CDiapo : function(o){
this.o = o;
this.x_pos = this.y_pos = 0;
this.x_origin = this.y_origin = 0;
this.x_var = this.y_var = 0;
this.x_target = this.y_target = 0;
this.w_pos = this.h_pos = 0;
this.w_origin = this.h_origin = 0;
this.w_var = this.h_var = 0;
this.w_target = this.h_target = 0;
this.over = false;
this.click = false;
this.spa = document.createElement("span");
this.spa.className = "spaDC";
diapo.DC.appendChild(this.spa);
this.img = document.createElement("img");
this.img.className = "imgDC";
this.img.src = o.src;
this.img.O = this;
diapo.DC.appendChild(this.img);
setOpacity(this.img, diapo.transparency);
this.img.onselectstart = new Function("return false;");
this.img.ondrag = new Function("return false;");
this.img.onmouseover = function(){
diapo.tx_target=0;
diapo.txt.innerHTML=this.O.o.alt;
this.O.over=true;
setOpacity(this,this.O.click?diapo.transparency:1);
}
this.img.onmouseout = function(){
diapo.tx_target=-diapo.nw;
this.O.over=false;
setOpacity(this,diapo.transparency);
}
this.img.onclick = function() {
if(!this.O.click){
if(diapo.zo && diapo.zo != this) diapo.zo.onclick();
this.O.click = true;
this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;
this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;
diapo.zo = this;
setOpacity(this,diapo.transparency);
} else {
this.O.click = false;
this.O.over = false;
this.O.resize();
diapo.zo = 0;
}
}
this.resize = function (){
with (this) {
x_origin = o.offsetLeft;
y_origin = o.offsetTop;
w_origin = o.offsetWidth;
h_origin = o.offsetHeight;
}
}
this.position = function (){
with (this) {
w_target = w_origin;
h_target = h_origin;
if(over){
w_target = w_origin * diapo.zoomOver;
h_target = h_origin * diapo.zoomOver;
x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));
y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));
} else {
x_target = x_origin;
y_target = y_origin;
}
if(click){
w_target = w_origin * diapo.zoomClick;
h_target = h_origin * diapo.zoomClick;
}
x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);
diapo.rs += (Math.abs(x_var) + Math.abs(y_var));
with(img.style){
left = Math.round(x_pos) + "px";
top = Math.round(y_pos) + "px";
width = Math.round(Math.max(0, w_pos)) + "px";
height = Math.round(Math.max(0, h_pos)) + "px";
zIndex = Math.round(w_pos);
}
with(spa.style){
left = Math.round(x_pos + w_pos * .1) + "px";
top = Math.round(y_pos + h_pos * .1) + "px";
width = Math.round(Math.max(0, w_pos * 1.1)) + "px";
height = Math.round(Math.max(0, h_pos * 1.1)) + "px";
zIndex = Math.round(w_pos);
}
}
}
},
run : function(){
diapo.xm = xm - diapo.nx;
diapo.ym = ym - diapo.ny;
diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
for(var i in diapo.O) diapo.O[i].position();
setTimeout("diapo.run();", 16);
},
images_load : function(){
var M = 0;
for(var i=0; i<diapo.N; i++) {
if(diapo.img[i].complete) {
diapo.img[i].style.position = "relative";
diapo.O[i].img.style.visibility = "visible";
diapo.O[i].spa.style.visibility = "visible";
M++;
}
resize();
}
if(M<diapo.N) setTimeout("diapo.images_load();", 128);
},
init : function() {
diapo.DC = document.getElementById("diapoContainer");
diapo.img = diapo.DC.getElementsByTagName("img");
diapo.txt = document.getElementById("caption");
diapo.N = diapo.img.length;
for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));
diapo.resize();
diapo.tx_pos = -diapo.nw;
diapo.tx_target = -diapo.nw;
diapo.images_load();
diapo.run();
}
}
</script>
</head>
<body>
<div id="diapoContainer">
<img class="imgsrc" src="images/1228379135mN6mpjBO.jpg">
<img class="imgsrc" src="images/20071118171224148_2.jpg">
<img class="imgsrc" src="images/20071118165814235_2.jpg">
<img class="imgsrc" src="images/1228379135mN6mpjBO.jpg">
<img class="imgsrc" src="images/20071118171224148_2.jpg">
<img class="imgsrc" src="images/20071118165814235_2.jpg">
<img class="imgsrc" src="images/1228379135mN6mpjBO.jpg">
<img class="imgsrc" src="images/20071118171224148_2.jpg">
<img class="imgsrc" src="images/20071118165814235_2.jpg">
<img class="imgsrc" src="images/1228379135mN6mpjBO.jpg">
<img class="imgsrc" src="images/20071118171224148_2.jpg">
<img class="imgsrc" src="images/20071118165814235_2.jpg">
<img class="imgsrc" src="images/1228379135mN6mpjBO.jpg">
<img class="imgsrc" src="images/20071118171224148_2.jpg">
<img class="imgsrc" src="images/20071118165814235_2.jpg">
<img class="imgsrc" src="images/1228379135mN6mpjBO.jpg">
<div id="bkgcaption"></div>
<div id="caption"></div>
</div>
<script type="text/javascript">
function dom_onload() {
if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();
</script>
</body>
</html>
- images.rar (462.2 KB)
- 下载次数: 22
发表评论
-
404 not found 精彩页面
2010-09-10 11:31 1282http://www.woiweb.net/unique- ... -
js弹出可拖动div
2010-09-03 11:02 1137弹出DIV同时 ... -
基于JavaScript的气泡提示网页版
2010-09-01 16:39 2047基于JavaScript的气泡提示网页版，气泡提示大家也许 ... -
滑动TAB，滑动门
2010-09-01 16:30 1133滑动TAB，滑动门，CSS+Js代码，貌似很不错的样子， ... -
规定区域的JS拖动展示效果
2010-09-01 16:06 905规定区域的JS拖动展示，运行看下效果你就明白了，在指定区域内显 ... -
JavaScript随机图片显示
2010-09-01 15:56 1354JavaScript随机图片显示，每次刷新一下网页就会载入不同 ... -
JavaScript封装的平滑图片滚动，绝不用jQuery
2010-09-01 15:09 954<!DOCTYPE html PUBLIC & ...
相关推荐
JavaScript 生成弹性透明的图片放大代码.rarJavaScript 生成弹性透明的图片放大代码.rarJavaScript 生成弹性透明的图片放大代码.rarJavaScript 生成弹性透明的图片放大代码.rarJavaScript 生成弹性透明的图片放大...
通过递归调用`requestAnimationFrame()`，我们可以创建连续的动画帧，实现图片的弹性放大。 5. **事件监听**： 为了响应用户的交互，比如点击或悬停事件，我们需要使用JavaScript的事件监听器。例如，`...
本资源中包含CSS+JS滚动图片功能代码、CSS将图片自动变为圆角、CSS强制等比例缩小图片、CSS实现自适应的图片...JavaScript 生成弹性透明的图片放大代码、JS图片滚动代码（无缝、平滑）、Js图片连续左右滚动、Js拖动特效...
10:___JavaScript生成弹性透明的图片放大代码 11:___JavaScript由左向右的图片渐变过渡 12:___JavaScript动态控制图片透明度的变化 13:___JavaScript图片放大 14:___JavaScript图片特效 15:___JavaScript图片预加载...
包括了javascript，html，css的各种特效，例如：CSS+JS滚动图片功能代码，JavaScript 生成弹性透明的图片放大代码，动态的Loading文字，逐图片旋转构成3D圆环的展示特效个变大，有点炫的JavaScript立体图片展示。...
包括了javascript，html，css的各种特效，例如：CSS+JS滚动图片功能代码，JavaScript 生成弹性透明的图片放大代码，动态的Loading文字，逐图片旋转构成3D圆环的展示特效个变大，有点炫的JavaScript立体图片展示。...
2. **JavaScript 生成弹性透明的图片放大代码**：这种功能通常涉及到CSS3的`transform`属性和`transition`属性，以及JavaScript来控制放大过程。当用户点击图片时，JavaScript会修改CSS中的`transform`，设置缩放...
JS弹性透明图片放大效果 JS日期生成器 JS展开合拢菜单 QQ在线客服状态检测 超酷围绕成3D模型样式的JavaScript图片旋转展示 倒计时 漂亮简洁实用的JS+CSS滑动门TAB 网页小挂钟 用图片代替提交按钮 自动播放的幻灯片...
util实现Java图片水印添加功能，有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码加以...
- **JavaScript交互**：JavaScript用于增强用户体验，如图片轮播、点击放大、动态加载更多图片等功能。 - **响应式设计**：确保相册在不同设备上（手机、平板、桌面）都有良好的展示效果，通常会利用媒体查询...
这涉及到HTML和CSS的图像和文本布局，以及可能的JavaScript交互，比如图片预加载和点击放大等。 4. **数据库交互**：ASP可以与数据库进行交互，如SQL Server、Access等，以存储和检索图文资料。这可能涉及到ADO...
JavaScript则用于实现交互功能，如轮播图、下拉菜单、产品放大镜效果等。可能还会使用到jQuery或者Vue.js等前端框架，它们简化了DOM操作，提高了开发效率。 对于奢华珠宝首饰这样的高端商品，网站的视觉设计至关...
3. JavaScript逻辑实现：通过JavaScript定义了几个关键变量，包括用于存储随机生成的字母编码的`code`，以及记录正确和错误次数的`okCount`和`errorCount`。通过`document.getElementById`方法获取到页面中的`#char`...
HTML5 Canvas 是一种在网页上绘制图形的API，它允许开发者通过JavaScript动态生成图像，创建出丰富的交互式图形和动画效果。在这个特定的项目中，"HTML5 CANVAS实现秋季感觉的雨伞飘落动画效果源码.zip"，开发者利用...
1. 简化的DOM操作：如$("#id")选择元素，$.fn.extend()扩展插件等，使得JavaScript代码更加简洁。 2. 事件处理：通过.on()、.off()等方法绑定和解绑事件，简化事件处理。 3. 动画效果：.animate()函数可以创建自定义...
3. 图片轮播（Carousel）：通过CSS和JavaScript实现图片自动切换的组件。 4. 悬停效果（Hover Effects）：如按钮、链接的悬停变色、放大等效果。 5. 响应式设计（Responsive Design）：根据屏幕尺寸调整布局和元素...
3. JavaScript交互：如果希望瓷砖具有动态效果，如点击后放大、旋转或者切换内容，可以使用JavaScript来增加交互性。例如，使用addEventListener监听用户的点击事件，然后通过修改CSS属性来改变选中瓷砖的状态。 4....
这个特效完全基于CSS3，无需JavaScript，降低了页面加载负担，同时也保证了在支持CSS3的浏览器上的良好表现。 CSS3是层叠样式表的第三个主要版本，它引入了许多新的特性和功能，让网页设计更加丰富和动态。在这款...