js仿土豆网带缩略图的焦点图片切换效果实现方法


Posted in Javascript onFebruary 23, 2015

本文实例讲述了js仿土豆网带缩略图的焦点图片切换效果实现方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>仿土豆网带缩略图的焦点图片切换效果</title>

<style type="text/css">

/* Reset style */

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

body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }

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

a { color:#039; text-decoration:none; }

a:hover { text-decoration:underline; }

ul, li { list-style:none; }

fieldset, img { border:none; }

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

/* Focus_change style */

#focus_change { position:relative; width:450px; height:295px; overflow:hidden; margin:20px 0 1px 60px; }

#focus_change_list { position:absolute; width:1800px; height:295px; }

#focus_change_list li { float:left; }

#focus_change_list li img { width:450px; height:295px; }

.focus_change_opacity { position:absolute; width:450px; height:70px; top:225px; left:0; background:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; }

#focus_change_btn { position:absolute; width:450px; height:65px; top:225px; left:0; }

#focus_change_btn ul { padding-left:5px; }

#focus_change_btn li { display:inline; float:left; margin:0 15px; padding-top:12px; }

#focus_change_btn li img { width:76px; height:50px; border:2px solid #888; }

#focus_change_btn .current { background:url(/uploadfile/200901/1/6C164133877.gif) no-repeat 37px 8px;}

#focus_change_btn .current img { border-color:#EEE; }

</style>

<script type="text/javascript">

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

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(){

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

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

focusBtnList[i].className='';

}

}

function focusChange() {

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

focusBtnList[0].onmouseover = function() {

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

classNormal()

focusBtnList[0].className='current'

}

focusBtnList[1].onmouseover = function() {

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

classNormal()

focusBtnList[1].className='current'

}

focusBtnList[2].onmouseover = function() {

moveElement('focus_change_list',-900,0,5);

classNormal()

focusBtnList[2].className='current'

}

focusBtnList[3].onmouseover = function() {

moveElement('focus_change_list',-1350,0,5);

classNormal()

focusBtnList[3].className='current'

}

}

setInterval('autoFocusChange()', 5000);

var atuokey = false;

function autoFocusChange() {

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

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

if(atuokey) return;

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

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

if (focusBtnList[i].className == 'current') {

var currentNum = i;

}

}

if (currentNum==0 ){

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

classNormal()

focusBtnList[1].className='current'

}

if (currentNum==1 ){

moveElement('focus_change_list',-900,0,5);

classNormal()

focusBtnList[2].className='current'

}

if (currentNum==2 ){

moveElement('focus_change_list',-1350,0,5);

classNormal()

focusBtnList[3].className='current'

}

if (currentNum==3 ){

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

classNormal()

focusBtnList[0].className='current'

}

}

window.onload=function(){

focusChange();

}

</script>

</head>

<body>

<div id="focus_change">

<div id="focus_change_list" style="top:0; left:0;">

<ul>

<li><a href="https://3water.com/"><img src="/images/m03.jpg" alt="" /></a></li>

<li><a href="https://3water.com/"><img src="/images/m04.jpg" alt="" /></a></li>

<li><a href="https://3water.com/"><img src="/images/m09.jpg" alt="" /></a></li>

<li><a href="https://3water.com/"><img src="/images/m10.jpg" alt="" /></a></li>

</ul>

</div>

<div class="focus_change_opacity"></div>

<div id="focus_change_btn">

<ul>

<li class="current"><a href="#"><img src="/images/s3.jpg" alt="" /></a></li>

<li><a href="#"><img src="/images/s4.jpg" alt="" /></a></li>

<li><a href="#"><img src="/images/s9.jpg" alt="" /></a></li>

<li><a href="#"><img src="/images/s10.jpg" alt="" /></a></li>

</ul>

</div>

</div><!--focus_change end-->

<div style="height:20px; background:#EEE;"></div>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 私有成员分析
Jan 13 Javascript
js下获取div中的数据的原理分析
Apr 07 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
从零开始搭建一个react项目开发
Feb 09 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
微信小程序实现录音Record功能
May 09 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 #Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 #Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 #Javascript
使用jquery组件qrcode生成二维码及应用指南
Feb 22 #Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 #Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 #Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 #Javascript
You might like
CI(CodeIgniter)框架介绍
2014/06/09 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
JQuery1.6 使用方法三
2011/11/23 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
python检查序列seq是否含有aset中项的方法
2015/06/30 Python
Python selenium如何设置等待时间
2016/09/15 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
Python骚操作之动态定义函数
2019/03/26 Python
python实现移动木板小游戏
2020/10/09 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
初一学生期末评语
2014/04/24 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
新农村建设典型材料
2014/05/31 职场文书
体现团队精神的口号
2014/06/06 职场文书
天猫活动策划方案
2014/08/21 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android
Redis全局ID生成器的实现
2022/06/05 Redis