一个不错的给图片添加说明文字的动态层的实现代码

滑动说明文字

.slide_bg{border:#999999 3px solid;width:207px;height:106px;position:relative;overflow:hidden;float:left;margin-right:16px;margin-top:26px;}
.slide_img{background-image:url(/jscss/demoimg/wall1.jpg);width:207px;height:106px;}
.slide_txt{width:197px;height:100px;background-color:#000000;position:absolute;top:106px;left:0px;color:#FFCC33;line-height:22px;padding:5px;font-size:12px;}

var slide_content=function(){
var id="slide_content" //滑动图片父容器的id名
var interval=10; //滑动速度
var interval2=100; //文字滑出延迟时间(毫秒)
var interval3=500; //文字内容自动消失的延迟时间(毫秒)
var opacity=69; //文字内容图层透明度
var timer2=new Array();
var elem=new Array();
var status=new Array();
var div=document.getElementById(id).getElementsByTagName("div");
var timer3=0;
//run_animation
var d=function(){
var timer,obj,txt;var ypos=100;
this.run=function(pra1,pra2,dir){obj=pra1;txt=pra2;if(dir>0){clearTimeout(timer);clearTimeout(timer3);timer3=setTimeout(obj.up,interval2);}else{clearTimeout(timer);obj.down()};txt.style.filter="alpha(opacity="+opacity+")";txt.style.opacity=opacity/100;}
//向上滑动
this.up=function(){if(ypos=106){txt.style.top="106px";}else{ypos+=15;txt.style.top=ypos+"px";timer=setTimeout(obj.down,interval)}}
}
//init mouse_behavior
for(var i=0;i

春天：
春天是播种的季节。

夏天：
夏天是火热的季节。

秋天：
秋天是丰收的季节。

冬天：
冬天是雷人的季节。

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

Tags：图片 说明文字

相关文章

  • 2007-03-03jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,fir
  • 2007-10-10javascript入门·图片对象(无刷新变换图片)\滚动图像
  • 2008-07-07javascript 火狐(firefox)不显示本地图片问题解决
  • 2007-03-03仿Vista进程条效果
  • 2010-07-07来自国外的一款Js图片浏览效果
  • 2007-02-02js实现图片等比缩略显示 支持IE/FF
  • 2008-11-11javascript 随意拖动的小方块特效
  • 2011-10-10关于图片按比例自适应缩放的js代码
  • 2006-12-12鼠标移动到一张图片时变为另一张图片
  • 2007-06-06javascript实现的一个图片转移效果

最新评论

赞 (0)

相关推荐

  • 一个不错的给图片添加说明文字的动态层的实现代码

    滑动说明文字 .slide_bg{border:#999999 3px solid;width:207px;height:106px;position:relative;overflow:hidden;float:left;margin-right:16px;margin-top:26px;} .slide_img{background-image:url(/jscss/demoimg/wall1.jpg);width:207px;height:106px;} .slide_txt{width:

  • javascript随机将第一个dom中的图片添加到第二个div中示例

    javascript随机将第一个dom中的图片添加到第二个div中去,此代码的是一个简单的例子,将第一个div中的五张图片中,提取随机两张显示到第二个div中. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=

  • 用Python给二维码图片添加提示文字

    用Python给二维码图片添加提示文字

    一.需求: 判断当前浏览器是否为微信,是的话挑起微信支付,不是的话,显示二维码图片并提示用户到微信中打开 二.效果图: 三.代码实现: 1. 判断是否微信 # toolbox.py from typing import Any class UserAgent: def __init__(self, user_agent: str = '', request: Any = None): if request is not None: try: user_agent = request.header

  • Java实现给图片添加图片水印，文字水印及马赛克的方法示例

    本文实例讲述了Java实现给图片添加图片水印,文字水印及马赛克的方法.分享给大家供大家参考,具体如下: 可以在eclipse中新建个Utils类,把以下代码复制进去直接使用,以下方法实现单个或多个水印的添加 package com.rzxt.fyx.common.util; import java.awt.AlphaComposite; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import

  • php给图片添加文字水印方法汇总

    1: 面向过程的编写方法 //指定图片路径 $src = '001.png'; //获取图片信息 $info = getimagesize($src); //获取图片扩展名 $type = image_type_to_extension($info[2],false); //动态的把图片导入内存中 $fun = "imagecreatefrom{$type}"; $image = $fun('001.png'); //指定字体颜色 $col = imagecolorallocateal

  • php面向对象与面向过程两种方法给图片添加文字水印

    目前绝大多数PHP程序员使用面向过程的方式,因为解析WEB页面本身就非常"过程化"(从一个标签到另一个标签).在HTML中嵌入过程处理代码是很直接自然的作法,所以PHP程序员通常使用这种方式. 如果你是刚接触PHP,用面向过程的风格来书写代码很可能是你唯一的选择.但是如果你经常上PHP论坛和新闻组的话,你应该会看到有关"对象"的文章.你也可能看到过如何书写面向对象的PHP代码的教程.或者你也可能下载过一些现成的类库,并尝试着去实例化其中的对象和使用类方法--尽管你可

  • Python 使用 Pillow 模块给图片添加文字水印的方法

    像微博一类的平台上传图片时,平台都会添加一个水印,宣誓着对图片的所有权,我们自己的博客平台也可以给自己的图片添加上水印. 还是用 Pillow 模块来实现 先来看一个简单的例子 >>> from PIL import Image >>> from PIL import ImageDraw >>> >>> image = Image.open('/Users/wxnacy/Downloads/vm-error1.png') >&g

  • C#利用GDI+给图片添加文字（文字自适应矩形区域）

    C#利用GDI+给图片添加文字（文字自适应矩形区域）

    前言 这篇文章是 GDI+ 总结系列的第二篇,如果对 GDI+ 的基础使用不熟悉的朋友可以先看第一篇文章<C# 使用 GDI+ 画图>. 需求 需求是要做一个编辑文字的页面.用户在网页端写文字,文字区域是个矩形框,用户可以通过下方的拖动条调节文字大小. 如下图: 提交数据的时候前端传文字区域的左上角和右下角定位给后台.因为前端的字体大小单位与后端没什么关系,所以不能直接传字体大小,也就是后端要根据矩形区域以及文字内容来自己推算用什么样的字体大小合适. 简单说就是知道文字的矩形区域,以及文字内容

  • Python实现图片添加文字

    在工作中有时候会给图上添加文字,常用的是PS工具,不过我想通过代码的方式来给图片添加文字. 需要使用的Python的图像库:PIL.更加详细的知识点如下: Imaga模块:用来创建,打开,保存图片文件 new(path):用来创建一个新的图片文件.该文件位于path所在的路径中..打开后返回Image类型的图片. open(path):用来打开已经存在的图片文件.该文件位于path所在的路径中.打开后返回Image类型的图片. save(path):用来把创建或者打开的图片保到path所在的路径

  • golang中实现给gif、png、jpeg图片添加文字水印

    golang中实现给gif、png、jpeg图片添加文字水印

    添加水印示例 添加main文件:"watermark/main.go" package main import ( "fmt" "watermark/textwatermark" ) func main() { SavePath := "./kaf" str := textwatermark.FontInfo{18, "努力向上", textwatermark.TopLeft, 20, 20, 255, 2

随机推荐