您的位置:

js图片秀代码(js操作图片)

js图片秀代码(js操作图片)

更新:

本文目录一览:

我想把一个图片代码写到js了里面,然后调用这个js,就可以直接显示图片在网页上,怎么写?

这个实现一般有两用方式

1.用js定义一个字符串变量,把图片的字符串写进去,然后div.innerhtml把这个字符串加进去。

2.用类似jquery的js插件,也是先定义图片字符串变量,然后div.append这个字符串就好了。

JavaScript 的网页图片切换代码

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312"

title网页特效 首页图片切换/title

style type="text/css"

/* Reset style */

* { margin:0; padding:0; word-break:break-all; }

body {

background:#fff;

color:#000000;

font:12px/1.6em Helvetica, Arial, sans-serif;

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

h1, h2, h3, h4, h5, h6 { font-size:1em; }

a { color:#0287CA; text-decoration:none; }

a:hover { text-decoration:underline; }

ul, li { list-style:none; }

fieldset, img { border:none; }

legend { display:none; }

em, strong, cite, th { font-style:normal; font-weight:normal; }

input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }

table { border-collapse:collapse; }

html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/

/* iFocus style */

#ifocus { width:650px; height:245px; margin:0px; border:1px solid #DEDEDE; background:#F8F8F8; }

#ifocus_pic { display:inline; position:relative; float:left; width:540px; height:225px; overflow:hidden; margin:10px 0 0 10px; }

#ifocus_piclist { position:absolute; }

#ifocus_piclist li { width:550px; height:225px; overflow:hidden; }

#ifocus_piclist img { width:550px; height:225px; }

#ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0; }

#ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }

#ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; }

#ifocus_btn .current { background: url(img/ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }

#ifocus_opdiv { position:absolute; left:0; bottom:0; width:545px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }

#ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }

#ifocus_tx .normal { display:none; }

/style

script type="text/javascript"

function $(id) { return document.getElementById(id); }

function addLoadEvent(func){

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function(){

oldonload();

func();

}

}

}

function moveElement(elementID,final_x,final_y,interval) {

if (!document.getElementById) return false;

if (!document.getElementById(elementID)) return false;

var elem = document.getElementById(elementID);

if (elem.movement) {

clearTimeout(elem.movement);

}

if (!elem.style.left) {

elem.style.left = "0px";

}

if (!elem.style.top) {

elem.style.top = "0px";

}

var xpos = parseInt(elem.style.left);

var ypos = parseInt(elem.style.top);

if (xpos == final_x ypos == final_y) {

return true;

}

if (xpos final_x) {

var dist = Math.ceil((final_x - xpos)/10);

xpos = xpos + dist;

}

if (xpos final_x) {

var dist = Math.ceil((xpos - final_x)/10);

xpos = xpos - dist;

}

if (ypos final_y) {

var dist = Math.ceil((final_y - ypos)/10);

ypos = ypos + dist;

}

if (ypos final_y) {

var dist = Math.ceil((ypos - final_y)/10);

ypos = ypos - dist;

}

elem.style.left = xpos + "px";

elem.style.top = ypos + "px";

var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";

elem.movement = setTimeout(repeat,interval);

}

function classNormal(iFocusBtnID,iFocusTxID){

var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');

var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');

for(var i=0; iiFocusBtns.length; i++) {

iFocusBtns[i].className='normal';

iFocusTxs[i].className='normal';

}

}

function classCurrent(iFocusBtnID,iFocusTxID,n){

var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');

var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');

iFocusBtns[n].className='current';

iFocusTxs[n].className='current';

}

function iFocusChange() {

if(!$('ifocus')) return false;

$('ifocus').onmouseover = function(){atuokey = true};

$('ifocus').onmouseout = function(){atuokey = false};

var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');

var listLength = iFocusBtns.length;

iFocusBtns[0].onmouseover = function() {

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

if (listLength=2) {

iFocusBtns[1].onmouseover = function() {

moveElement('ifocus_piclist',0,-225,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',1);

}

}

if (listLength=3) {

iFocusBtns[2].onmouseover = function() {

moveElement('ifocus_piclist',0,-450,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',2);

}

}

if (listLength=4) {

iFocusBtns[3].onmouseover = function() {

moveElement('ifocus_piclist',0,-675,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',3);

}

}

}

setInterval('autoiFocus()',3500);

var atuokey = false;

function autoiFocus() {

if(!$('ifocus')) return false;

if(atuokey) return false;

var focusBtnList = $('ifocus_btn').getElementsByTagName('li');

var listLength = focusBtnList.length;

for(var i=0; ilistLength; i++) {

if (focusBtnList[i].className == 'current') var currentNum = i;

}

if (currentNum==0listLength!=1 ){

moveElement('ifocus_piclist',0,-225,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',1);

}

if (currentNum==1listLength!=2 ){

moveElement('ifocus_piclist',0,-450,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',2);

}

if (currentNum==2listLength!=3 ){

moveElement('ifocus_piclist',0,-675,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',3);

}

if (currentNum==3 ){

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

if (currentNum==1listLength==2 ){

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

if (currentNum==2listLength==3 ){

moveElement('ifocus_piclist',0,0,5);

classNormal('ifocus_btn','ifocus_tx');

classCurrent('ifocus_btn','ifocus_tx',0);

}

}

addLoadEvent(iFocusChange);

/script

/head

body

br /

div align="center"

div id="ifocus"

div id="ifocus_pic"

div id="ifocus_piclist" style="left:0; top:0;"

ul

lia href="#" target="_blank"img src="/edu/img/js/200909/1.jpg" alt="武林三国" border="0" //a/li

lia href="#" target="_blank"img src="/edu/img/js/200909/2.jpg" alt="武林英雄" border="0" //a/li

lia href="#" target="_blank"img src="/edu/img/js/200909/3.jpg" alt="商业大亨" border="0" //a/li

lia href="#" target="_blank"img src="/edu/img/js/200909/4.jpg" alt="帝国远征" border="0" //a/li

/ul

/div

div id="ifocus_opdiv"/div

div id="ifocus_tx"

ul

li class="current"2008年度排名第一的网页游戏/li

li class="normal"2009年最新的网页游戏 /li

li class="normal"商业大亨,挑战亿万富翁/li

li class="normal"一款2009年不得不玩的帝国远征/li

/ul

/div

/div

div id="ifocus_btn"

ul

li class="current"img src="/edu/img/js/200909/s1.jpg" alt="" //li

li class="normal"img src="/edu/img/js/200909/s2.jpg" alt="" //li

li class="normal"img src="/edu/img/js/200909/s3.jpg" alt="" //li

li class="normal"img src="/edu/img/js/200909/s4.jpg" alt="" //li

/ul

/div

/div

/div

/body

/html

自己改图片链接和大小~~

Js获取图片原始宽高的实现代码

如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下:

//获取图片原始宽度

function

getNaturalWidthAndHeight(img)

{

var

image

=

new

Image();

image.src

=

img.src;

return

[image.width,image.height];

}

//点击缩略图弹出层,显示原始图片。

//获取class为tz_main_box下的所有p标签下的图片img

$(".tz_main_box

pimg").each(function

(k,

v)

{

$(this).unbind("click");

//解除绑定,防止弹出多次图片层。

$(this).click(function

()

{

var

img

=

v;

//图片对象

var

imgArea

=

getNaturalWidthAndHeight(img);

var

layerWidth

=

imgArea[0]+

5;

if

(layerWidth

1080)

{

layerWidth

=

1080;

}

var

layerHeight

=

imgArea[1]

+

5;

if

(layerHeight

600)

{

layerHeight

=

600;

}

//layer弹出层插件

layer.open({

type:

1,

title:

false,

closeBtn:

0,

area:

[''+layerWidth+'px',

''

+

layerHeight

+

'px'],

skin:

'layui-layer-nobg',

//没有背景色

shadeClose:

true,

closeBtn:

1,

//显示关闭按钮

content:

"centerimg

src='"

+

$(this).attr("src")

+

"'/center"

});

});

});

以上这篇Js获取图片原始宽高的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

js图片秀代码(js操作图片)

本文目录一览: 1、我想把一个图片代码写到js了里面,然后调用这个js,就可以直接显示图片在网页上,怎么写? 2、JavaScript 的网页图片切换代码 3、Js获取图片原始宽高的实现代码 我想把一

2023-12-08
js优秀代码图片,js好玩的代码

本文目录一览: 1、js代码控制图片移动 2、图片自动切换的JS代码 3、JS 显示 上传 图片 ,,高手帮我解释一下这段代码 4、求一个图片自动切换的JS代码。 5、如何用JS实现简单的图片替换 6

2023-12-08
图片转js代码(js页面转图片)

本文目录一览: 1、js实现图片旋转效果 2、图片链接用JS跳转代码怎么写 3、怎么制作网页中图片转换,就是一幅一幅的显示,跟淘宝网的商品展示一样,用到JS代码,代码怎么编写? 4、js图片转换代码,

2023-12-08
js图片时钟实例,js图片时钟实例图

本文目录一览: 1、JS,时钟案例 2、如何使用JS实现一个简易数码时钟 3、js Canvas实现的日历时钟案例有哪些 4、一个JS的简单时钟程序 5、javascript,实现一个时钟,页面显示当

2023-12-08
js图片转动代码(图片切换js特效代码)

本文目录一览: 1、javascript让图片移动的函数 2、JS控制图片向左向右移动的代码 3、js实现图片旋转效果 4、js 怎么实现点击一次图片旋转90度,再点击再转90度呢 5、JavaScr

2023-12-08
js上传图片实现代码(js调用图片代码)

本文目录一览: 1、js如何实现本地图片路径拖放至网页上传? 2、jsp上传图片的js代码怎么写,帮我补充下,谢谢! 3、求一段JS或Jquery异步上传图片的代码 4、js input file文件

2023-12-08
js图片热点编辑器代码(js图片热点编辑器代码大全)

本文目录一览: 1、如何用JS语句显示图片? 2、如何用JS实现简单的图片替换 3、求js代码。在一张图片上实现两个功能 4、js图片上怎么设置热区 5、JS动态在图片上 绘制热区 并 记录坐标! 哪

2023-12-08
js实例图片,js 处理图片

本文目录一览: 1、js鼠标悬停显示文字实例 2、如何用JS语句显示图片? 3、js实现单击图片放大图片的方法 js鼠标悬停显示文字实例 一、首先需要div布局:!DOCTYPE htmlhtml l

2023-12-08
js编写图片手动滚动的代码(js滚动图片怎么做)

本文目录一览: 1、怎么用JS脚本使多张图片滚动? 2、js实现图片滚动效果 3、求JS图片滚动代码 怎么用JS脚本使多张图片滚动? 推荐使用marquee实现图片滚动,示例:marqueescrol

2023-12-08
js显示图片,js图片展示

2023-01-07
js上传选择图片功能代码(js上传图片并预览)

本文目录一览: 1、我需要一个js或者jquery能批量上传图片+预览的功能。急~~~急~~~急~~ 2、怎样用js或者jq实现点击这个图片就可以选择上传还有预览图片啊 3、求一段JS或Jquery异

2023-12-08
图片恶意js代码(恶意网站图片)

本文目录一览: 1、如何有效防止XSS攻击/AJAX跨域攻击 2、360检测出恶意程序js.Crypt.h 这是什么恶意程序,属于病毒吗 3、如何防范上传的图片包含恶意代码 4、网页老是出现js恶意代

2023-12-08
简单的js图片滚动轮播代码,简单的js图片滚动轮播代码大全

2022-11-23
js弹出图片代码(js弹出图片代码怎么办)

本文目录一览: 1、用js脚本,怎么实现弹出选择图片的对话框,并将文件上传到服务器 2、javascript点击查看图片,弹框显示图片,怎么用js怎么实现? 3、js如何实现点击图片弹出窗口并放大这张

2023-12-08
js图片幻灯片模式切换代码(图片切换代码html5)

本文目录一览: 1、Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3) 2、js幻灯片左右切换是怎么做出来的 3、如何设置用JS实现的幻灯片自动切换效果的宽高? 4、JavaScript

2023-12-08
js图片切换代码合集(javascript图片切换代码)

本文目录一览: 1、JS自动切换图片代码问题 2、求一个图片轮换JS效果代码 3、图片自动切换的JS代码 4、JavaScript 的网页图片切换代码 5、求纯js 图片切换代码,最好带注释! 6、J

2023-12-08
12款超酷图片展示js代码下载(炫酷代码图片)

本文目录一览: 1、跪求JS完整代码 点击图片,弹出这个图片,然后可以关闭弹出的窗口 图片文件或文字用(……)代替即可 2、求--超酷超绚精美图片展示效果代码(二) - 网页特效观止-网页特效代码|

2023-12-08
js代码视频网站焦点图片切换(JS图片切换)

本文目录一览: 1、js写的焦点图片切换,怎么能让图片从数据库中动态获取路径进行显示。而不靠更改网页的代码进行增减图片? 2、js焦点图片切换 3、js焦点图切换图片的数字按钮代码怎么写?要有鼠标点击

2023-12-08
js标记图片样式,HTML图片标记

本文目录一览: 1、想在一个div里面添加图片,用js怎么写啊? 2、如何利用javascript实现JPG图片的在线标注 3、如何使用js来控制图片的css样式? 想在一个div里面添加图片,用js

2023-12-08
上下左右连续滚动图片的js代码(js图片循环滚动代码)

本文目录一览: 1、js实现图片滚动效果 2、网页制作:JavaScript图片上下滚动的导航 3、怎样在网页中让图片连续滚动,在什么地方怎么加代码? 4、js实现图片左右滚动 5、网页中的滚动图片的

2023-12-08